Le phénomène de cascades en CSS s’explique par le fait que les règles s’ajoutent ou se redéfinissent les unes par dessus les autres pour former un résultat final. Voici un exemple:

body { color: black;  background: white; }
body { color: blue;                      margin:8px; }
body { color: yellow; }

Dans cet exemple, la couleur du texte sera jaune. En effet, il y a triple redéfinition de la couleur, et la dernière valeur est prise en compte. Le résultat final de ces trois règles CSS est:

body { color: yellow; background: white; margin:8px; }

On peut utiliser cette propriété avec des sélecteurs plus complexes. Toutefois, il faut faire attention au poids de chaque sélecteur. Ainsi dans l’exemple suivant:

div#identifiant { color:red;  }
div             { color:blue; }

La couleur du texte de la balise sera rouge puisque le poids du sélecteur est plus grand. L’algorithme pour calculer le poids est complexe, mais on peut généralement se fier sur le nombre de sélecteur dans une règle pour l’estimer.

Avec le concept de feuille de style en cascades, on peut redéfinir le style d’une page Web en incluant d’autres règles CSS par la suite.

Ressources