CSS, le standard qui nous occupe pour l'instant, est constitué de règles et de feuilles de styles. Ces dernières sont un ensemble de règles, appliquées à une (des) pages(s) HTML...

Mais qu'est ce qu'une règle ?

Une règle est constituée de 2 parties, le sélecteur et la déclaration. Le sélecteur spécifie quel élément (toute balise HTML convient) est affecté par la déclaration.

La déclaration est la partie de la règle qui décrit l'effet produit. Dans l'exemple ci-dessous, on demande à ce que tout texte relié à une balise de type <H1> apparaisse en rouge.

Comment gérer efficacement les règles ?

Regrouper

Pour gagner de la place, et donc du temps de chargement, vous pouvez grouper les sélecteurs. Ainsi:

H1,H2 { font-style : bold }

Il est aussi possible de grouper les déclarations relatives à un même sélecteur:

H1 {
color : blue;
text-align : center
}

Les classes

Il est possible de créer des classes de sélecteur. Ainsi, on peut imaginer le schéma suivant:

code.langage { color : #FFFF3C }
code.commentaire { font-style : italic }

L'exemple ci-dessus s'utilise dans la code HTML de la façon suivante :

<CODE CLASS = "langage">

La norme CSS permet aussi de créer des classes génériques, non-associées à un élément particulier:

.indente { text-indent : 4 em }

La classe indente pourra alors être utilisée en complément de toute balise HTML.

 

auteur: xavier GERBEAUD
dernière m.a.j. : 10 septembre 1997