Séparer le CSS dans un fichier à part

Objectif pédagogique

Savoir sortir le style du HTML dans une feuille externe, et comprendre pourquoi c'est toujours le bon choix.

La microressource précédente a posé le squelette d'une page. Reste à l'habiller. Le CSS peut s'écrire à trois endroits différents — et l'un des trois est tellement préférable aux autres qu'il vaut la peine de comprendre pourquoi.

1. Trois endroits où écrire du CSS

Les trois exemples ci-dessous produisent exactement le même résultat à l'écran : un titre bleu. Ce qui les distingue n'est pas l'effet, c'est où le style est rangé.

a. Dans la balise elle-même (style en ligne)

À éviter

<h1 style="color: #3d5afe;">Bienvenue</h1>

Le style est collé à la balise. Il ne concerne que ce titre-là : pour colorer le titre suivant, il faudra le réécrire. Multiplié par cent balises, c'est ingérable.

b. Dans le head de la page (feuille interne)

Acceptable pour un essai rapide

<head>
  <style>
    h1 { color: #3d5afe; }
  </style>
</head>

Mieux : la règle vaut pour tous les h1 de la page. Mais elle ne vaut que pour cette page. La page voisine, elle, ne sait rien de ce bleu.

c. Dans un fichier séparé (feuille externe)

css/style.css — le style vit ici

h1 { color: #3d5afe; }

index.html — la page va le chercher

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
</head>

Une seule ligne dans le head, et la page va chercher son apparence dans un fichier qu'elle partage avec toutes les autres. C'est ce que fait la page que vous êtes en train de lire.

2. Comment faire, concrètement

Créer le dossier et le fichier
Dans le dossier du projet, créez un dossier css, et dedans un fichier style.css. Le nom est libre, mais cette convention est universelle : gardez-la, tout le monde saura où chercher.
Y déplacer les règles
Coupez le contenu de votre balise <style> et collez-le dans style.css. Sans les balises : un fichier CSS ne contient que du CSS, jamais de HTML.
Relier les deux
Dans le <head> de chaque page, ajoutez la ligne <link rel="stylesheet" href="css/style.css">. Elle dit au navigateur : « avant d'afficher, va chercher ce fichier ».
Vérifier
Rechargez la page. Si elle s'affiche en Times New Roman noir sur blanc, le lien est cassé — voir la section 4.

3. L'intérêt : quatre raisons

Ce qui change	Style dans le HTML	Feuille externe
Changer la couleur du site	Modifier chaque page, une par une	Modifier une ligne, une seule fois
Ajouter une page	Recopier tout le style dedans	Ajouter la ligne `<link>`
Poids transféré	Le style repart à chaque page visitée	Téléchargé une fois, gardé en mémoire
Lecture du code	Structure et apparence mélangées	Deux fichiers, deux métiers

Une seule source de vérité

C'est la raison principale. Le jour où le bleu de la charte change, vous modifiez une ligne et les cent pages du site suivent. Avec du style éparpillé dans les balises, la même opération devient une chasse au trésor — et vous en oublierez.

Moins de données transférées

Un fichier CSS externe est téléchargé une seule fois, puis gardé en mémoire par le navigateur (le « cache ») pour toutes les pages suivantes. Un style recopié dans chaque page, lui, repart sur le réseau à chaque visite. Sur un site de cent pages, la différence n'est pas anecdotique : c'est la même règle d'éco-conception qu'au module 1.1 — l'octet le plus sobre est celui qu'on n'envoie pas deux fois.

Deux métiers, deux fichiers

Le HTML répond à « qu'est-ce que c'est ? », le CSS à « à quoi ça ressemble ? ». Séparer les deux rend chaque fichier lisible : le HTML redevient un plan de la page, sans bruit visuel. C'est vrai pour vous, et ce sera vrai pour la personne qui reprendra le projet après vous.

Un assistant plus efficace

Quand vous demandez à Claude Code de « rendre les cartes plus aérées », il modifie un fichier de style court et ciblé — pas cent pages HTML dont il risque de casser la structure au passage. Un projet bien rangé rend les demandes plus sûres. C'est tout l'objet de la microressource suivante.

Et le style en ligne, jamais ? Presque jamais. Il reste toléré pour un test de dix secondes ou dans un courriel HTML, où les feuilles externes ne fonctionnent pas. Dans un site, s'il en reste après le test, c'est un oubli à corriger.

4. Le piège du chemin

Le href du <link> est un chemin relatif : il se lit depuis la page qui l'écrit, pas depuis la racine du site. D'où deux écritures différentes pour le même fichier :

plateforme/
├── index.html          →  href="css/style.css"
├── css/
│   └── style.css
└── pages/
    └── contact.html    →  href="../css/style.css"

Les deux points .. signifient « remonte d'un dossier ». Depuis pages/contact.html, il faut d'abord remonter dans plateforme/ avant de redescendre dans css/.

Symptôme à reconnaître Une page qui s'affiche toute nue — texte noir, Times New Roman, liens bleus soulignés — n'a pas trouvé sa feuille de style. Neuf fois sur dix, c'est le chemin, pas le CSS. Vérifiez le href avant de chercher ailleurs.

Ce qu'il faut avoir compris

Le CSS s'écrit à trois endroits ; le fichier externe est le seul bon choix durable.
Une ligne <link rel="stylesheet"> dans le head suffit à relier les deux.
Une seule feuille = une seule modification pour tout le site.
Externe = téléchargée une fois puis mise en cache : moins de données, moins d'énergie.
Le chemin se lit depuis la page ; .. remonte d'un dossier.

Et maintenant

Vous savez lire une page et ranger son style. Plutôt que de tout taper à la main, la microressource suivante apprend à le faire produire — et à bien le demander.

Microressource 3 — Bien formuler ses prompts pour générer du HTML/CSS →