L'ordre : le style en cascade

Comme son nom l'indique, le CSS (Cascading Style Sheets - Feuilles de style en cascade) suit un modèle en cascade, c'est à dire les uns à la suite des autres, de haut en bas. Les propriétés appliqués à un élément sont donc fonction de leur positionnement dans votre fichier CSS.

Si vous écrivez plusieurs propriétés pour un même élément, c'est toujours la dernière qui s'appliquera, et ce peu importe la façon dont vous le définissez :

Premier cas :

Code:

p {
   color: blue;
   color: green;
   color: red;
}

Second cas :

Code:

p { color: blue }
p { color: green }
p { color: red }

Dans ces deux cas, le texte des paragraphes (balise <p>) sera affiché en rouge. Jusque là, tout est simple.

L'héritage

Le second principe du CSS, c'est qu'une propriété appliquée à un parent s'applique également à ses enfants, si bien sûr elle est compatible.

Un exemple tout simple :

Code:

.rouge { color: red }

Code:

<div class="rouge">
   <p>Texte</p>
   <span>Texte</span>
   <div>Texte</div>
</div>

Pour chacune de ces balises, la propriété de couleur de leur parent (la div portant la classe "rouge") sera héritée, et tout ces éléments appliqueront donc une couleur rouge à leur contenu. Là encore, tout est simple.

La proximité des déclarations

Compliquons un peut les choses.
Le principe d'héritage fonctionne en fonction de la proximité des déclarations avec une balise. C'est un peu dur à comprendre comme ça, alors voyons un exemple plus explicite :

Code:

.blue{ color: blue }
.rouge { color: red }

Code:

<div class="rouge">
   <p>Texte</p>
   <span class="blue">Texte</span>
   <div>Texte</div>
</div>

Cette fois, tout le texte sera rouge, à l'exception du contenu du span, qui sera en bleu. En effet, l'ordre des propriétés et déclaration CSS se fait aussi en fonction de la proximité avec les éléments avec les déclarations. En clair, une déclaration qui touche directement un enfant aura toujours plus de "poids" qu'une déclaration héritée depuis un parent. De la même façon, une déclaration sur un parent plus proche hiérarchiquement sera héritée à la place de celle d'un parent plus lointain :

Code:

<div class="rouge">
   <div class="bleu">
      <span>Ce texte sera bleu</span>
   </div>
<div>

Cas particulier : !important

Cette propriété un peu particulière peut surclasser l'héritage hiérarchique du CSS. Exemple :

Code:

.maClasse {
   color: white;
   color: red;
   color: blue !important;
   color: green;
}

Alors le texte sera bleu, car la propriété !important surclasse toute hiérarchie (nous le verrons plus tard dans un autre cours sur le poids des déclarations).

À noter, l'héritage hiérarchique fonctionne aussi avec !important. Ainsi, si vous faites ceci, alors c'est de nouveau la dernière propriété (vert) qui sera utilisée :

Code:

.maClasse {
   color: white !important;
   color: red !important;
   color: blue !important;
   color: green !important;
}

Merci pour ce tuto Manu, il est à présent classé au bon endroit et plus dans les LS! ^^