On peut utiliser indifféremment les attributs id et class pour appliquer des styles CSS aux éléments d'une page.
- une id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page
- une classe peut caractériser plusieurs objets (identiques ou non)
Par exemple, il est possible d'avoir ce code :
<div class="colonne"></div>
<div class="colonne"></div>
En effet, l'id ne doit désigner qu'un seul objet du document. On peut bien sûr définir autant d'id que l'on veut dans la feuille de style, mais il faut qu'ils soient uniques dans la page html.
Dans la feuille de style CSS, on écrira les règles avec la syntaxe #nom_id pour les id et .nom_de_classe pour les class.
#nom_id{ --- }
.nom_de_classe{ --- }
Utilisez les id en priorité lorsque vous le pouvez et les class lorsque vous ne pouvez pas faire autrement.
Une balise HTML peut posséder un id et une/ou plusieurs class mais pas l'inverse. On peut ainsi cibler une balise particulière au sein d'un ensemble d'éléments possédant la même classe.
commencez à utiliser id systématiquement pour les objets unique pour faciliter la lecture du code. Donnez un id à votre body (pour ancre), à votre bloc en-tête, votre bloc gauche, droit, la navigation...
<body id="haut">
<a href="#haut">aller en haut</a>