Premiers pas en CSS

À la fin du livre HTML, le site de la Librairie du Campus était complet : six pages valides, sémantiques, accessibles. Ouvrons pourtant sa page d'accueil dans un navigateur : du texte noir en police à empattements sur fond blanc, des liens bleus soulignés, des listes à puces collées au bord gauche. Tout y est, mais rien n'a d'allure. La page a l'apparence que le navigateur donne par défaut à n'importe quel document.

Ce chapitre ajoute à la librairie sa première feuille de style : un fichier, écrit dans le langage CSS, qui dit au navigateur comment présenter les éléments que HTML a décrits. Quelques lignes suffiront à lui donner une police, des couleurs et un en-tête. Surtout, nous apprendrons à lire ce que le navigateur fait de ces lignes, car il ne signale jamais une erreur de CSS : il l'ignore en silence.

1.1 Structure et présentation

Un document HTML dit ce qu'est chaque morceau du contenu : ceci est le titre principal, ceci un paragraphe, ceci une liste de liens de navigation. Il ne dit pas de quelle couleur est le titre, à quelle distance du bord commence le paragraphe ou si la navigation s'affiche en ligne ou en colonne. Ces décisions relèvent de la présentation, et elles sont confiées à un second langage : CSS, Cascading Style Sheets, les feuilles de style en cascade.

Cette séparation a des conséquences très concrètes.

• Un seul fichier pour tout le site. Les six pages de la librairie partageront une feuille style.css. Changer le bleu de la charte, c'est modifier une ligne, pas six pages.
• Plusieurs présentations pour un même contenu. La même page peut s'afficher en mode clair ou sombre, sur un téléphone ou un grand écran, à l'écran ou sur papier, sans qu'une ligne de HTML change.
• Un contenu lisible sans présentation. Un lecteur d'écran, un moteur de recherche ou un navigateur en mode lecture ignorent la feuille de style et lisent la structure. C'est pourquoi le livre HTML insistait tant sur le choix des bonnes balises : HTML ne doit jamais être choisi pour son apparence.

1.2 Anatomie d'une règle

Voici notre première feuille de style, enregistrée dans un fichier style.css.

/* Ma première feuille de style */
body {
  font-family: system-ui, sans-serif;
  color: #222;
  background-color: #faf8f5;
}

h1 {
  color: #1f3a68;
  font-family: Georgia, serif;
}

Elle est reliée à une page minimale par un élément <link> placé dans l'en-tête.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Ma première feuille de style</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>La Librairie du Campus</h1>
  <p>Manuels, essais et romans pour les étudiants du Quartier latin.</p>
  <p>Ouvert du lundi au samedi, de 9 h à 19 h.</p>
</body>
</html>

Le navigateur affiche alors le texte en police système, gris très foncé sur un fond crème, et le titre en bleu nuit avec une police à empattements :

La feuille contient deux règles. Décomposons la seconde.

Ici, le sélecteur h1 désigne tous les titres de premier niveau de la page. La première règle, body, désigne le corps du document : sa police, sa couleur de texte et son fond. Nous verrons au chapitre 3 pourquoi les paragraphes, qui n'ont aucune règle, prennent quand même la police et la couleur du body : c'est l'héritage.