Le classi e gli ID
Classi ed ID sono due attributi del codice xHTML, importantissimi per i fogli di stile.
Permettono infatti di associare un’insieme di regole ad un solo selettore (ID) o ad un gruppo (class).
Immaginiamo di voler assegnare a tutti i commenti di un blog il colore grigio ed una grandezza di 10px. Senza l’esistenza di questi due particolari selettori non riusciremmo a farlo con i css, dovremmo usare il tag font (orrore!!!).
Con i CSS ci basta assegnare una classe ai commenti, chiamandola ad esempio "commenti" e dichiare tali proprietà nel css in questo semplice modo:
xHTML: [….]
<p class="commenti">Primo commento</p>
<p class="commenti">Secondo commento</p>
e così via
CSS:
.commenti {color:gray: font-size:10px;}
Notate il puntino (.) prima del nome della classe: serve ad esplicitare che le regole inserite saranno riferite a tutti gli elementi con quella classe esplicita.
E’ importante far notare che la classe così definita si applicherà a qualsiasi elemento della pagina con attributo class="commenti".
Scrivendo quindi questo codice xHTML
<p class="commenti">Commento</p> Bla bla <div class="commenti">Blocco di testo</div>
Anche il contenuto del div sarà stampato con le stesse proprietà stabilite per i commenti. Questo può esser voluto o meno: in tal caso basterebbe assegnare nel css:
p.commenti {proprietà:valori}
affinché le regole della classe commenti vengano applicate solo ai paragrafi (<p>).
Una sorta di classe particolare è l’ID, che si differenzia di base dalla classe per il fatto che è applicabile SOLO ad un elemento è l’ID. In pratica può essere applicato UNIVOCAMENTE ad un solo elemento.
Per definirlo nell’xHTML
<p id="id-numero1">Testo </p>
e nel css
#id-numero1 {proprietà:valore;}
Stesse norme per le classi, con la differenza di dover anteporre in questo caso il cancelletto (#) al posto del punto.