Cours CSS / Syntaxe : sélecteurs, déclarations, commentaires et erreurs

Une règle CSS combine un sélecteur avec des déclarations écrites sous forme de propriété : valeur ; à l'intérieur des accolades. Une syntaxe correcte aide le navigateur à appliquer les styles souhaités, mais une déclaration mal formée peut être ignorée tandis que d'autres déclarations valides continuent de fonctionner.

Lire les parties d'une règle CSS

.notice {
  color: #087f5b;
  padding: 16px;
}

Chaque propriété permet différentes valeurs. Entrez la valeur de couleur dans color et la valeur de longueur dans padding. padding: blue; ne peut pas définir un espacement intérieur même si le mot est correctement orthographié. 16px est écrit avec des chiffres et des unités. Si vous utilisez des espaces comme 16 px, cela ne sera pas lu comme une seule valeur de longueur.

Utilisez des accolades, des deux-points, des points-virgules et des espaces blancs

Les sauts de ligne et l'indentation aident à rendre le code plus facile à lire pour les humains. Les deux règles suivantes s'appliquent de la même manière car elles ont le même sélecteur et la même déclaration. Lorsque vous apprenez pour la première fois, il est plus facile de trouver les symboles manquants si vous divisez les déclarations ligne par ligne. Comment sélectionner un sélecteur en fonction de l'objet à décorer est comparé dans Sélecteurs CSS de base : Type, Classe, ID et Attributs.

.notice { color: #087f5b; padding: 16px; }

.notice {
  color: #087f5b;
  padding: 16px;
}

Bien que la déclaration finale puisse omettre son point-virgule, l'écrire de manière cohérente rend les ajouts ultérieurs plus sûrs. Les espaces dans le sélecteur peuvent changer le sens : .notice.urgent correspond à un élément avec les deux classes, tandis que .notice .urgent correspond à un élément de classe urgent descendant d’un élément de classe notice. Supprimer cet espace change le sélecteur. Voir MDN : Introduction.

Regroupez les sélecteurs et écrivez des commentaires

h1, h2 {
  color: #087f5b;
}

/* Apply the background and border only to the notice. */
.notice {
  background-color: #e9f7ef;
  border: 1px solid #087f5b;
}

Une virgule relie plusieurs sélecteurs au même bloc de déclaration. h1, h2 sélectionne respectivement h1 et h2, et h1 h2 est un autre sélecteur qui trouve h2 à l'intérieur de h1. Une virgule est appropriée pour appliquer la même couleur.

Les commentaires CSS commencent par /* et se terminent par */. Les instructions à l'intérieur des commentaires ne sont pas exécutées dans le style. Ils peuvent être utilisés pour écrire une explication ou pour exclure temporairement une règle, mais si le symbole de fermeture est omis, le code derrière peut être traité comme un commentaire. Dans le CSS classique, le // de JavaScript n'est pas utilisé comme notation de commentaire sur une seule ligne.

Comparer les erreurs de déclaration et les erreurs de sélecteur

Lorsqu'un navigateur rencontre une erreur dans le CSS, il ignore la partie invalide et continue à traiter les règles possibles. Cela ne signifie pas toujours « ignorer une ligne qui est incorrecte ». Les délimiteurs manquants ou les erreurs de sélecteur peuvent avoir un impact important.

.notice {
  color: blue;
  padding: blue;
  background-color: #e9f7ef;
}

Seul padding: blue est invalide ici. S'il n'y a pas d'autres règles, la couleur du texte et la couleur de fond sont appliquées, et le remplissage n'est pas modifié par cette déclaration. Même si la propriété est écrite de manière incorrecte, comme colro, la déclaration ne sera pas reconnue.

.notice {
  color: blue
  background-color: #e9f7ef;
  padding: 16px;
}

Ce bloc manque un point-virgule après la première déclaration. Le navigateur lit blue background-color: #e9f7ef comme la valeur de color, ce qui est invalide. Ni la couleur prévue ni la déclaration de fond prévue ne s'appliquent, mais padding: 16px; s'applique toujours. Ajoutez le point-virgule manquant après blue.

h1, .notice:made-up-state {
  color: blue;
}

Une pseudo-classe inconnue rend cette liste ordinaire de sélecteurs séparée par des virgules invalide, donc la règle ne s'applique pas non plus à h1. Certaines listes de sélecteurs spéciales utilisent une analyse tolérante. Cet exemple ne décrit donc pas le comportement de chaque contexte de liste de sélecteurs. Voir MDN : Gestion des erreurs.

Exécutez l'exemple complet

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1, h2 { color: #087f5b; }
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
      padding: 16px;
      border: 1px solid #087f5b;
    }
    /* Sentence describing operating hours */
    .description { font-size: 18px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <h2>Visitor Information</h2>
  <p class="description">Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Si vous enregistrez tout le code sous index.html et l'ouvrez, h1 et h2 ont la même couleur verte, et la notice a un fond clair, un remplissage de 16px et une bordure de 1px. Les phrases descriptives apparaissent en 18px. font-size est la propriété qui définit la taille de la police, line-height est la hauteur de ligne, et border est la bordure. Ici, elle est utilisée comme propriété auxiliaire pour relier la syntaxe et les résultats.

Trouvez et corrigez les erreurs de syntaxe

Remplacez le bloc .notice dans l'exemple entier par le code ci-dessous. L'objectif est de corriger deux erreurs de syntaxe et de rendre le résultat suivant : « texte bleu, fond vert clair, espacement intérieur de 16px ». Vous pouvez facilement revenir en arrière en copiant le fichier original sous un nom différent avant de le modifier.

.notice {
  colro: blue;
  background-color #e9f7ef;
  padding: 16px;
}

Changez colro en color et ajoutez un deux-points après background-color. Enregistrez et actualisez : la notification devrait avoir un texte bleu, un fond vert clair et un padding de 16px. Le padding était déjà valide, donc un certain espacement peut rester même avant que les erreurs de syntaxe ne soient corrigées.

.notice {
  color: blue;
  background-color: #e9f7ef;
  padding: 16px;
}

Si votre modification ne change pas la page, vérifiez d'abord que vous avez ouvert le bon fichier. Puis Inspectez le CSS avec DevTools : Styles et Computed pour voir quelles valeurs s'appliquent réellement. Distinguez les erreurs de syntaxe, les sélecteurs qui correspondent au mauvais élément, et les conflits entre les règles avant de modifier d'autres valeurs.