Module 6 : La cascade et les conflits

Trois endroits pour écrire du CSS

Le navigateur accepte trois emplacements pour ton CSS. Depuis le module 4, tu utilises le premier. Les deux autres, tu les croiseras dans du vrai code : apprends à les reconnaître.

1. La feuille externe

<head>
    <title>Le club</title>
    <link rel="stylesheet" href="style.css">
</head>

Où ? Le CSS vit dans un fichier à part, style.css — ton onglet CSS. Dans le <head> de la page, une balise <link> dit au navigateur d'aller le chercher.

Chaque page du site relie le même fichier avec la même balise : un seul style.css habille index.html, contact.html et toutes les suivantes. Une correction dans la feuille, et tout le site suit.

2. La balise <style>

Cet extrait se trouve dans index.html :

<head>
    <title>Le club</title>
    <style>
        p { color: navy; }
    </style>
</head>

Où ? Dans le <head>, entre <style> et </style>. Dedans, des règles CSS ordinaires : sélecteur, accolades, déclarations.

Le hic : ce bloc ne sert que index.html. Pour habiller contact.html, il faut le recopier dedans. Et chaque changement devra ensuite être fait dans les deux pages, sans en oublier une.

3. Le style inline

<body>
    <p style="color: navy">Bienvenue au club !</p>
</body>

Où ? Directement sur la balise, dans l'attribut style. Pas de sélecteur, pas d'accolades : seulement des déclarations, qui ne touchent que cette balise.

Le hic : il se recopie balise par balise. Le jour où le club change de couleur, tu corriges cent lignes au lieu d'une.

Lequel choisir ?

Les trois fonctionnent. Mais un seul se corrige à un endroit, se partage entre toutes les pages et laisse le HTML lisible : la feuille externe. Ce module t'apprend à reconnaître les deux autres... et à t'en débarrasser.

Quand deux règles se disputent

Nouveau problème, inévitable dès que ta feuille grandit : deux règles visent le même élément et donnent des ordres contradictoires — le code, et ce que le navigateur en fait :

<p>Bleu ou rouge ?</p>

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

Le paragraphe s'affiche en rouge : le navigateur applique la dernière règle lue.

Pour trancher, le navigateur suit toujours les mêmes règles de priorité : c'est la cascade — le « C » de CSS. Elle tient en deux lois :

1. À poids égal, la dernière règle écrite l'emporte — l'ordre de ta feuille compte
2. Le poids d'abord : un sélecteur d'id pèse plus lourd qu'un sélecteur de classe, qui pèse plus lourd qu'un sélecteur de balise

Comment se calcule le poids

Pour peser un sélecteur, range ce qu'il contient dans trois colonnes : id, classe, balise. Puis lis la ligne comme un nombre. Le plus grand nombre gagne.

• p : une balise → 001, soit 1
• .special : une classe → 010, soit 10
• .carte h2 : une classe et une balise → 011, soit 11. Dans un sélecteur combiné, chaque morceau compte dans sa colonne
• #badge-complet : un id → 100, soit 100

Le calculateur fait ce rangement pour toi : le poids gagnant ressort en vert, les autres sont barrés. Modifie un sélecteur ou ajoutes-en un, et regarde le gagnant changer.

Même nombre des deux côtés ? Alors seulement, l'ordre décide : la dernière règle l'emporte. Ce calcul, tu vas le pratiquer pour de vrai dans « Le poids de la classe » et « L'id, poids lourd ».

Deux cas échappent à ce calcul : le style inline et !important. Ils écrasent tous les poids, et tu verras pourquoi il vaut mieux les éviter.

Ton allié : l'inspecteur

Quand un style ne s'applique pas, inutile de deviner : le navigateur sait exactement quelles règles se disputent l'élément, et laquelle a gagné. F12 ou clic droit → Inspecter : les règles perdantes s'affichent barrées. Promis depuis le module 4 — cette fois, tu vas t'en servir pour de vrai.

Ce qui se passe dans l'animation :

1. Clic droit sur « Concert de Noël », puis Inspecter. L'onglet Styles liste les règles qui visent ce titre.
2. .carte h2 (dimgray) l'emporte : le color: teal de .vedette est barré. Décocher dimgray le confirme, le titre devient turquoise.
3. Correction : un double-clic sur le sélecteur .vedette permet de le renforcer en .carte .vedette. Il pèse 20 contre 11 : le titre passe en turquoise, et c'est dimgray qui se retrouve barré.

Attention : ce que tu modifies dans l'inspecteur est temporaire. Recharge la page et tout revient. Une fois la bonne correction trouvée, reporte-la dans ton style.css.

À toi : ouvre la page du concert dans un nouvel onglet, sur ordinateur, et refais l'enquête avec F12.

Au programme

1. La dernière l'emporte — l'ordre des règles dans la feuille
2. Adieu le style inline — rapatrier le CSS là où il doit vivre
3. Le poids de la classe — pourquoi elle bat la balise
4. L'id, poids lourd — et le piège du !important
5. Enquête avec F12 — lire les règles barrées et corriger
6. Le défi : la feuille héritée, à assainir de fond en comble

Prêt ?

Deux lois, un inspecteur, zéro mystère : après ce module, plus aucun « pourquoi ça ne s'applique pas ?! » ne te résistera. C'est parti !