Introduzione alle classi CSS

Diamo un tocco di classe alle nostre pagine web con i CSS (Seconda parte).

Vediamo un po’ più in dettaglio come i CSS possono aiutarci ad
abbellire le nostre pagine web.

Per le prove possiamo usare il file della parte precedente, style.css
e aggiungere le nuove regole.

Una classe CSS è un gruppo di regole che potremo applicare ad un oggetto della nostra pagina, ad esempio lo sfondo di una tabella, il pulsante di una form, lo sfondo dell’intera pagina…

Questo ci permetterà di dare lo stesso ‘layout’ a tutta la nostra pagina web senza fatica.

Per creare una classe aggiungeremo una linea al nostro file di testo in
questo modo:

.nuovaclasse {color: blue}

Abbiamo appena creato la classe ‘nuovaclasse’ ed abbiamo deciso che
qualsiasi elemento appartenente a questa classe usera’ il colore blu
per il testo al suo interno.

Aggiungiamo un pulsante con testo blu alla nostra form:

<INPUT type='button' value='Pulsante con CSS' class='nuovaclasse'>

Associamo ad un testo il colore blu:

<div class='nuovaclasse'>Ciao, prova testo in blu</div>

oppure usando il TAG <span>

<span class='nuovaclasse'>Ciao, prova testo in blu</span>

Ciao, prova testo in blu

Vediamo ora come applicare il concetto di classe al foglio di stile
della scorsa lezione
(http://yepa.com/yps/themes/Yepa/style/style.css):

L'originale:


a {text-decoration: none}
a:hover {color: #ff0000 ; text-decoration: none}

...e la versione associata a una classe:
a.nuovaclasse {text-decoration: none}
a:hover.nuovaclasse {color: #ff0000 ; text-decoration: none}

in questo modo abbiamo associato alla classe 'nuovaclasse' il cambiamento del colore dei link al passaggio del mouse...