Introduction aux feuilles de styles CSS
CHAPITRE 3
41
La syntaxe de base des CSS
Quelle que soit la version de CSS retenue, une feuille de styles CSS prend toujours la
forme d’une liste de déclarations, écrites dans un langage spécifique et distinct de
HTML. Ainsi, pour appliquer la couleur bleue aux titres principaux du document,
on écrira :
Rien de bien compliqué, n’est-ce pas ?
Les accolades sont précédées d’un sélecteur, qui s’applique ici à la balise. Cette
CHAPITRE 3
41
La syntaxe de base des CSS
Quelle que soit la version de CSS retenue, une feuille de styles CSS prend toujours la
forme d’une liste de déclarations, écrites dans un langage spécifique et distinct de
HTML. Ainsi, pour appliquer la couleur bleue aux titres principaux du document,
on écrira :
Rien de bien compliqué, n’est-ce pas ?
Les accolades sont précédées d’un sélecteur, qui s’applique ici à la balise
. Cette
règle colorera donc toutes les balises contenues dans la page.
Le bloc de déclaration, situé dans les accolades, contient une ou plusieurs déclarations, ces dernières étant constituées de couples « propriété – valeurs ». Cet exemple
ne contient qu’une seule déclaration, associant la valeur blue à la propriété color.
C’est toujours le caractère deux points (:) qui sépare une propriété de sa valeur – rappelons qu’en HTML les attributs sont qualifiés à l’aide d’un signe d’égalité (par
exemple : color="blue").
Pour compléter ce bloc par d’autres déclarations, il suffit de les ajouter à la suite, sans
oublier le séparateur d’instruction : le point-virgule (;). Souvent oublié, ce dernier est
pourtant nécessaire. On assurera la lisibilité du code en réservant une ligne à chaque
déclaration.
Au final, l’ensemble formé par le sélecteur et le bloc de déclaration sera nommé
« règle ». Reprenons la règle ci-dessus en l’enrichissant d’une déclaration alignant les
titres au centre :
Notez la présence du point-virgule, facultatif après la dernière déclaration. Pour ne
pas l’oublier, on le précise systématiquement. Ceci facilite également les copies ou
déplacements de lignes dans la feuille de styles.
Les feuilles de styles peuvent s’écrire indifféremment en majuscules ou en minuscules
(à l’exception de leurs portions non régies par CSS, comme les valeurs des attributs
HTML id et class). Pour éviter toute confusion, on conviendra cependant de tout
écrire en minuscules. Signalons enfin que les sélecteurs ne peuvent commencer ni par
un tiret, ni par un chiffre.
h1 {color: blue}
h1 {
color: blue;
text-align: center;
}
Le bloc de déclaration, situé dans les accolades, contient une ou plusieurs déclarations, ces dernières étant constituées de couples « propriété – valeurs ». Cet exemple
ne contient qu’une seule déclaration, associant la valeur blue à la propriété color.
C’est toujours le caractère deux points (:) qui sépare une propriété de sa valeur – rappelons qu’en HTML les attributs sont qualifiés à l’aide d’un signe d’égalité (par
exemple : color="blue").
Pour compléter ce bloc par d’autres déclarations, il suffit de les ajouter à la suite, sans
oublier le séparateur d’instruction : le point-virgule (;). Souvent oublié, ce dernier est
pourtant nécessaire. On assurera la lisibilité du code en réservant une ligne à chaque
déclaration.
Au final, l’ensemble formé par le sélecteur et le bloc de déclaration sera nommé
« règle ». Reprenons la règle ci-dessus en l’enrichissant d’une déclaration alignant les
titres au centre :
Notez la présence du point-virgule, facultatif après la dernière déclaration. Pour ne
pas l’oublier, on le précise systématiquement. Ceci facilite également les copies ou
déplacements de lignes dans la feuille de styles.
Les feuilles de styles peuvent s’écrire indifféremment en majuscules ou en minuscules
(à l’exception de leurs portions non régies par CSS, comme les valeurs des attributs
HTML id et class). Pour éviter toute confusion, on conviendra cependant de tout
écrire en minuscules. Signalons enfin que les sélecteurs ne peuvent commencer ni par
un tiret, ni par un chiffre.
h1 {color: blue}
h1 {
color: blue;
text-align: center;
}