Introduction au CSS

Les trois causes les plus fréquentes : 1. le chemin du href est faux (le fichier est dans css/ et tu as écrit style.css) ; 2. le fichier s'appelle style.css.txt ou Style.css ; 3. le navigateur affiche une ancienne version en cache : recharge avec Ctrl + Maj + R. Pour vérifier, ouvre les DevTools, onglet Network : style.css doit apparaître avec le code 200, pas 404.

• Clic droit sur l'élément → Inspecter.
• Onglet Styles : toutes les règles qui s'appliquent, la plus prioritaire en haut. Les déclarations barrées ont perdu face à une autre règle.
• Clique sur une valeur pour la modifier en direct ; décoche une case pour désactiver une déclaration.
• Onglet Computed (Calculé) : la valeur finale de chaque propriété, et le schéma du modèle de boîte.
• Les modifications sont temporaires : reporte celles qui te plaisent dans ton fichier.

Beaucoup de projets commencent par un petit reset qui neutralise les différences entre navigateurs : margin: 0 sur le body, box-sizing: border-box partout, images en max-width: 100%. Tu écriras le tien au chapitre 13. Dans les DevTools, les styles par défaut apparaissent sous la mention user agent stylesheet.

• une déclaration par ligne, indentée de deux espaces ;
• toujours un point-virgule à la fin de chaque déclaration, même la dernière ;
• les noms de propriétés sont en minuscules, les mots séparés par des tirets (font-size, background-color) ;
• pas d'unité pour la valeur 0 : margin: 0.

Sans point-virgule, le navigateur lit color: navy font-size: 32px comme une seule valeur invalide et ignore les deux déclarations, sans aucun message d'erreur. Dans les DevTools, une déclaration invalide apparaît barrée avec un petit triangle jaune.

Un site de 50 pages avec un seul fichier style.css : tu changes la couleur des titres une fois, elle change partout. Avec des styles en ligne, il faudrait modifier des centaines de balises. En plus, le navigateur met le fichier CSS en cache : il n'est téléchargé qu'une fois pour tout le site.