Partiamo dall’inizio. In (X)HTML esistono due attributi fondamentali applicabili a tutti gli elementi: sono, appunto, class e id. Questi selettori hanno la stessa funzione, con la marginale differenza che gli ID si possono richiamare, all’interno della pagina, una sola volta, invece le classi possono essere richiamate sempre in tutta la pagina. Passiamo adesso ad eseminare uno per uno questi selettori.

Le classi

Per definire una classe si usa far precedere il nome da un semplice punto:

.nome_della_classe_scelto{ Regole della classe }

Esiste un secondo tipo di sintassi:

<elemento>.nome_della_classe{}

Esso è più restrittivo rispetto alla sintassi generica. Se infatti definiamo questa regola:

p.testorosso {color: red;}

lo stile verrà applicato solo ai paragrafi che presentino l’attributo class=”testorosso”. Anche qui è importante stabilire un minimo di strategia. Il secondo tipo di sintassi va usato solo se pensate di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece ritenete di doverla applicare a tipi diversi usate la sintassi generica.

Vediamo un esempio completo di classe:

.testo_nero_10px{
 font-family : Verdana,Arial,Helvetica;
 color : #000000;
 font-size : 10pt;
 text-align : left;
 }

Nell’esempio abbiamo dichiarato una classe che si chiama: .testo_nero_10px.
Questa classe contiene i seguenti parametri:

• Dichiarazione del carattere da utilizzare: font-family : Verdana,Arial,Helvetica;
• Dichiarazione del colore del testo: color : #000000;
• Dichiarazione della grandezza del testo: font-size : 10pt;
• Dichiarazione dell’allineamento del testo: text-align :left;

Adesso per utilizzare la classe, basterà scrivere all’interno del tag, al quale vogliamo apporre lo stile, l’attributo class=”testo_nero_10px”.

<p class=”testo_nero_10px”>…</p>

Possiamo utilizzare questa classe tutte le volte che vogliamo e soprattutto in tutti i tag che vogliamo.

Gli ID o etichette

Abbiamo già detto, che gli ID differenziano dalle classi per la caratteristica di poter essere utilizzati sono una volta ll’interno del documento. Questa caratteristica deli ID li rendono particolarmente adatti nell’utilizzo di elementi che riguardano l’architettura del sito solitamente utilizzati con i tag <div> e i <table>.

Un selettore ID o identificatore, infatti, altro non è che una etichetta di un contenitore di codice. Fondamentalmente una o piu caratteristiche CSS  vengono applicate ad un selettore. La parola parla da sé: si tratta di una semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifico stile.
Vediamo rapidamente come si definisce un ID:

#titolo {color: blue;}

assegniamo il colore blue all’elemento che presenti questa definizione:

<h1 id=”titolo”>…</h1>

Come per le classi è possibile usare una sintassi con elemento:

p#titolo

In realtà questa modalità è assolutamente superflua. Se l’id è univoco non abbiamo alcun bisogno di distinguere l’elemento cui verrà applicata. Inoltre: la sintassi generica si rivela più razionale e utile.

Se si dichiara un ID semplice è possibile assegnarlo a qualunque tipo di elemento. Posso usarlo su un paragrafo, ma se poi cambio idea posso passare tranquillamente ad un div senza dover modificare il foglio di stile.
Usando la seconda sintassi, invece, sono costretto a rispettare l’elemento definito nel selettore.