La cascade

1. Le chemin du navigateur

Pour décider de la couleur d’un élément, le navigateur se pose trois questions, toujours dans le même ordre.

1. Des règles ciblent-elles cet élément ? Si oui, la plus spécifique l’emporte, et à égalité, la dernière écrite.
2. Sinon, de quelle couleur est son parent ? L’élément hérite de la couleur de son parent. Pour connaître celle du parent, on se pose les mêmes questions.
3. Aucune règle, ni sur lui ni sur ses parents ? Le navigateur applique un style par défaut. Pour la couleur du texte, c’est le noir.

La première question, c’est la leçon sur la spécificité. Cette leçon s’attarde sur les deux suivantes.

2. L’héritage

Une règle ne cible pas seulement un élément : sa couleur descend aussi vers ses enfants, ses petits-enfants, et tous ses descendants.

<div class="carte">
    <h2>Lisbonne</h2>
    <p>Trois jours au bord du Tage.</p>
</div>

.carte {
    color: teal;
}

Aucune règle ne cible le h2 ni le p. Pourtant, ils s’affichent en bleu-vert : ils héritent de la couleur de leur parent. C’est bien pratique : une seule règle sur body suffit à colorer tout le texte de la page.

Un élément a souvent plusieurs ancêtres : son parent, le parent de son parent, et ainsi de suite jusqu’en haut de la page. Quand plusieurs d’entre eux ont une couleur, c’est le plus proche qui compte.

<section>
    <div>
        <p>Hello</p>
    </div>
</section>

div {
    color: blue;
}

section {
    color: red;
}

Le paragraphe s’affiche en bleu. Il hérite de son parent, le div. Le div a reçu sa couleur d’une règle. Sans elle, il aurait hérité du rouge de la section, et le paragraphe aussi. L’ordre des règles n’y change rien.

Certaines propriétés ne s’héritent pas. La couleur, la police et la taille du texte descendent vers les enfants. Le fond, les bordures, la largeur et les marges, non : imaginez une bordure recopiée sur chaque élément d’une liste.

3. Une règle bat toujours l’héritage

Voici le piège le plus courant de la cascade.

<div id="page">
    <p>Hello</p>
</div>

#page {
    color: red;
}

p {
    color: blue;
}

Le paragraphe s’affiche en bleu. Le sélecteur #page pèse 1000 et p seulement 0,1, mais la question ne se pose pas : #page ne cible pas le paragraphe. Le paragraphe est ciblé par p, et une règle qui cible un élément l’emporte toujours sur ce qu’il hérite.

La spécificité ne départage que des règles qui ciblent le même élément.

4. Le sélecteur universel

L’étoile * est un sélecteur qui cible tous les éléments de la page. Elle ne pèse rien, 0, mais elle cible chaque élément. Reprenons la carte de la partie 2.

<div class="carte">
    <h2>Lisbonne</h2>
    <p>Trois jours au bord du Tage.</p>
</div>

* {
    color: green;
}

.carte {
    color: red;
}

Le h2 et le p s’affichent maintenant en vert, et non plus en bleu-vert. La règle .carte colore bien la carte en rouge, mais ses enfants sont ciblés par *. La première question a une réponse, la deuxième ne se pose plus. L’étoile casse l’héritage partout où elle passe.

C’est vrai aussi pour les balises au milieu du texte. Dans <p><b>Hello</b> World</p>, le b est un élément comme un autre. Il hérite du p, sauf si une règle le cible. Avec *, il est ciblé.

C’est pourquoi on évite d’écrire une couleur sur *. Pour donner une couleur à toute la page, on la met sur body, et on laisse l’héritage faire le reste.

5. Les couleurs hexadécimales

Jusqu’ici, les couleurs avaient un nom, red ou blue. Le plus souvent, on les écrit en hexadécimal. En hexadécimal, on compte avec seize chiffres : de 0 à 9, puis de a à f. Une couleur s’écrit avec un dièse suivi de six de ces chiffres.

color: #ff0000;

Les six chiffres vont par deux : la quantité de rouge, puis de vert, puis de bleu. Chaque paire va de 00, rien, à ff, à fond.

Quand chaque paire répète le même chiffre, on peut n’en écrire qu’un : #f00 est le même rouge que #ff0000.

6. S’entraîner avec Quelle couleur ?

Dans ce jeu, un mot, « Hello », se cache dans un bout de HTML, et quelques règles CSS changent la couleur du texte. À vous de dire de quelle couleur il s’affiche.