Les classes sont destinées à être utilisées plusieurs fois dans le document HTML qui sera mis en forme alors que les ID ne doivent en principe être utilisés qu'une seule fois dans chaque page HTML. Pour définir une classe CSS, on ajoute un point devant son nom. Pour définir une ID, on ajoute un dièse devant son nom. A titre d'exemple :
On utilisera une classe pour définir un style de paragraphe.
On utilisera une ID pour définir la position d'un bloc particulier dans la page.
Les ID sont également pratiques pour l'utilisation de certaines fonctions des langages Javascript et Flash pour lesquels ils remplacent peu à peu l'attribut "name". On appelle dorénavant les objets et calques avec getElementById, ce qui facilite la compatibilité entre tous les navigateurs. Ajoutons enfin que l'ID peut servir d'ancre de navigation : le code <a href="#nom_du_style">Voir le bloc</a> permet de naviguer jusqu'au bloc ayant l'ID "nom_du_style".
|
|
Définition CSS |
Utilisation HTML |
Application |
Classe |
.nom_du_style |
<balise class="nom_du_style"> |
Une seule classe peut être appliquée à plusieurs blocs dans la même page. |
ID |
#nom_du_style |
<balise id="nom_du_style"> |
Un ID s'applique à un objet unique : il ne doit pas y avoir deux mêmes ID dans une page |