Une fiche de lecture — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 1)

Une fiche de lecture

Premiers pas en CSS · niveau 2

Énoncé

Le club de lecture de la librairie publie des fiches comme celle-ci.


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Fiche de lecture — Le Petit Prince</title>
  <link rel="stylesheet" href="ex10-fiche.css">
</head>
<body>
  <h1>Le Petit Prince</h1>
  <p>Antoine de Saint-Exupéry, 1943.</p>
  <h2>Résumé</h2>
  <p>Un aviateur tombé en panne dans le désert rencontre un petit garçon venu d’une autre planète.</p>
  <h2>Citation</h2>
  <blockquote>
    <p>« On ne voit bien qu’avec le cœur. L’essentiel est invisible pour les yeux. »</p>
  </blockquote>
  <footer>
    <p>Fiche rédigée par le club de lecture de la librairie.</p>
  </footer>
</body>
</html>

Écrire sa feuille de style : charte de la librairie pour le corps et les titres ; citation en Georgia, en italique (font-style: italic), en bleu nuit ; pied de page en gris #555 et en texte un peu plus petit. La feuille doit passer stylelint sans erreur.

Corrigé


/* Fiche de lecture */
body {
  font-family: system-ui, sans-serif;
  color: #222;
  background-color: #faf8f5;
}

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

blockquote {
  font-family: Georgia, serif;
  font-style: italic;
  color: #1f3a68;
}

footer {
  color: #555;
  font-size: 0.9em;
}

La feuille passe stylelint sans erreur. Rendu :