L’idée de cascade décrivait à l’origine une structure modulaire, où on pourrait avoir par exemple un fichier CSS global pour tout un site web, complémenté par des styles individuels par page.

On ne fait plus trop ça aujourd’hui, et le sens de « cascade » a évolué.

Blocs

Un fichier CSS est composé de blocs, qui décrivent des règles de formatage et les éléments qu’elles concernent. Leur structure est la suivante :

Sélecteurs

Un bloc commence par un ou plusieurs sélecteurs séparés par des virgules, qui décrivent les éléments auxquels la règle s’appliquent : ici tous les éléments <p> :

p

En plus de cibler certains types d’éléments, on peut également cibler les éléments à partir de la valeur de leur attribut class :

.sender-column

ou de leur attribut id :

#head-div

Règles

Le reste du bloc, qui est compris entre deux accolades { et } se compose de règles, chacune sous la forme suivante

propriété: valeur;

Les deux points séparent le nom de la propriété et la valeur qu’on lui donne et le point-virgule ; indique la fin de la règle.

Les accolades et les points virgules sont hérités du langage C

Un bloc peut contenir autant de règles que vous le voulez.

Les propriétés disponibles et leurs valeurs possibles sont fixées par le navigateur qui lit le CSS pour formater un document HTML. Comme d’habitude en web, la règle est l’indulgence : si le navigateur voit une propriété ou une valeur qu’il ne sait pas interpréter, il l’ignore simplement.

Pour des listes exhaustives :

• Le standard proposé par le W3C, plus formel.
• La référence MDN sur CSS, plus complète.

La convention est d’indenter les lignes de règles avec un alinéa de deux espaces et de ne mettre qu’une règle par ligne, mais le langage ne tient pas compte des espaces en général, ainsi

h1 {font-size: 1.1em;line-spacing: 20px;}

et

h1 {
  font-size: 1.1em;
  line-spacing: 20px;
}

sont équivalents, mais on préfère la deuxième solution, par souci de lisibilité.