Front-end · 6 mondes · 18 étapes
HTML & CSS
Structurer et styliser une page web, directement dans le navigateur.
Progression
0 %
0/18 étapes terminées
Fondamental · 9 min de lecture
La cascade
Pourquoi une règle gagne sur une autre
1Définition
Quand plusieurs règles visent le même élément, la cascade décide : d'abord la spécificité du sélecteur, puis l'ordre d'écriture. Certaines propriétés s'héritent du parent (couleur, police), d'autres non (espacements, bordures).
2Principes fondamentaux
01
Spécificité
Balise (0-0-1) < classe (0-1-0) < identifiant (1-0-0). Une classe bat une balise, où qu'elle soit écrite.
02
Ordre
À spécificité égale, la dernière règle écrite gagne.
03
Héritage
color et font-family posés sur body descendent partout ; padding et border ne descendent jamais.
04
Des classes, presque toujours
Travailler avec des classes de même poids rend la cascade prévisible. Les identifiants et !important la rendent ingérable.
3Exemples pratiques
La classe gagne
1p { color: #555555; }2.note { color: #ee6900; }3 4<p class="note">Orange.</p>La classe est plus spécifique que la balise : l'ordre d'écriture n'entre même pas en jeu.
Une charte en variables
1:root {2 --marque: #ee6900;3 --fond: #ece4d4;4}5 6body { background-color: var(--fond); }7.bouton { background-color: var(--marque); }Changer la charte, c'est changer deux lignes. C'est ainsi que fonctionnent les thèmes et les modes sombres.
4Erreurs courantes
Régler un conflit par !important
À éviter
.titre { color: red !important; }À faire
/* comprendre quelle règle gagne, et pourquoi */Pourquoi : !important gagne toujours, donc le prochain conflit ne pourra se régler que par un autre !important.
Styler par identifiant
À éviter
#carte-1 { padding: 16px; }À faire
.carte { padding: 16px; }Pourquoi : Un identifiant est unique et très spécifique : impossible à réutiliser, difficile à surcharger.
Oublier un point-virgule
À éviter
h1 { color: #ee6900 font-size: 2rem; }À faire
h1 { color: #ee6900; font-size: 2rem; }Pourquoi : Sans point-virgule, les deux déclarations fusionnent en une valeur invalide, et les deux sont ignorées sans message.
5Subtilités à connaître
- ◆Les outils de développement du navigateur (clic droit, Inspecter) montrent quelles règles s'appliquent et lesquelles sont barrées : c'est l'outil de débogage du CSS.
- ◆
inheritforce l'héritage d'une propriété qui ne s'hérite pas ;initialrevient à la valeur par défaut du navigateur. - ◆Une variable CSS est elle-même soumise à la cascade : redéclarée sur un élément, elle change pour tous ses descendants — c'est la base des thèmes locaux.
6Vérifie ta compréhension
Question 1/3
Score 0
Qui gagne entre p et .note ?
Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.