Class et ID

Identification d’un élément avec class

Comment donner à un titre particulier une autre couleur que celle des autres titres du site Web ? Comment regrouper les liens en différentes catégories et donner à chacune un style spécial ? Solution: Le regroupement d’éléments dans une classe.
Exp :

<p>Pays africains:</p>
 <ul> 
<li><a href="ma.htm">Maroc</a></li> 
<li><a href="al.htm">Algérie</a></li>
<li><a href="tu.htm">Tunisie</a></li>
 </ul> 
<p>Pays européens:</p>
 <ul> 
<li><a href="fr.htm">France</a></li>
 <li><a href="es.htm">Espagne</a></li> 
<li><a href="it.htm">Italie</a></li> 
</ul> 

Nous voulons ensuite que les liens des pays africains soient jaune, que ceux des pays européens soient rouge, et que les autres liens de la page Web restent bleu.
Nous répartissons ainsi les liens en deux catégories. On assigne une classe à chaque lien avec l’attribut class.
Fichier HTML:

<p>Pays africains:</p>
 <ul> 
<li><a href="ma.htm" class="af">Maroc</a></li> 
<li><a href="al.htm" class="af">Algérie</a></li>
<li><a href="tu.htm" class="af">Tunisie</a></li>
 </ul> 
<p>Pays européens:</p>
 <ul> 
<li><a href="fr.htm" class="eu">France</a></li>
 <li><a href="es.htm" class="eu">Espagne</a></li> 
<li><a href="it.htm" class="eu">Italie</a></li> 
</ul> 

Fichier CSS

a { color: blue; } 
a.af { color: #FFBB00; } 
a.eu { color: #800000; }

Identification d’un élément avec un id

on utilise l’attribut id pour identifier un élément unique parmi plusieurs éléments
On ne peut pas avoir deux éléments avec le même id dans le document.
Exp :

<h1>Chapitre 1</h1>
<h2>Chapitre 1.1</h2>
<h2>Chapitre 1.2</h2>
<h1>Chapitre 2</h1>
<h2>Chapitre 2.1</h2>
<h3>Chapitre 2.1.2</h3>

Il pourrait s’agir des titres d’un document partagé en chapitres ou en paragraphes. On assigne un id à chaque chapitre comme ceci :

<h1 id="c1">Chapitre 1</h1>
<h2 id="c1-1">Chapitre 1.1</h2> 
<h2 id="c1-2">Chapitre 1.2</h2>
<h1 id="c2">Chapitre 2</h1> 
<h2 id="c2-1">Chapitre 2.1</h2>
<h3 id="c2-1-2">Chapitre 2.1.2</h3> 

Le titre du chapitre 1.2 apparaît en rouge:

#c1-2 { color: red; }