Le classi e gli id nei Css

Autore: Luca Ruggiero | Tell a Friend Corso HTML Impara il linguaggio di marcatura per il Web. Corso CSS Web Design ed Accessibilità secondo il W3C!

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>

<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>

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

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