Votre page HTML est solide, mais elle ressemble à un document austère : texte noir, fond blanc, tout collé à gauche. Il est temps de l’habiller. Le CSS (Cascading Style Sheets) est le langage qui décrit l’apparence : couleurs, polices, espacements, dispositions. Mais avant de poser la moindre couleur, un développeur doit comprendre deux mécanismes qui gouvernent absolument tout en CSS : le modèle de boîte, qui décide de la taille et de l’espacement de chaque élément, et les sélecteurs, qui décident à quoi s’applique une règle. Maîtrisez ces deux-là, et le CSS cesse d’être une loterie où l’on tâtonne au hasard.

📍 À lire d’abord : Apprendre HTML & CSS de zéro — le parcours complet. Cette leçon habille la structure sémantique construite précédemment.

🎯 Ce que vous allez apprendre

Relier une feuille de style externe à votre page HTML, la bonne méthode.
Lire et écrire une règle CSS : sélecteur, propriété, valeur.
Comprendre le modèle de boîte (contenu, padding, bordure, marge) et le maîtriser avec box-sizing.
Cibler précisément vos éléments avec les sélecteurs de type, de classe, d’id, descendants et pseudo-classes.
Anticiper les conflits grâce à la spécificité, à la cascade et à l’héritage.

🛠️ Ce que vous allez construire

Vous allez donner sa première vraie allure à la Médiathèque Horizon : une typographie lisible, des cartes d’ouvrages avec bordure, coins arrondis et espacement intérieur confortable, et une mise en forme cohérente pilotée par des classes réutilisables. À la fin, vous saurez exactement pourquoi une boîte fait la largeur qu’elle fait — la fin des « pourquoi ça déborde ?! ».

Prérequis

Une page HTML sémantique sous la main (celle de la médiathèque, idéalement).
Un éditeur de code et un navigateur avec ses outils de développement (F12).
⏱️ Temps estimé : environ 50 minutes.

Étape 1 — Relier le CSS au HTML

Il existe trois façons d’appliquer du CSS, mais une seule est recommandée pour un vrai projet. On peut écrire du style en ligne via l’attribut style (à éviter, impossible à maintenir), dans une balise <style> au sein du <head> (pratique pour un test rapide), ou — la bonne méthode — dans un fichier externe relié à la page. Cette séparation respecte le principe vu précédemment : le HTML pour le sens, le CSS pour l’apparence, chacun dans son fichier.

Créez un fichier style.css à côté de votre index.html, puis reliez-le dans le <head> :

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Médiathèque Horizon</title>
</head>

La balise <link> avec rel="stylesheet" charge la feuille. Un seul fichier peut désormais styler toutes les pages du site — modifiez-le une fois, tout se met à jour. Pour vérifier que la liaison fonctionne, mettez une règle test dans style.css : body { background: #f4f4f4; }. Rechargez : le fond devient gris clair. Liaison établie.

Étape 2 — Anatomie d’une règle CSS

Une règle CSS suit toujours la même grammaire. Un sélecteur désigne les éléments visés, puis un bloc entre accolades contient une ou plusieurs déclarations, chacune étant un couple propriété: valeur;. Le point-virgule sépare les déclarations ; oublier celui d’une ligne casse souvent la suivante.

h1 {
  color: #1d3557;
  font-size: 2rem;
  margin-bottom: 1rem;
}

Ici, le sélecteur h1 vise tous les titres de niveau 1. La règle leur donne une couleur bleu nuit, une taille de police de 2 fois la taille de base, et une marge inférieure. L’unité rem est précieuse : elle se calcule par rapport à la taille de police racine du document, ce qui rend la mise à l’échelle cohérente et accessible. Appliquez cette règle, rechargez : le titre de la médiathèque change de couleur et de taille. Vous venez d’écrire votre première vraie règle CSS.

Étape 3 — Le modèle de boîte, cœur du CSS

Voici le concept que tout développeur web doit visualiser dans sa tête en permanence. Chaque élément HTML est représenté par une boîte rectangulaire composée de quatre couches concentriques, de l’intérieur vers l’extérieur :

le contenu (content) — le texte ou l’image ;
le padding — l’espace intérieur, entre le contenu et la bordure ;
la bordure (border) — le trait qui entoure le padding ;
la marge (margin) — l’espace extérieur, qui repousse les éléments voisins.

Padding pousse vers l’intérieur, marge pousse vers l’extérieur : c’est la distinction à ne jamais confondre. Stylons une carte d’ouvrage pour rendre tout ça concret. Donnez d’abord une classe à vos articles dans le HTML : <article class="carte">. Puis dans le CSS :

.carte {
  padding: 16px;
  border: 1px solid #ccc;
  margin-bottom: 12px;
  border-radius: 8px;
  background: white;
}

Rechargez : chaque ouvrage devient une carte blanche, encadrée, aux coins arrondis, avec de l’air autour du texte (le padding) et un espace qui la sépare de la suivante (la marge). Le border-radius arrondit les angles. Vous voyez le modèle de boîte à l’œuvre : le padding aère l’intérieur, la marge organise l’extérieur.

Étape 4 — box-sizing : le réglage qui sauve des heures

Maintenant, le piège historique du CSS. Par défaut, la propriété width définit la largeur du contenu seul ; le padding et la bordure s’ajoutent par-dessus. Une carte déclarée width: 300px avec padding: 16px et une bordure de 1px occupe en réalité 300 + 16 + 16 + 1 + 1 = 334 px à l’écran. D’où les débordements inexpliqués qui désespèrent les débutants. Ce comportement par défaut s’appelle box-sizing: content-box.

La solution adoptée par la quasi-totalité des projets modernes est de basculer sur box-sizing: border-box, qui fait inclure le padding et la bordure dans la largeur déclarée. Une carte width: 300px mesure alors exactement 300 px, padding et bordure compris. On l’applique d’un coup à tous les éléments en tête de feuille :

*, *::before, *::after {
  box-sizing: border-box;
}

Le sélecteur universel * vise tous les éléments, et on y ajoute les pseudo-éléments ::before/::after pour ne rien oublier. Placez cette règle tout en haut de style.css : c’est la première chose qu’écrivent la plupart des développeurs dans toute nouvelle feuille de style. Désormais, vos largeurs sont prévisibles.

✅ Point d’étape — Vos cartes ont une taille stable et prévisible. Ouvrez les outils de développement (F12), survolez une carte dans l’inspecteur : le schéma coloré du modèle de boîte (bleu pour le contenu, vert pour le padding, orange pour la marge) vous montre chaque couche. Apprenez à le lire, c’est votre meilleur allié de débogage.

Étape 5 — Les sélecteurs : viser juste

Écrire du CSS, c’est d’abord savoir désigner les bons éléments. Voici les sélecteurs fondamentaux, du plus large au plus précis :

Type : p vise tous les paragraphes.
Classe : .carte vise tous les éléments portant class="carte". C’est le sélecteur le plus utilisé : réutilisable et flexible.
Identifiant : #menu vise l’unique élément id="menu". À réserver aux éléments uniques.
Descendant : .carte p vise les paragraphes à l’intérieur d’une carte.
Enfant direct : nav > a vise les liens enfants directs du nav, pas les plus profonds.
Groupé : h1, h2, h3 applique la même règle à plusieurs sélecteurs d’un coup.

.carte h3 {
  color: #1d3557;
  margin-top: 0;
}

nav a {
  text-decoration: none;
  margin-right: 16px;
}

La première règle ne colore que les titres situés dans une carte ; la seconde retire le soulignement des liens du menu et les espace. La précision des sélecteurs évite d’appliquer un style là où on ne le veut pas — une compétence aussi importante que le style lui-même.

Étape 6 — Pseudo-classes et pseudo-éléments

Les pseudo-classes ciblent un état ou une position : :hover (survol de la souris), :focus (élément actif au clavier), :first-child, :nth-child(2). Les pseudo-éléments, eux, ciblent une partie de l’élément : ::first-line, ou ::before/::after qui insèrent du contenu généré.

nav a:hover {
  color: #e63946;
  text-decoration: underline;
}

.carte:first-child {
  border-color: #1d3557;
}

Survolez un lien du menu : il devient rouge et se souligne. C’est :hover qui réagit. La seconde règle met en évidence la première carte de la liste. Ces sélecteurs dynamiques apportent de l’interactivité sans aucun JavaScript. Pour l’accessibilité, retenez de toujours styler :focus en même temps que :hover, afin que les personnes naviguant au clavier voient elles aussi quel élément est actif.

Étape 7 — Spécificité, cascade et héritage

Que se passe-t-il quand deux règles ciblent le même élément avec des valeurs contradictoires ? Trois mécanismes tranchent. La cascade : à spécificité égale, la dernière règle écrite l’emporte. L’héritage : certaines propriétés (comme color ou font-family) se transmettent des parents aux enfants. Et la spécificité : un score qui mesure le « poids » d’un sélecteur.

La spécificité se calcule en trois colonnes — identifiants, classes / attributs / pseudo-classes, types / pseudo-éléments — comparées de gauche à droite. Un sélecteur d’id (1-0-0) bat n’importe quel nombre de classes (0-1-0, 0-2-0…), qui battent n’importe quel nombre de types (0-0-1). Le sélecteur universel * et les combinateurs comptent pour zéro.

Sélecteur	Spécificité (id-classe-type)
`p`	0-0-1
`.carte`	0-1-0
`.carte p`	0-1-1
`#menu`	1-0-0
style en ligne	encore au-dessus

Au sommet trône !important, qui force une déclaration à gagner quoi qu’il arrive — d’où la règle des professionnels : évitez !important, car il rend le CSS impossible à surcharger proprement par la suite. Quand un style « ne s’applique pas », le réflexe est presque toujours le même : un autre sélecteur plus spécifique gagne. Les outils de développement vous montrent exactement quelle règle l’emporte et lesquelles sont barrées.

✅ Point d’étape — Vous comprenez pourquoi .carte h3 (0-1-1) l’emporte sur h3 (0-0-1). Testez : ajoutez une règle h3 { color: green; } après votre règle .carte h3 ; les titres dans les cartes restent bleus, car .carte h3 est plus spécifique. Hors des cartes, les h3 deviennent verts.

🐞 Pièges fréquents

Symptôme / erreur	Cause probable	Correctif
Une boîte déborde de son conteneur	`box-sizing` resté en `content-box`	Appliquer `box-sizing: border-box` à `*`
Un espace vertical « trop grand » entre deux blocs	Fusion des marges (margin collapsing)	Comprendre que deux marges verticales adjacentes fusionnent en la plus grande
Mon style « ne s’applique pas »	Un sélecteur plus spécifique gagne	Inspecter (F12), augmenter la spécificité ou réorganiser
Le fichier CSS n’a aucun effet	Chemin du `<link>` incorrect	Vérifier `href` et la console (erreur 404)
Soulignement des liens impossible à retirer	Sélecteur trop large ou trop faible	Cibler précisément, ex. `nav a`

✅ Récapitulatif

Vous tenez maintenant les deux fondements conceptuels du CSS. Côté boîte : chaque élément est un rectangle à quatre couches (contenu, padding, bordure, marge), et box-sizing: border-box rend les largeurs prévisibles. Côté ciblage : vous savez viser par type, classe, id, descendance et état, et vous comprenez comment la spécificité, la cascade et l’héritage départagent les règles en conflit. La médiathèque a désormais une vraie identité visuelle. Mais les cartes sont encore empilées les unes sous les autres : pour les aligner côte à côte, il faudra un outil de disposition — c’est tout l’objet des leçons suivantes sur Flexbox et Grid.

🧾 Aide-mémoire

Élément	Rôle
`<link rel="stylesheet">`	Relier une feuille externe
`sélecteur { prop: val; }`	Grammaire d’une règle
`padding` / `margin`	Espace intérieur / extérieur
`border` / `border-radius`	Bordure / coins arrondis
`box-sizing: border-box`	Inclure padding+bordure dans la largeur
`.classe` / `#id`	Cibler par classe / par identifiant
`:hover` / `:focus`	États dynamiques
`::before` / `::after`	Contenu généré

💪 À vous de jouer

Donnez aux liens du menu un effet visuel au survol et au focus clavier (même apparence pour les deux), et faites en sorte que la dernière carte de la liste n’ait aucune marge inférieure (indice : pseudo-classe :last-child).

Voir une solution

nav a:hover, nav a:focus {
  color: #e63946;
}

.carte:last-child {
  margin-bottom: 0;
}

Grouper :hover et :focus garantit la même mise en évidence à la souris et au clavier ; :last-child cible la dernière carte pour supprimer l’espace de trop en bas de liste.

Tutoriels frères

Créer des formulaires HTML accessibles — pour styler ensuite le formulaire d’adhésion.
Maîtriser Flexbox pour vos mises en page — aligner enfin les cartes côte à côte.

Pour aller plus loin

🔝 Retour au parcours : Apprendre HTML & CSS de zéro
MDN — Le modèle de boîte
MDN — La spécificité

FAQ

Padding ou margin pour espacer ?
Padding pour aérer l’intérieur d’un élément (entre son contenu et sa bordure) ; margin pour créer de l’espace entre les éléments. Si vous voulez agrandir la zone cliquable d’un bouton, c’est du padding ; si vous voulez l’éloigner du bouton voisin, c’est de la marge.

Qu’est-ce que la « fusion des marges » ?
Quand deux marges verticales se touchent (le bas d’un élément et le haut du suivant), elles ne s’additionnent pas : elles fusionnent en la plus grande des deux. C’est voulu par la norme, mais surprenant au début. Le padding, lui, ne fusionne jamais.

Faut-il préférer les classes ou les id en CSS ?
Les classes, presque toujours. Elles sont réutilisables et leur spécificité modérée garde le CSS facile à surcharger. Les id ont une spécificité très élevée qui complique la maintenance ; réservez-les à l’identification d’éléments uniques (ancres, cibles JavaScript).

Pourquoi éviter !important ?
Parce qu’il court-circuite tout le système de spécificité. Une fois posé, il ne peut être surchargé que par un autre !important encore plus spécifique, ce qui mène vite à une spirale ingérable. On le réserve aux cas extrêmes, jamais comme solution de facilité.