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 :

Elle devient :

Ou, comme la mention de la balise est facultative,

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.

Un exemple ?

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

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

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 :

Et pour l'appeler :

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

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.