Feuilles de style
Les classes et les ID

HomeUpDown

Notion de classes

Mais on désire parfois affecter des styles différents à une même balise. Pas de problèmes, les feuilles de style vous proposent la solution des classes [class].

La syntaxe est ici aussi des plus simple.

La définition d'un style était :

balise { propriété de style: valeur }

Elle devient :

balise.nom_de_classe { propriété de style: valeur }
remarquez le point entre balise et nom_de_classe

Ou, comme la mention de la balise est facultative,

.nom_de_classe { propriété de style: valeur }

Attention! L'emploi du point (.) devant le nom de classe est indispensable.

Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise.

<balise class="nom_de-classe"> .... </balise>

Un exemple ?

Je souhaite mettre ce qui est essentiel dans le texte en gras et en bleu. Je crée la classe .essentiel :

.essentiel { font-weight: bold; font-color: #000080 }

Et dans le document Html, il suffit d'appeler la classe .important quand cela se révèle nécessaire :

<P class=".essentiel"> ... blabla ... </P>
<H1 class=".essentiel">Titre 1</H1>
<TABLE><TR><TD class=".essentiel">cellule</TD></TD>...

Notion des ID

Comme le convention nom/point/nom est utilisée aussi en Javascript (voir Apprendre le Javascript du même auteur), il a fallu trouver une autre convention d'écriture lorsqu'on désire utiliser les feuilles de style avec du Javascript. Ce sont les ID, aussi appelés les identifiants.
Les ID fonctionnent exactement comme les classes. Pas mieux, pas plus. C'est la même chose!

La syntaxe est :

#nom_de_ID { propriété de style: valeur }

Et pour l'appeler :

<balise id="nom_de_ID"> .... </balise>

Notons qu'on ne pourra effectuer qu'un seul appel à #nom_de_ID par page. Ainsi,

Pour #essentiel{ ... }
<P id=essentiel> est correct.
Mais si on rencontre dans la même page
<H1 id=essentiel> ce n'est plus correct !

Si vous pensez utiliser des feuilles de style, mais sans vous compliquer la vie avec des scripts, oubliez au plus vite ID et utilisez exclusivement les classes.

Si par contre vous souhaitez utiliser des scripts avec les feuilles de style pour faire du DHTML par exemple (voir plus loin dans le site), la notion de ID vous sera alors indispensable.

HomeDown