🎯 Le cours : les règles CSS
CSS (*Cascading Style Sheets*) décrit l'apparence d'une page : couleurs, tailles, espacements, mise en page. Le HTML dit « ceci est un titre », le CSS dit « les titres sont bleus et en gras ». Séparer les deux permet de changer l'allure de tout un site en modifiant un seul fichier.
Où écrire du CSS ?
| Méthode | Exemple | Quand |
|---|
| fichier externe (recommandé) | <link rel="stylesheet" href="style.css"> dans le <head> | tout le site partage le même style |
balise <style> | <style> p { color: blue; } </style> dans le <head> | une seule page, ou un petit essai |
attribut style | <p style="color: blue;"> | cas exceptionnel : difficile à maintenir et très prioritaire |
Anatomie d'une règle
h1, h2 { ◄── sélecteur (ici deux éléments)
color: #2563eb; ◄── déclaration : propriété: valeur;
margin-bottom: 0.5rem; ◄── chaque déclaration finit par un ;
}
Les commentaires s'écrivent /* … */. Un point-virgule oublié casse la déclaration suivante : c'est la faute la plus courante.
Les sélecteurs de base
| Sélecteur | Cible | Exemple |
|---|
| élément | toutes les balises de ce nom | p, h1, a |
| classe | les éléments portant cette classe (réutilisable) | .carte |
| identifiant | l'unique élément de cet id | #entete |
| universel | tous les éléments | * |
| groupe | plusieurs sélecteurs à la fois (séparés par une virgule) | h1, h2, h3 |
| classes cumulées | les éléments qui ont les deux classes | .carte.vedette |
On préfère les classes aux identifiants pour le style : une classe se réutilise sur autant d'éléments qu'on veut, alors qu'un identifiant est unique et très prioritaire, ce qui complique les surcharges.
Les combinateurs : relations entre éléments
| Écriture | Signification | Exemple |
|---|
A B | B est un descendant de A (à n'importe quel niveau) | nav a |
A > B | B est un enfant direct de A | ul > li |
A + B | B est le frère immédiatement après A | h2 + p |
A ~ B | B est un frère quelconque après A | h2 ~ p |
/* tous les liens situés dans le menu */
nav a {
color: #ffffff;
}
/* seulement les li directement sous la liste principale */
.menu > li {
display: inline-block;
}
/* le paragraphe juste après un titre */
h2 + p {
font-size: 1.1rem;
}
Les sélecteurs d'attribut
[attr] cible les éléments qui possèdent l'attribut, [attr="valeur"] ceux qui ont cette valeur exacte, [attr^="https"] une valeur qui commence par…, [attr$=".pdf"] qui finit par…, [attr*="nsi"] qui contient…
input[type="email"] {
border-color: #2563eb;
}
a[href^="https"]::after {
content: " ↗";
}
a[href$=".pdf"] {
font-weight: 700;
}
La cascade : qui gagne ?
Le navigateur cherche toutes les règles qui s'appliquent à un élément. En cas de conflit sur une propriété, il départage dans cet ordre :
- l'importance (
!important l'emporte, puis les règles normales) ;
- la spécificité du sélecteur (la plus forte gagne) ;
- l'ordre d'écriture : à spécificité égale, la dernière règle gagne.
La spécificité se compte comme un triplet (identifiants, classes, éléments). #menu a.actif vaut (1, 1, 1) : un identifiant, une classe, un élément. On compare composante par composante, de gauche à droite : un seul identifiant bat n'importe quel nombre de classes.
| Sélecteur | Spécificité |
|---|
p | (0, 0, 1) |
.carte p | (0, 1, 1) |
.carte.vedette | (0, 2, 0) |
nav ul li a | (0, 0, 4) |
#menu a | (1, 0, 1) |
L'héritage
Certaines propriétés se transmettent des parents aux enfants : tout ce qui concerne le texte (color, font-family, font-size, line-height, text-align). Les propriétés de boîte (border, margin, padding, background) ne s'héritent pas. Pour régler la police de toute la page, on la déclare sur body ; pour forcer l'héritage, inherit.
body {
font-family: system-ui, sans-serif; /* hérité par tous les éléments */
color: #14141a;
}
a {
color: inherit; /* reprend la couleur du parent */
}
Mettre de l'ordre dans son CSS
- Une classe par rôle (
.carte, .bouton, .alerte) plutôt qu'un sélecteur très long ; garde les sélecteurs courts, ils se surchargent plus facilement.
- Évite les identifiants et
!important pour le style : ils rendent les surcharges impossibles sans d'autres astuces.
- Nomme les classes d'après le rôle (
.alerte) et non l'apparence (.rouge) : si le style change, le nom reste vrai.
- Regroupe le CSS par zone (en-tête, menu, contenu) et commente chaque groupe.
