CSS, ID e classi

L'associazione fra gli elementi del documento html e regole di formattazione avviene mediante l'uso degli attributi id e class. Entrambi vanno quindi assegnati ai tag del documento. Ma quando conviene usare uno oppure l'altro?

L'uso di un attributo piuttosto che l'altro favorisce alcuni scenari che impareremo presto a riconoscere. La definizione di una classe di stile in un CSS avviene facendo seguire al nome della classe un punto (nel documento che descrive il foglio di stile). La descrizione della classe continua poi nel modo già visto quando abbiamo parlato della struttura di una regola.

.testoBianco{color: white;}

Questo selettore viene applicato a tutti i tag dell'HTML (quindi alla classe di tag) che hanno l'attributo class in questo modo: class="testoBianco". Se sono invece interessato a far valere lo stesso selettore a un preciso gruppo di tag posso allora dichiarare nel foglio di stile lo stesso selettore in maniera assai più restrittiva, ad esempio con:

p.testoBianco{color: white;}

dico al browser di applicare il colore bianco al testo degli elementi p che hanno l'attributo class pari a class="testoBianco".

Con gli id, invece, è possibile identificare un solo elemento! In tal caso il nome del selettore è preceduto dal simbolo #, mentre la corrispondenza fra foglio di stile ed elemento avviene attraverso l'attributo id. Ad esempio, con:

#testoBianco{color: white;}

dico al browser di applicare il colore bianco al testo dell'elemento che ha l'attributo id pari a id="testoBianco". Attenzione, l'attributo id può essere usato per identificare univocamente un solo elemento (che deve poi essere unico nella pagina, anche se molti browser non applicano alla lettera questa specifica descritta dal W3C!). Pertanto, se una proprietà si applica a un solo elemento è preferibile usare l'attributo id, se la stessa deve invece valere per più elementi va usato l'attributo class.