CSS / Débutant / 10 min

Une mise en page qui respire

Espacement, couleurs et typographie : les bases d’une page lisible.

Guide de la rédaction · 17 octobre 2026

Relier une feuille de style

Créez style.css à côté de index.html. Dans head, ajoutez <link rel="stylesheet" href="style.css">. Séparer la présentation et le contenu permet de modifier plusieurs pages avec un seul fichier.

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.65;
  color: #20312d;
  background: #f6f7f2;
}
main {
  width: min(100% - 2rem, 65ch);
  margin: 4rem auto;
}
h1 { line-height: 1.1; }
a { color: #17664f; }

Lire le résultat

La largeur en ch limite la longueur des lignes. Le calcul 100% - 2rem garde une marge sur les petits écrans. Le margin auto centre le contenu. Avec border-box, le remplissage et les bordures font partie de la largeur annoncée.

Espacer avec intention

Utilisez margin pour séparer deux éléments et padding pour laisser de l’espace à l’intérieur d’un bloc. Commencez avec une petite échelle, par exemple 0.5rem, 1rem et 2rem. Évitez d’ajouter des hauteurs fixes aux blocs de texte : leur contenu doit pouvoir grandir.

Diagnostiquer une règle ignorée

Ouvrez les outils de développement du navigateur et inspectez un élément. Une déclaration barrée est remplacée par une autre règle. Vérifiez aussi le sélecteur, les accolades et le chemin du fichier CSS avant d’ajouter !important.

À vous de jouer

Changez la couleur de fond et augmentez la taille du titre. Testez le zoom à 200 % : le texte doit rester lisible sans chevauchement. Ne choisissez pas une couleur de lien si proche du texte qu’on ne peut plus le distinguer.

Pour aller plus loin

Retrouvez les références des langages dans les ressources MDN pour apprendre le développement web.