Les feuilles de style ont plusieurs origines, telles que l'auteur, l'utilisateur et le navigateur.
Les champs d'action de ces feuilles de style vont se recouper et leur interaction dépende des règles de la cascade.
La cascade de CSS définit un ordre de priorité, ou poids, pour chaque règle de style. Quand plusieurs règles sont mises en oeuvre, celle avec le plus grand poids a la préséance.

Calcul de la spécificité d'un sélecteur

Le calcul de la spécificité d'un sélecteur est calculé comme suit: ABCD

• A: s'il ne s'agit pas d'un sélecteur CSS mais d'un attribut style (par exemple: <p style="color:blue;">) A=1, autrement A=0.
  De cette manière, un style placé dans l'attribut style d'un élément HTML aura systématiquement un poids plus élevé qu'un style auteur placé dans une feuille de style (ABCD = 1000, la plus haute valeur possible).
• B: si A vaut 0, B est le nombre d'ids présents dans le sélecteur. Par exemple, B=2 pour le style #conteneur p#special {...}
• C: si A vaut 0, C est le nombre de classes (du type .ma_classe) et de pseudo-classes (du type [hreflang=en]) dans le sélecteur.
  Par exemple, C=2 pour le style .article p a[hreflang=en] {...}
• D: si A vaut 0, D est le nombre d'éléments HTML et de pseudo-éléments (du type :before et :after, :first-line, etc) dans le sélecteur.
  Par exemple, : D=2 pour le style a:after {...}

La concaténation des quatre nombres A-B-C-D donne la spécificité.

Quelques exemples

Nous rencontrons ici la valeur !important, qui peut être ajoutée à n'importe quelle propriété, dans un document CSS et qui lui donne alors la priorité sur une règle

Exemples par démonstration

Pour comprendre la hiérarchie de l'héritage, nous allons définir un id (#boite-a) et une classe (.boite-b) dans une feuille de style externe (heritage.css), que nous lions avec la balise html:

<link rel="stylesheet" type="text/css" href="/heritage.css" />

Dans le conteneur #boite-a, nous définissons la couleur rouge aux titres <h1> et la couleur verte aux paragraphes <p>

Voici le code CSS externe:

#boite-a    { width:500px; border:3px solid purple; }
.boite-b    { width:auto; border:3px solid green; }

#boite-a h1 { color:red; }
#boite-a p  { color:green; }

Jusque là pas de problème, mais nous allons redéfinir la couleur du titre et du paragraphe dans une feuille de style interne.

Voici le style CSS interne:

<style type="text/css">
#boite-a h1 { color:purple; }
#boite-a p  { color:blue; }
.boite-b h1 { color:green; }
.boite-b p  { color:orange; }
</style>

Voici le code html:

<div id="boite-a">
  <h1>Titre</h1>  
  <p>Paragraphe</p>  
<div class="boite-b">
  <h1>Titre</h1>  
  <p>Paragraphe</p>
</div>
</div>

Et voici le résultat:

Nous pouvons constater que le titre et le paragraphe de la classe boite-b a hérité de la couleur de #boite-a et n'a pas tenu compte de la couleur redéfinie pour .boite-b

Si maintenant nous rajoutons dans la feuille de style interne la valeur !important à la classe boite-b, nous allons forcer la couleur qui ne sera alors pas héritée du parent #boite-a car la proriété marquée par !important devient prioritaire.

Code CSS interne:

<style type="text/css">
#boite-a h1 { color:purple; }
#boite-a p  { color:blue; }
.boite-b h1 { color:green !important; }
.boite-b p  { color:orange !important; }
</style>

Le code html ne change pas, mais le résultat est le suivant:

Et voici le résultat:

Ainsi, nous constatons que le titre est bien vert au lieu de pourpre et le paragraphe orange au lieu de bleu.

Mais, si l'on place le style directement dans la balise, au lieu d'utiliser !important, alors la priorité est maximum et la couleur de la feuille de style externe ET interne ne sera pas prise en compte.

Code CSS externe:

#boite-a    { width:500px; border:3px solid purple; }
.boite-b    { width:auto; border:3px solid green; }
#boite-a h1 { color:red;}
#boite-a p  { color:green;}

Code CSS interne:

<style type="text/css">
#boite-a h1 { color:purple; }
#boite-a p  { color:blue; }
.boite-b h1 { color:green; }
.boite-b p  { color:orange; }
</style>

Code html:

<div id="boite-a">
  <h1>Titre</h1>  
  <p>Paragraphe</p>  
<div class="boite-b">
  <h1 style="color:indigo; ">Titre</h1>  
  <p style="color:deeppink; ">Paragraphe</p>
</div>
</div>

Et le résultat est le suivant:

Bien que cette méthode ne soit pas recommandée, nous pouvons contater que le titre est désormais indigo et le paragraphe deeppink