Syntaxe CSS — ses 3 parties et les commentaires CSS

La syntaxe CSS est l'ensemble des règles qui indique au navigateur comment mettre en forme le HTML. Chaque règle CSS suit le même schéma, donc une fois que vous avez compris la structure d'une règle, vous pouvez toutes les lire. Ce chapitre décompose ce schéma en trois parties, présente un exemple concret et explique comment écrire des commentaires.

Si vous débutez avec CSS, lisez d'abord l'introduction à CSS pour voir comment les feuilles de style sont reliées à une page.

Anatomie d'une règle CSS

Une règle CSS (aussi appelée ruleset) est constituée de deux éléments : un sélecteur et un bloc de déclaration. À l'intérieur du bloc de déclaration, chaque déclaration est une paire propriété : valeur.

selector {
  property: value;
}

Dans l'ensemble, une règle se compose de trois éléments à connaître :

Sélecteur — quel(s) élément(s) mettre en forme.
Propriété — quel aspect modifier.
Valeur — le réglage à appliquer.

Sélecteur

Le sélecteur cible l'élément HTML que vous souhaitez mettre en forme. Il peut s'agir de n'importe quelle balise comme <h1> ou <p>, d'une classe ou d'un identifiant. Un seul sélecteur peut contenir une ou plusieurs déclarations. Les sélecteurs constituent un sujet à part entière — consultez les sélecteurs CSS pour la liste complète.

Propriété

La propriété est la caractéristique spécifique que vous souhaitez modifier, comme color, border ou font-size. Chaque propriété accepte un type de valeur particulier, et toute propriété doit être associée à une valeur.

Valeur

La valeur est ce que vous attribuez à la propriété. Par exemple, la valeur de la propriété color peut être un mot-clé comme red ou un code hexadécimal comme #f1f1f1.

Règles de syntaxe à retenir

Un deux-points (:) sépare une propriété de sa valeur.
Un point-virgule (;) termine chaque déclaration et la sépare de la suivante.
L'ensemble du bloc de déclaration est encadré par des accolades ({ }).
CSS ignore les espaces supplémentaires et les sauts de ligne entre les sélecteurs, les propriétés et les valeurs, vous êtes donc libre de formater les règles pour une meilleure lisibilité.

Un sélecteur peut comporter plusieurs déclarations, chacune séparée par un point-virgule :

p {
  color: #1c87c9;
  font-size: 16px;
  line-height: 1.5;
}

Exemple de syntaxe CSS

Exemple de syntaxe CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a>The color of this link is #1c87c9.</a>
  </body>
</html>

Essayez vous-même »

Résultat

Dans l'exemple ci-dessus, la balise <a> est le sélecteur, color est la propriété et #1c87c9 est la valeur. La propriété et sa valeur se trouvent à l'intérieur des accolades, séparées par un deux-points et terminées par un point-virgule.

Commentaires CSS

Les commentaires vous permettent d'ajouter des explications ou des notes à votre feuille de style. Les navigateurs les ignorent, ils n'affectent donc jamais la page. Ils sont utiles pour documenter pourquoi une règle existe, pour étiqueter des sections ou pour désactiver temporairement une déclaration lors du débogage.

Un commentaire CSS commence par /* et se termine par */ :

Exemple de commentaires en CSS

/* This is a comment */

Les commentaires peuvent également s'étendre sur plusieurs lignes, ce qui est pratique pour mettre en commentaire plusieurs déclarations à la fois :

/*
  This whole block is ignored by the browser.
  color: red;
  font-size: 20px;
*/

Notez que les commentaires CSS ne peuvent pas être imbriqués — dès que vous ouvrez /*, le premier */ ferme le commentaire. Retenez également que // n'est pas un commentaire CSS valide ; il fonctionne dans certains préprocesseurs comme Sass, mais pas en CSS pur.

Exemple de commentaires CSS

Exemples de commentaires CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        padding-left: 10px;
        font-size: 26px;
        line-height: 30px;
        /*color:red;*/
      }
      p {
        color: #1c87c9;
        /*font-size:25px;
        border:1px solid red;
        */
        padding: 10px;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>CSS Comments</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>

Essayez vous-même »

Résumé

Une règle CSS est un sélecteur suivi d'un bloc de déclaration entre accolades.
Chaque déclaration est une paire propriété : valeur, terminée par un point-virgule.
Les espaces sont ignorés, formatez donc les règles de la façon la plus lisible.
Les commentaires s'écrivent /* ... */ et peuvent s'étendre sur plusieurs lignes, mais ne peuvent pas être imbriqués.

Ensuite, apprenez à associer ces règles à une page dans styles HTML, puis explorez les sélecteurs CSS pour cibler exactement les éléments souhaités.

Exercice

Pratique

Laquelle des options suivantes décrit la syntaxe CSS correcte ?

Une déclaration CSS se compose d'une propriété et de sa valeur, séparées par un deux-points.Un bloc CSS est délimité par des crochets.Les propriétés et valeurs d'une déclaration CSS sont séparées par un point-virgule.Les rulesets CSS sont constitués d'un sélecteur suivi d'un bloc de déclaration entre accolades.Les rulesets CSS sont constitués d'un sélecteur suivi d'un bloc de déclaration entre parenthèses.