Ce que fait CSS

Un seul fichier CSS peut modifier l'apparence de toutes les pages d'un site d'un coup. C'était le principal argument en faveur de CSS quand le W3C a publié CSS niveau 1 en décembre 1996.

La structure en HTML, l'apparence en CSS

HTML indique ce qu'est chaque partie d'une page : un titre, une liste, un formulaire. CSS, abréviation de Cascading Style Sheets (feuilles de style en cascade), indique à quoi ces parties doivent ressembler : couleurs, polices, tailles, espacements et position à l'écran. Séparer les deux a des avantages concrets. Tu peux changer l'apparence d'un site entier en modifiant une seule feuille de style, le même HTML peut s'afficher différemment sur un téléphone, un grand écran ou sur papier, et les lecteurs peuvent appliquer leurs propres styles, par exemple un texte plus grand, sans casser la page.

Håkon Wium Lie a commencé à travailler sur CSS au CERN en octobre 1994, Bert Bos l'a rejoint en 1995, et le W3C a publié CSS niveau 1 comme Recommandation le 17 décembre 1996. CSS 2 a suivi en mai 1998. Depuis, CSS est découpé en modules, comme Color, Selectors, Flexbox et Grid, chacun développé à son propre rythme par le groupe de travail CSS du W3C. Il n'existe pas de CSS4 unique : le groupe de travail publie un instantané qui indique quels modules sont stables.

La structure d'une règle

Une feuille de style est une liste de règles. Chaque règle commence par un sélecteur, qui indique à quels éléments elle s'applique, suivi d'un bloc de déclarations entre accolades. Dans le bloc, chaque déclaration se compose d'une propriété, de deux-points, d'une valeur et d'un point-virgule. Dans la règle ci-dessus, h1 sélectionne tous les titres de niveau un, et les deux déclarations rendent ces titres bleus et hauts de 32 pixels. Les espaces et les retours à la ligne à l'intérieur d'une règle ne comptent pas : la plupart des gens placent donc chaque déclaration sur sa propre ligne pour garder le code lisible.

Quand le navigateur rencontre une déclaration qu'il ne comprend pas, comme une propriété mal orthographiée ou une valeur absurde, il ignore cette seule déclaration et passe à la suivante. C'est voulu : on peut ainsi ajouter de nouvelles fonctionnalités CSS sans casser les anciens navigateurs. Le revers de la médaille, c'est qu'un seul point-virgule oublié peut faire disparaître sans bruit la déclaration suivante, car les deux se fondent en une seule déclaration invalide. Si un style ne s'applique pas, vérifie d'abord la ponctuation. Les commentaires s'écrivent /* comme ceci */.

Trois façons d'ajouter du CSS

<!-- 1. External stylesheet: one file for the whole site -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal stylesheet: rules for this page only -->
<style>
  p { line-height: 1.5; }
</style>

<!-- 3. Inline style: one element only -->
<p style="color: green;">Fresh today</p>

Une feuille de style externe, liée depuis le <head> avec <link rel="stylesheet">, est le choix habituel pour un vrai site : toutes les pages la partagent, et le navigateur la télécharge une fois puis la garde en cache. Un élément <style> contient les règles d'une seule page, et c'est ce qu'utilisent les exercices de ce cours. L'attribut style applique des déclarations à un seul élément ; il est pratique pour un essai rapide mais difficile à maintenir, car il faut répéter la même apparence sur chaque élément.

Le navigateur a déjà des styles

Même une page sans CSS a un peu de style : les titres sont grands et en gras, les liens sont bleus et soulignés, les listes sont en retrait. Ces styles viennent de la feuille de style par défaut du navigateur, appelée feuille de style de l'agent utilisateur. Tes règles s'appliquent par-dessus. C'est pour cela que la page de la boulangerie du cours HTML était lisible avant d'avoir le moindre CSS, et qu'une bonne feuille de style ne change que ce qui est nécessaire.