4.3 Syntaxe CSS

/* Une règle CSS */
selector{property: value;} - sélecteur{propriété:valeur;}

Vous pouvez le lire comme :

who{what: how;} - qui{quoi:comment;}<br>

CSS est un processus en 3 parties:

• le sélecteur – selector définit qui – who est ciblé, quel (s) élément (s) HTML
• la propriété – property définit ce quelle caractéristique – what à modifier
• la valeur –  value définit comment – how modifier cette caractéristique

Ce bloc entier (sélecteur / propriété / valeur) est une règle CSS.

Exemple rapide

Supposons que vous souhaitiez changer la couleur de tous vos blockquotes.

<blockquote>Quelquechose quelquechose quelquechose</blockquote>

Concentrez-vous sur le nom de la balise (et oubliez les crochets < > et le texte). Dans notre cas, il ne reste que «blockquote». Il existe une relation directe entre le nom de la balise et le sélecteur.

Utilisons cela dans notre CSS comme sélecteur, et appliquons un certain style :

blockquote{background: lightgreen;}

Intéressant. Mais à présent, la couleur du texte ne correspond pas vraiment à la couleur de fond. Améliorons cela :

blockquote{
  background: lightgreen;
  color: darkgreen;
}

Donc 2 choses se sont passées :

• nous avons ajouté une deuxième paire propriété / valeur, tout en ne conservant qu’un seul sélecteur: vous pouvez définir autant de propriétés que vous le souhaitez pour n’importe quel jeu de sélecteurs.
• nous plaçons chaque paire propriété / valeur sur sa propre ligne: comme en HTML, les espaces ne sont pas importants. Les caractères spéciaux {} : et ; sont importants. Par conséquent, vous pouvez formater votre CSS à votre guise, pour le rendre plus lisible, tant que sa syntaxe reste valide.

La balise HTML <blockquote> est un élément de bloc. Il a une contrepartie en ligne : <q>. Comme ils servent tous les deux le même but (mais dans des contextes différents), nous aimerions les définir de manière identique. Nous pourrions copier-coller la règle CSS et changer le sélecteur, mais il y a, comme vous vous en doutez, un moyen plus rapide :

q,
blockquote{
  background: lightgreen;
  color: darkgreen;
}

Nous avons maintenant 2 sélecteurs et 2 propriétés. Nous avons donc un ensemble de sélecteurs et un ensemble de propriétés (avec leurs valeurs respectives).

Nous pouvons avoir plusieurs sélecteurs, plusieurs propriétés et parfois (mais rarement) plusieurs valeurs.

Commentaires

Comme en HTML, il peut être utile d’écrire des commentaires CSS :

/* Ceci est un commentaire CSS */
q,
blockquote{
  background: lightgreen;
  color: darkgreen;
}
/*
Les commentaires ne sont lus que par des humains
et ne sont pas analysés par l'ordinateur.
*/