Uso delle classi

L'uso delle classi è davvero una delle basi dei CSS. Sono uno strumento estremamente potente e flessibile. Gli esempi mostrano i vari modi con cui è possibile dichiararle in un foglio di stile.

Primo esempio

Iniziamo da un semplice paragrafo senza classe.

Codice:

p {
color : Black;
}

Questo è un paragrafo generico: il testo è nero

Secondo esempio

Qui abbiniamo una classe ad un elemento.

Codice:

p.classe1 {
color : Red;
}

Significa che solo i pargrafi con la classe "classe1" saranno rossi: questo no perchè non presenta l'attributo.

Questo paragrafo ha come classe ".classe1". Il testo è rosso.

Questo è un tag <h3> al quale abbiamo assegnato la classe "classe1". Il testo sarà sempre nero, perchè la regola fa riferimento solo ai paragrafi con attributo class="classe1".

Terzo esempio

Dichiariamo una classe generica.

Codice:

.classe2 {
color: Blue;
}

A questo titolo abbiamo applicato ".classe2"

Tutti gli elementi con ".classe2" hanno il testo blue.

Quarto esempio

Applicazione di classi multiple.

Codice:

p.classe3.classe4 {
color: green;
}

Questo paragrafo dovrebbe essere verde perchè ha come valori di class "classe3 classe4".