Aperçu gratuit
Les bases de CSS : sélecteurs, couleurs, textes
🎯 Objectif : appliquer des styles à tes éléments.
Brancher un fichier CSS
<head>
<link rel="stylesheet" href="style.css">
</head>
La syntaxe
sélecteur {
propriété: valeur;
autre-propriété: valeur;
}
h1 {
color: darkgreen;
font-size: 32px;
text-align: center;
}
p {
color: #333333;
line-height: 1.6;
}
Les sélecteurs
| Sélecteur | Cible | Exemple |
|---|---|---|
| h1, p, a | Toutes les balises de ce type. | p { color: gray; } |
| .nom | Les éléments avec class="nom". | .bouton { background: green; } |
| #nom | L'élément avec id="nom" (unique). | #entete { height: 80px; } |
| nav a | Les liens à l'intérieur de nav. | nav a { color: white; } |
| a:hover | Un lien quand la souris passe dessus. | a:hover { color: red; } |
<a class="bouton" href="https://wa.me/22900000000">Commander</a>
Les couleurs
- Par nom : red, green, darkblue, orange.
- En hexadécimal : #ff0000 (rouge), #008000 (vert), #ffffff (blanc), #000000 (noir).
- En RGB : rgb(255, 0, 0).
- Avec transparence : rgba(0, 0, 0, 0.5).
Les propriétés de texte
| Propriété | Effet | Exemple |
|---|---|---|
| color | Couleur du texte | color: navy; |
| font-family | Police | font-family: Arial, sans-serif; |
| font-size | Taille | font-size: 18px; |
| font-weight | Gras | font-weight: bold; |
| text-align | Alignement | text-align: center; |
| line-height | Interligne | line-height: 1.6; |
| text-decoration | Soulignement | text-decoration: none; |
Les couleurs de fond et bordures
.carte {
background-color: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 8px;
}
💡 À retenir : Choisis 3 couleurs maximum pour ton site : une couleur principale, une secondaire, un fond neutre. Un site sobre inspire confiance.
Envie de voir la suite ?
Inscrivez-vous à « Créer son premier site web : HTML, CSS et JavaScript » pour accéder à toutes les leçons.
Voir le cours