Introduction 2 min de lecture

Module 6 : La cascade et les conflits

Trois endroits pour écrire du CSS

Depuis le module 4, tu écris ton CSS dans une feuille externe — l'onglet CSS, ton style.css. Mais le navigateur accepte deux autres emplacements, et tu les croiseras dans du vrai code :

<p style="color: red">Le style inline, collé sur la balise</p>

<head>
  <style>
    p { color: red; }
  </style>
</head>
  • le style inline — un attribut style posé directement sur une balise
  • la balise <style> — un bloc de CSS enfermé dans le <head> de la page
  • la feuille externe — le fichier style.css, relié par <link>

Les trois fonctionnent. Mais un seul se corrige à un endroit, se partage entre mille pages et laisse le HTML lisible : la feuille externe. Le style inline, lui, se recopie balise par balise — et le jour où le club change de couleur, tu corriges cent lignes au lieu d'une. 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.

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

De quelle couleur s'affichent les paragraphes ? Le navigateur ne panique pas, ne mélange pas, ne signale rien : il applique des règles de priorité, toujours les mêmes. C'est la cascade — le « C » de CSS, littéralement.

Tu vas apprendre ses 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

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.

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 !

Prochain exercice

La dernière l'emporte