PhpBB Lab Académie

Observer deux règles de même spécificité sur les vraies introductions, raisonner propriété par propriété et nettoyer les déclarations temporaires.

Une expérience sur les textes déjà présents

Les paragraphes d’introduction de l’accueil, de À propos et de Contact partagent .introduction. Nous allons utiliser ce composant pour comprendre la cascade, puis retirer les essais.

Gardez une seule feuille styles.css. Les essais de cette leçon ne créent ni nouvelle page ni nouvelle classe.

1. Plusieurs déclarations peuvent se compléter

Une règle peut donner une couleur et une autre une graisse au même élément. Tant qu’elles ne redéfinissent pas la même propriété, elles se complètent.

Pour une propriété donnée, le navigateur doit toutefois déterminer une valeur. Lorsqu’il dispose de plusieurs déclarations applicables, il les départage grâce à la cascade.

2. Isoler le rôle de l’ordre

Notre règle actuelle donne color: #374151; à .introduction. Ajoutez temporairement, à la fin de styles.css :

.introduction {
    color: #163b65;
}

Les sélecteurs sont identiques. Dans nos règles ordinaires, écrites dans la même feuille sans importance spéciale ni couche de cascade, la déclaration située plus tard gagne cette égalité. Les trois introductions prennent donc #163b65.

Ce n’est pas une règle générale « tout ce qui est en bas gagne » : d’autres critères interviennent lorsque les règles n’ont pas la même priorité.

3. Une règle tardive n’efface pas tout le bloc précédent

Ajoutez temporairement font-weight: bold; à la première règle .introduction, en laissant la seconde limitée à color. Les introductions deviennent bleues et restent en gras : la seconde règle remplace color, pas font-weight.

La cascade travaille propriété par propriété. Les déclarations non redéfinies continuent à participer au rendu.

4. Inverser pour vérifier

Déplacez le bloc bleu avant le bloc gris, sans changer leurs sélecteurs. La dernière couleur devient #374151. Le gras reste présent, car une seule déclaration le demande.

Cette comparaison isole vraiment l’ordre : vous ne changez ni les classes HTML, ni le contenu, ni le niveau des titres. Avec un lecteur d’écran, les paragraphes restent les mêmes ; le résultat attendu des propriétés est écrit dans la leçon.

5. L’état à conserver pour la suite

Retirez le bloc d’essai et retirez le gras ajouté uniquement pour l’expérience. Il doit rester une seule règle :

.introduction {
    color: #374151;
}

Les autres règles ne changent pas. Cette étape de nettoyage fait partie de l’exercice : laisser des essais en fin de feuille rendrait les leçons suivantes difficiles à expliquer.

La prochaine leçon comparera des sélecteurs différents, toujours sur ces mêmes introductions.

Pendant l’essai seulement :

.introduction {
    color: #374151;
    font-weight: bold;
}

.introduction {
    color: #163b65;
}

Résultat attendu : couleur #163b65 et gras. Seule color est redéfinie dans le second bloc.

Étape 1

Gardez la règle grise .introduction et ajoutez temporairement la règle bleue en bas de styles.css.

Étape 2

Ajoutez font-weight: bold; dans la première règle. Prédisez la couleur et la graisse avant d’actualiser.

Étape 3

Inversez les deux blocs. Expliquez pourquoi la couleur change mais pas la présence du gras.

Étape 4

Retirez tous les essais. Conservez exactement .introduction { color: #374151; }.

Étape 5

Vérifiez les trois pages et expliquez pourquoi déplacer une règle en bas n’est pas une méthode universelle de correction.

La cascade compare des déclarations, pas des blocs complets. Dans le cas étudié, l’ordre départage des priorités équivalentes. Les essais doivent être retirés avant de continuer.