L’attributo class in HTML

L’attributo class viene usato nel codice HTML per personalizzare la grafica delle varie sezioni, testi e immagini di un sito web. Può essere inserito in qualsiasi elemento sia di testo che grafico.

Qualsiasi tag principale usato nel linguaggio HTML per creare sottotitoli, paragrafi e riquadri viene chiamato elemento. Inserendo l’attributo class all’interno dei loro tag di apertura possiamo utilizzare quella classe come selettore nei file CSS.

<div class="blu"> 
 <h2>Questa scritta apparirà in blu</h2>
 <p>Questa scritta apparirà in blu</p>
</div>
<h2>Questa scritta apparirà come testo normale</h2>
<p class="blu">Questa scritta apparirà in blu</p>

Inseriamo il selettore nel file CSS:

.blu {
    color: blue;
}

Abbiamo assegnato la stessa classe a due elementi: div e p. Assegnando l’attributo alt a div, abbiamo fatto in modo che tutti i suoi sotto elementi siano colorati di blu mentre il sottotitolo che non è al suo interno e non ha classi sarà colorato come al solito.

Possiamo anche assegnare a div e a p dei colori diversi anche se hanno la stessa classe. Questa volta useremo due selettori:

div.blu {
    color: cadetblue;
}

p.blu {
    color: blue;
}

Questa volta, stiamo dicendo al browser che soltanto il paragrafo che ha la classe blu deve avere questo colore mentre tutto ciò che si trova all’interno dell’elemento div deve essere colorato in un altro modo.

WordPress, lo strumento più usato per creare siti web, permette di aggiungere le classi ai suoi blocchi. Basta cliccare su Avanzate nella colonna a destra e poi scrivere nel riquadro delle classi un nuovo nome oppure uno già utilizzato.

Si possono aggiungere e personalizzare i selettori su WordPress cliccando su Personalizza, disponibile sul pannello di amministratore o nella barra nera in alto, e poi su CSS aggiuntivo.

Riassumendo, l’attributo class viene inserito manualmente, oppure automaticamente dai software per creare siti web, nel codice HTML per permettere a chi lavora sulla progettazione di un sito di potere modificare facilmente la resa grafica delle singole sezioni. Anche elementi in linea come lo span possono avere delle classi ma è più laborioso farlo e bisogna lavorare sul codice manualmente.