La cascade est ce qui rend les feuilles de style CSS si utiles. En bref, la cascade définit l'ordre de priorité pour l'application des styles en conflit. En d'autres termes, si vous avez deux styles:
p {couleur: rouge; }p {couleur: bleu; }
La cascade détermine la couleur des paragraphes, même si la feuille de style indique qu'ils doivent être à la fois rouges et bleus. En fin de compte, une seule couleur peut être appliquée aux paragraphes, il doit donc y avoir un ordre. Et cet ordre est appliqué par quels sélecteurs (le p dans l'exemple ci-dessus) ont la priorité la plus élevée et l'ordre dans lequel ils apparaissent dans le document.
La liste suivante simplifie la manière dont votre navigateur détermine la priorité d'un style:
- Recherchez dans la feuille de style un sélecteur correspondant à l'élément. S'il n'y a pas de styles définis, utilisez les règles par défaut dans le navigateur.
- Recherchez dans la feuille de style les sélecteurs marqués
!importantet les appliquer aux éléments appropriés. - Tous les styles de la feuille de style remplaceront les styles de navigateur par défaut (sauf dans le cas des feuilles de style de l'utilisateur).
- Plus le sélecteur de style est spécifique, plus la priorité sera grande. Par exemple,
div> p.classest plus spécifique quep.classqui est plus spécifique quep. - Enfin, si deux règles s’appliquent au même élément et ont la même priorité de sélecteur, celle qui a été chargée dernier sera appliqué. En d'autres termes, la feuille de style est lue de haut en bas et les styles sont appliqués les uns sur les autres.
Sur la base de ces règles, dans l'exemple ci-dessus, les paragraphes seraient écrits en bleu, car p {couleur: bleu; } vient en dernier dans la feuille de style.
Ceci est une explication très simplifiée de la cascade. Si vous souhaitez en savoir plus sur le fonctionnement de la cascade, vous devez lire Que signifie «Cascade» dans les feuilles de style en cascade?.
