Che cos’è una classe CSS? Una guida completa all’uso del selettore CSS
May 12, 2026
/
Michela Z.
/
6 min di lettura
Una classe CSS è un attributo usato in HTML per selezionare e applicare uno stile a elementi specifici. Ti permette di applicare contemporaneamente lo stesso insieme di regole di stile, come colore, dimensione del font o spaziatura, a più elementi nello stesso momento, invece di codificarli singolarmente.
Segui questi passaggi per usare una classe CSS per definire lo stile del tuo sito:
- Apri il tuo foglio di stile CSS. È il file (come style.css) in cui scriverai le regole di stile.
- Definisci la classe CSS. Crea una “regola” dando alla tua classe un nome, come .my-class, e definendone le proprietà, come color: blue;.
- Apri il tuo documento HTML. È il file (come index.html) che contiene il contenuto a cui vuoi applicare lo stile.
- Trova l’elemento HTML a cui applicare lo stile. Individua l’elemento che vuoi modificare, come un paragrafo <p> o una divisione <div>.
- Assegna la classe CSS all’elemento HTML. Aggiungi l’attributo class=”my-class” al tag di apertura dell’elemento per collegarlo alla regola di stile che hai definito.
Come funziona una classe CSS?
Una classe Cascading Style Sheets (CSS) funziona creando una “etichetta” riutilizzabile che collega la tua struttura HyperText Markup Language (HTML) alle tue regole CSS.
Quando assegni una classe a un elemento HTML, stai dicendo al browser di trovare la definizione di stile per quella classe nel foglio di stile e applicarla a quello specifico elemento.
Questo crea una netta separazione delle responsabilità. Il tuo file HTML gestisce il contenuto (il “cosa”), mentre il foglio di stile gestisce la presentazione (il “come appare”).
Per esempio, immagina di avere cinque riquadri di “avviso” sul tuo sito web che hanno tutti bisogno di un bordo rosso e di testo in grassetto. Invece di assegnare uno stile a ogni riquadro singolarmente, puoi creare un’unica classe chiamata .alert nel tuo CSS.
Poi, aggiungi semplicemente class=”alert” a ciascuna delle cinque caselle nel tuo HTML. Se in seguito decidi di cambiare il bordo in blu, ti basta apportare la modifica una sola volta nella definizione della classe .alert e tutte e cinque le caselle si aggiorneranno automaticamente.
Come usare una classe CSS per applicare uno stile a un elemento HTML?
Per applicare uno stile a un elemento HTML usando una classe CSS, apri il tuo foglio di stile CSS e definisci le regole di stile. Poi apri il tuo file HTML, trova l’elemento a cui vuoi applicare lo stile e applica la classe CSS a quell’elemento.
1. Apri il tuo foglio di stile CSS
Per prima cosa, ti serve un posto dove scrivere le tue regole CSS. Hai due opzioni:
- CSS interno. Puoi inserire le regole CSS direttamente nel documento HTML all’interno dei tag, che in genere si trovano nella sezione . Questo è rapido per i piccoli progetti o per i test, ma può rendere il tuo file HTML disordinato.
- Foglio di stile esterno. Questo è il metodo consigliato per la maggior parte dei progetti. Crea un file separato con estensione .css, ad esempio style.css. In questo modo i tuoi stili restano organizzati e separati dai contenuti.
Poi colleghi questo file al tuo documento HTML aggiungendo un tag all’interno della sezione:
<head> <link rel="stylesheet" href="style.css"> </head>
Per il resto di questo tutorial, daremo per scontato che tu stia usando un file style.css esterno.
2. Definisci la classe CSS
Nel tuo file style.css, definisci una classe digitando un punto (.) seguito da un nome a tua scelta. Questo nome è il selettore. Poi aggiungi le parentesi graffe {} e inserisci al loro interno le proprietà CSS (le regole).
.highlight {
font-weight: bold;
color: green;
background-color: #f0f0f0;
}Questo codice crea una classe chiamata highlight. Qualsiasi elemento HTML a cui viene assegnata questa classe avrà il testo in grassetto e verde, con uno sfondo grigio chiaro.
Puoi anche creare selettori più specifici. Per esempio, per applicare uno stile solo agli elementi che si trovano all’interno di un elemento con la classe highlight, scrivi:
.highlight h1 {
/* This rule only applies to h1 tags inside .highlight */
color: red;
}3. Apri il tuo documento HTML
Ora apri il file HTML (per esempio, index.html) che contiene il contenuto a cui vuoi applicare lo stile. Puoi farlo con qualsiasi editor di testo, come VS Code, oppure direttamente tramite il file manager del tuo fornitore di hosting.
I clienti del web hosting gestito di Hostinger possono accedere al file manager tramite hPanel → Siti web → Gestisci → File manager. Poi individua il file HTML e fai doppio click per aprire l’editor di codice.
4. Trova l’elemento HTML da personalizzare
Esamina il tuo codice HTML e individua l’elemento o gli elementi a cui vuoi applicare uno stile. Per esempio, potresti avere diversi paragrafi (<p>) che fungono da avvisi, oppure potresti voler applicare uno stile a un <div> specifico che contiene la biografia dell’autore.
Pensa a quali elementi condividono uno scopo comune o lo stesso tipo di contenuto. Per esempio, tutti i tag <h2> potrebbero condividere una classe, mentre tutti i pulsanti di call to action potrebbero condividerne un’altra. Raggruppare gli elementi in modo logico è fondamentale per usare le classi in modo efficace.
💡 Suggerimento
Per controllare la struttura del codice del tuo sito nel front-end, usa lo strumento di ispezione degli elementi del tuo browser web. Puoi accedervi facendo click con il tasto destro sullo schermo e selezionando Ispeziona.
5. Assegna la classe CSS all’elemento HTML
Per applicare la tua regola CSS, aggiungi l’attributo class al tag di apertura dell’elemento HTML. Il valore dell’attributo deve essere il nome della classe che hai definito nel tuo file CSS, ma senza il punto.
Usa la classe .highlight e applicala a un paragrafo:
<p class="highlight">This paragraph will be bold, green, and have a gray background.</p>
Puoi applicare questa classe a tutti gli elementi che vuoi:
<div class="highlight">This whole division gets the style.</div> <p>This is a normal paragraph.</p> <p class="highlight">This paragraph also gets the style.</p>
Dopo aver salvato sia il file HTML sia il file CSS, apri il file HTML nel browser. Vedrai gli stili applicati agli elementi a cui hai assegnato la classe.
Vantaggi dell’utilizzo delle classi CSS
L’utilizzo delle classi CSS offre diversi vantaggi significativi nello sviluppo web, soprattutto in termini di efficienza, organizzazione e facilità di manutenzione.
- Riutilizzabilità. Questo è il vantaggio più grande. Puoi definire una regola di stile una sola volta, ad esempio .button-primary, e applicare quella classe a ogni pulsante principale del tuo sito web. In questo modo eviti di scrivere codice ripetitivo per ogni pulsante.
- Facilità di manutenzione. Quando hai bisogno di aggiornare il design del tuo sito, le classi semplificano tutto. Per cambiare il colore di tutti i tuoi pulsanti primari, ti basta modificare una sola volta la definizione della classe .button-primary nel tuo file CSS. La modifica si applicherà automaticamente a ogni elemento che utilizza quella classe.
- Organizzazione e leggibilità. Le classi aiutano a separare il contenuto (HTML) dalla presentazione (CSS). Questa “separazione delle responsabilità” rende il tuo codice più pulito, più semantico e molto più facile da leggere, capire e correggere per te o per altri sviluppatori.
- Flessibilità. Un elemento HTML può avere più classi. Per esempio, <button class=”button button-primary”> potrebbe ereditare gli stili di base da .button e gli stili specifici del colore da .button-primary. Questo approccio flessibile e modulare ti permette di creare design complessi combinando classi semplici.
Consigli per padroneggiare le classi CSS
Padroneggiare le classi CSS significa andare oltre il semplice farle funzionare e applicare le best practice per scrivere codice pulito, scalabile e facile da mantenere. Di seguito trovi alcuni consigli per scrivere CSS in modo professionale.
Usa nomi chiari e descrittivi
Il nome di una classe deve descrivere la natura dell’elemento o il motivo per cui viene applicato uno stile, non il modo in cui viene applicato. Per esempio, un nome come .alert-danger è più descrittivo e riutilizzabile rispetto a .red-text-bold.
Se in seguito decidi di rendere blu gli avvisi di pericolo, il nome .alert-danger continua ad avere senso, ma .red-text-bold creerebbe confusione. Usa nomi chiari e logici che descrivano lo scopo del componente.
Sfrutta altri selettori CSS
Le classi non sono l’unico modo per selezionare gli elementi. Capire gli altri selettori ti aiuta a scrivere CSS più efficiente.
- Selettore ID. Un ID (#my-id) è simile a una classe, ma deve essere univoco per un singolo elemento nella pagina. È più specifico di una classe, quindi le sue regole hanno sempre la precedenza se c’è un conflitto.
- Selettore di elementi. Puoi applicare uno stile a tutti gli elementi di un determinato tipo, come p o h2. È l’ideale per impostare stili di base, come una dimensione del carattere predefinita per tutti i paragrafi.
- Combinatori. Puoi combinare i selettori per essere più specifico. Per esempio, .sidebar p seleziona solo i paragrafi che si trovano all’interno di un elemento con la classe sidebar.
Riduci al minimo le proprietà all’interno di una classe
Crea classi piccole e riutilizzabili che facciano bene una sola cosa. Per esempio, invece di un’unica classe grande come .page-sidebar-box che definisce layout, colore e font, potresti creare più classi: .box (per il layout), .sidebar-theme (per il colore) e .featured-text (per il font).
Puoi poi combinarle nel tuo HTML: <div class=”box sidebar-theme featured-text”>. Questo approccio modulare è altamente riutilizzabile e facile da mantenere.
Organizza le classi CSS in gruppi
Man mano che il file style.css cresce, può diventare difficile da gestire. Organizza le tue classi raggruppandole con commenti.
Per esempio, puoi creare sezioni per “Layout”, “Pulsanti”, “Moduli” e “Tipografia”. Questo rende molto più facile trovare e modificare i tuoi stili in seguito.
/* --- Button Styles --- */
.button {
/* base button styles */
padding: 10px 15px;
border-radius: 5px;
}
.button-primary {
/* primary button styles */
background-color: blue;
color: white;
}
/* --- Form Styles --- */
.form-input {
/* input styles */
border: 1px solid #ccc;
padding: 8px;
}Passaggio successivo nel tuo percorso di apprendimento dei CSS
Dopo aver acquisito padronanza dei fondamenti delle classi CSS, i passaggi successivi del tuo percorso di apprendimento dovrebbero concentrarsi sul design responsive e sulle tecniche di layout avanzate. Gli utenti visualizzeranno il tuo sito da telefoni, tablet e computer desktop, quindi adattare i tuoi stili è fondamentale.
Una parte fondamentale di questo è capire i breakpoint CSS, che ti permettono di applicare stili diversi in base alle dimensioni dello schermo dell’utente. Questa è la chiave per far sì che il tuo sito web abbia un aspetto impeccabile su qualsiasi dispositivo.
Man mano che continui a realizzare progetti più complessi, è utile avere una guida di riferimento. Aggiungi ai preferiti il nostro cheat sheet CSS per consultare rapidamente proprietà, selettori e sintassi.
Tutti i contenuti dei tutorial presenti su questo sito web sono soggetti ai rigorosi standard editoriali e ai valori di Hostinger.
Michela si focalizza sul condividere le sue conoscenze di hosting e marketing digitale e sull'aiutare le aziende ad avere successo online, con un particolare interesse per la creazione di siti web e di e-commerce. Nel suo tempo libero le piace sedersi davanti un buon libro e ascoltare musica. Seguila su LinkedIn.
