Le classi e gli ID CSS

Un foglio di stile che consenta al designer di disporre di un'ampia gamma di elementi Html da stilizzare non è completamente fluido e versatile se non ci fosse l'opportunità di poter definire stili diversi per una stessa categoria di elementi Html, ad esempio, il Tag <p> che avrà la sua stilizzazione, non potrà essere utilizzato con un criterio grafico e stilistico diverso in un'altra occorrenza dello stesso in un dato punto della pagina o dl sito.

Mi spiego meglio, se imposto ad un Tag di testo il colore rosso, non potrò utilizzare lo stesso tipo di Tag per un testo che voglio che sia verde, se non scindendo lo stesso Tag in una serie di "sottotag": questo il principio dell'utilizzo delle classi.

Una classe potrebbe dunque definirsi come un sottoinsieme appartenente ad un'unica categoria che può avere caratteristiche diverse da un'altra classe creata come altro sottoinsieme della stessa categoria.

Chiariamo ancora di più le idee con un provvidenziale esempio: supponiamo di voler utilizzare il Tag <p> per definire i testi delle nostre pagine, ma sorge la necessità di utilizzare stili diversi a seconda della porzione di pagina in cui andiamo a scrivere, creiamo dunque due distinte classi come sottoinsiemi di <p>

<style type="text/CSS">
   p.testo_rosso { color: Red; }
   p.testo_verde { color: Green; }
</style>

<p class="testo_rosso">Questo testo è Rosso</p>
<p class="testo_verde">Questo testo è Verde</p>

La sintassi per la creazione di una classe è banale, la forma è "nome Tag - punto - nome classe", ad esempio p.testo_rosso.

Per richiamarla in un Tag Html si utilizza l'attributo class, ad esempio <p class="testo_rosso">.

In questo modo abbiamo creato una classe specifica per il Tag <p>, se dovessimo dunque provare a scrivere <div class="testo_tosso"> non avremo alcuna risposta, essendo quella classe proprietaria di <p>, per ovviare a questo problema possiamo creare delle classi generiche, semplicemente utilizzando la forma "punto - nome classe", ad esempio .testo_rosso.

Ecco un esempio

<style type="text/CSS">
.testo_rosso { color: Red; }
</style>

<p class="testo_rosso">Questo testo è Rosso</p>
<div class="testo_rosso">Anche questo testo è Rosso</div>

Ovviamente richiamare questo stile da un Tag che non utilizza l'attributo color, come nell'esempio, è perfettamente inutile.

Ma non finisce qui! possiamo creare delle classi di tipo id per richiamare lo stile mediante l'utilizzo di un foglio di stile Javascript.

La sintassi è pressochè analoga, utilizziamo il carattere "cancelletto" (#) al posto del punto, vediamo un esempio:

<style type="text/CSS">
   #nomeclasseid { color: Red; }
</style>

<div id="nomeclasseid">Questa è una classe di tipo id</div>

Attenzione: l'utilizzo di quest'altra tecnica è da utilizzarsi con cautela, assegnare lo stesso id ad un Tag vuol dire confondere un eventuale script Javascript che vi si riferisce, essendo l'id in programmazione un identificatore univoco.

Autore: Luca Ruggiero