CSS3 Base – 5.1 – Classi

In questa lezione vi parlo di cosa sono le classi e di come si usano nei CSS.

Abbiamo detto che se creiamo una regola CSS usando un selettore HTML (es: p), tale stile si applica a tutti gli elementi di quel tipo:

Stile per paragrafi
Stile per paragrafi

Lo stile indicato nell’esempio applica un colore blu al testo di tutti i paragrafi della pagina.

Nel caso in cui noi non volessimo assegnare il colore blu a tutti i paragrafi ma solo ad alcuni, dovremmo agire in maniera diversa.

Classi

Potrebbe risultare utile definire una classe, ovvero un’etichetta, per contrassegnare gli elementi HTML che devono avere caratteristiche simili.

In questo caso applicheremo la classe a tutti gli elementi che dovranno avere il testo in blu.

La classe si applica con l’attributo class dentro al tag HTML dell’elemento:

<p class="testoblu">Paragrafo 1</p>

Il valore dell’attributo class sarà il nome della classe, nel nostro caso è testoblu, per ricordarci che gli elementi con tale etichetta avranno il testo colorato di blu.

Oltre ai paragrafi, posso applicare la stessa etichetta ad altri elementi ti tipo testuale, ad esempio intestazioni, liste, ecc.

Nell’esempio vado ad applicare la classe testoblu a due paragrafi e ad una intestazione:

Applicazione della classe
Applicazione della classe

Ora non ci resta che dire al CSS come deve gestire tutti gli elementi di classe testoblu.

Per creare la classe si inserisce nel CSS un selettore formato da un punto seguito dal nome della classe (parola unica senza spazi), inserendo nelle graffe le dichiarazioni di stile:

Creazione della classe
Creazione della classe

Questo è risultato finale, in cui appaiono blu solo gli elementi di classe testoblu:

Esempio
Esempio

Video

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *