Adloun

CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 1 · Application directe du cours

Trois fautes de frappe

Premiers pas en CSS · niveau 2

Énoncé

La feuille suivante est liée à une page qui contient un titre <h1> et un paragraphe.


body {
  font-family: system-ui, sans-serif
  color: #222;
}

h1 {
  color: #1f3a68;
  font-size: 40;
}

p {
  colour: #555;
  background-color: #faf8f5;
}
  • Pour <body>, <h1> et <p>, dire quelles déclarations sont appliquées et quelle est, finalement, la couleur du texte du paragraphe.
  • stylelint ne signale qu'un problème ; lequel ? Pourquoi ne voit-il pas les deux autres ?
  • Corriger la feuille.

Corrigé

  • <body> : le point-virgule manque après sans-serif. Le navigateur lit une seule déclaration font-family dont la valeur est system-ui, sans-serif color: #222, invalide : il perd la police et la couleur. Le corps garde la police par défaut et le texte noir.

<h1> : color: #1f3a68 s'applique ; font-size: 40 est ignoré, car une longueur non nulle exige une unité. Le titre est bleu nuit, en 32 pixels (valeur par défaut).

<p> : colour (orthographe anglaise) n'est pas une propriété CSS, ignorée ; background-color s'applique. Le paragraphe est donc en noir sur fond crème.

Vérification dans Chromium (Computed) : corps rgb(0, 0, 0) en Times, titre rgb(31, 58, 104) en 32px, paragraphe rgb(0, 0, 0) sur rgb(250, 248, 245).

  • stylelint s'arrête sur l'erreur de syntaxe :

ex2-fautes.css
  2:37  ✖  Missed semicolon  CssSyntaxError

Une erreur de syntaxe empêche d'analyser le reste du fichier : on corrige, on relance, et il signale alors colour (property-no-unknown). Le nombre sans unité relève de la valeur, que la configuration standard ne contrôle pas.

  • Feuille corrigée :

body {
  font-family: system-ui, sans-serif;
  color: #222;
}

h1 {
  color: #1f3a68;
  font-size: 40px;
}

p {
  color: #555;
  background-color: #faf8f5;
}

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →