Comprendre le « C » de CSS : la cascade des styles.
L'objectif du cours n'est pas de faire de vous des designers web ou des experts du code HTLM ou CSS. Toutefois, il pourrait arriver durant vos devoirs et exercices que certaines règles CSS que vous tentez d'appliquer ne fonctionnent pas. Cela pourrait être le cas s'il y a une erreur dans l'écriture de votre règle, ou si une autre règle entre en conflit avec votre règle.
Dans cet article, nous allons voir les bases des trois concepts suivants :
- Priorité selon la position des styles;
- Héritage et cascade entre les éléments;
- Degré de spécificité des déclarations.
Priorité selon la position des styles
Étant donné que plusieurs règles de styles peuvent être écrites à différents endroits (attribut style d'un élément, entête de la page, fichier externe), et qu'elles peuvent affecter le même élément de manières différentes, il est important de comprendre dans quel ordre elles seront appliquées et lesquelles auront priorité sur les autres.
Essentiellement, plus l'on se « rapproche » d'un élément, plus la priorité d'une règle est grande. Par exemple :
Feuille de style externe : h1 { color : red; }
Entête de la page HTML : h1 { color : blue; }
Attribut style du titre : <h1 style="color: green;">Lorem</h1>
- La feuille de style externe applique la couleur rouge à tous les éléments h1 du site;
- Les styles dans l'entête de la page appliquent la couleur bleu à tous les éléments h1 de cette page précise;
- L'attribut style de l'élément h1 « Lorem » applique la couleur vert à ce h1 précisément.
Dans cet exemple, tous les h1 de la page seront en bleu, puisque la règle écrite dans l'entête a priorité, ou « écrase » en quelque sorte la règle écrite dans la feuille de styles externe, et le titre h1 « Lorem » sera en vert, puisque son attribut style a priorité ou « écrase » la règle écrite dans l'entête.
Héritage et cascade entre éléments
De manière similaire, certains éléments « passent » la valeur de leurs propriétés CSS à leurs éléments enfants. Par exemple, en créant la règle CSS suivante :
body { font-family: Arial; }
Tous les éléments texte de la page hériteront de cette déclaration et la police Arial leur sera appliquée. Un élément de texte précis pourrait ensuite être changé par la règle CSS suivante :
h1,h2,h3,h4,h5,h6 { font-family: 'Times New Roman'; }
Tous les titres de la page seront alors représentés dans la police Times New Roman.
D'autres règles plus complexes s'appliquent pour déterminer l'ordre de priorité de la cascade CSS. Les quelques exemples ci-dessus devraient toutefois vous permettre de mieux comprendre comment les styles sont appliqués dans vos pages.
Sources :
Écriture des feuilles de styles (Draillard, 2020)
CSS : Feuilles de style en cascade (Mozilla)
Premiers pas avec CSS (Mozilla)