id

Un id c'est un identifiant unique, tout simplement. C'est ce qui permet de reconnaître un endroit donné. Donc, vous ne devriez pas avoir deux fois le même id dans la même page. Si toutefois vous avez deux fois le même id, les deux blocs auront les mêmes attributs.
Le sélecteur id est défini par le signe dièse : #. Ne commencez jamais un id avec un nombre, car il ne fonctionnera pas avec Mozilla/Firefox

Exemple:

#vert {color:green}

Class

Une classe est un ensemble de propriétés qui peuvent être appliquées à différente balise. Disons que vous désirez utiliser du bleu à plusieurs endroits, vous devrez créer une classe bleu avec l'attribut voulu. Exemple :

.bleu {color : #0000FF}

Remarquez qu'il y a un point devant le nom de la classe. Avec cet exemple, on peut faire appel au bleu de la manière suivante dans la page :

<b class="bleu">texte en bleu et gras</b>

<li class="bleu">un élément bleu dans une liste</li>

La classe peut-être utilisée n'importe où et n'importe quand.

Pour utiliser plusieurs une classe à un élément, utiliser l'espace à l'intérieur des guillemets comme séparateur.

<li class="bleu center">un élément bleu dans une liste</li>

Ne commencez jamais le nom d'une classe par un numéro. Les numéros sont mal interprétés par Firefox et Mozilla.

Vous pouvez aussi assigner directement une classe à une balise comme dans l'exemple suivant :

p.right {text-align: right}
p.center {text-align: center}

Dans le code, vous ferez appel de la manière suivante :

<p class="right">Mon paragraphe est aligné à droite</p>
<p class="center">Mon paragraphe est centré</p>

Suivant