La syntaxe CSS se compose de 3 parties: un sélecteur, une propriété et une valeur.

selector {
  property: value;
}

Le sélecteur est l'élément HTML que vous voulez styler. Cela peut être n'importe quelle balise telle que <h1>, <p>, etc. Chaque sélecteur peut avoir une ou plusieurs propriétés.

La propriété est l'attribut de style de la balise HTML. Tous les attributs HTML sont convertis en propriétés CSS (color, border, etc.). Chaque propriété a sa valeur.

La valeur est assigné à la propriété. Par exemple, la propriété color peut avoir soit red ou #F1F1F1 etc.

Voyons un exemple.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      a {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a>La couleur du lien est #1c87c9.</a>
  </body>
</html>

Le résultat sera:

La couleur de ce lien est #1c87c9.

Dans l'exemple ci-dessus, la balise <a> est un sélecteur, color est propriété, et #1c87c9 est la valeur de cette propriété.

Comme vous pouvez le voyer, la propriété et sa valeur sont écrites dans les accolades et séparées avec deux-points.

Le sélecteur aussi peut avoir plus qu'une propriété , séparé par semi-colôn.

Commentaires CSS

Les commentaires CSS sont utilisés pour écrire des explications au code. Ils ne sont pas affichés car les navigateurs les ignorent.

Le commentaire CSS commence par "/*", et se termine par "*/", comme ça:

/*C'est quelque commentaire*/

Comme vous le voyez, nous avons écrit notre texte dans "/*" et "*/", qui ne sont pas affichés sur le navigateur. Alors lorsque vous ne voulez pas montrer quelque information dans votre CSS, vous les écrivez entre "/*" et "*/".

Essayez-vous-mêmes.

Pratiquez vos connaissances

Quels éléments de syntaxe sont essentiels pour créer une règle CSS selon w3docs?
Trouvez-vous cela utile?