La differenza tra classi ed ID è di fondamentale importanza: mentre con una classe definiamo la stilizzazione di una serie di elementi con caratteristiche comuni, con l’ID si definisce un elemento unico all’interno della pagina.
Se ad esempio volessimo stilizzare una serie di paragrafi useremo un classe:
p.esempio { color:#000000 }Se invece volessimo definire un DIV contenitore della pagina (elemento presente un’unica volta nel codice HTML del nostro documento) useremo:
div#contenitore { width: 800px; height: 1000px }Si noti che, come detto, dovremo inserire un unico elemento di questo tipo:
<div id="contenitore">
...
</div>mentre potremo avere più paragrafi stilizzati con la classe:
<div id="contenitore">
<p class="eselpio">paragrafo n.1</p>
<p class="eselpio">paragrafo n.2</p>
<p class="eselpio">paragrafo n.3</p>
...
</div>E’ importante precisare che, a livello estetico, applicare una data stilizzazione ad una classe piuttosto che ad un ID (e viceversa) non comporta nessuna differenza.
Cosa succede se utilizzo lo stesso ID per più di un elemento della pagina?
Qualora si faccia confusione e si utilizzino gli ID al posto delle classi per stilizzare elementi ripetuti il risultato visivo non cambierebbe: la pagina web apparirebbe esattamente allo stesso modo e non vi sarebbero errori di nessun tipo! Tuttavia il codice della pagina non sarebbe valido da un punto di vista sintattico e potrebbero verificarsi delle anomalie qualora gli ID (impropriamente utilizzati dallo sviluppatore) fossero utilizzati come selettori univoci da qualche codice Javascript incluso nella pagina.
