{"id":9147,"date":"2026-05-12T07:27:03","date_gmt":"2026-05-12T07:27:03","guid":{"rendered":"\/it\/tutorial\/?p=9147"},"modified":"2026-05-12T07:27:05","modified_gmt":"2026-05-12T07:27:05","slug":"classe-css","status":"publish","type":"post","link":"\/it\/tutorial\/classe-css\/","title":{"rendered":"Che cos\u2019\u00e8 una classe CSS? Una guida completa all\u2019uso del selettore CSS"},"content":{"rendered":"

Una classe CSS è un attributo usato in HTML per selezionare e applicare uno stile a elementi specifici<\/strong>. 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.<\/p>

Segui questi passaggi per usare una classe CSS per definire lo stile del tuo sito:<\/p>

    \n
  1. Apri il tuo foglio di stile CSS<\/strong>. È il file (come style.css<\/strong>) in cui scriverai le regole di stile.<\/li>\n\n\n\n
  2. Definisci la classe CSS<\/strong>. Crea una “regola” dando alla tua classe un nome, come .my-class<\/strong>, e definendone le proprietà, come color: blue;<\/strong>.<\/li>\n\n\n\n
  3. Apri il tuo documento HTML<\/strong>. È il file (come index.html<\/strong>) che contiene il contenuto a cui vuoi applicare lo stile.<\/li>\n\n\n\n
  4. Trova l’elemento HTML a cui applicare lo stile<\/strong>. Individua l’elemento che vuoi modificare, come un paragrafo <p><\/strong> o una divisione <div><\/strong>.<\/li>\n\n\n\n
  5. Assegna la classe CSS all’elemento HTML<\/strong>. Aggiungi l’attributo class=”my-class”<\/strong> al tag di apertura dell’elemento per collegarlo alla regola di stile che hai definito.<\/li>\n<\/ol>

    \n\n\n\n\n\n\n<\/p>

    Come funziona una classe CSS?<\/h2>

    Una classe Cascading Style Sheets (CSS) funziona creando una “etichetta” riutilizzabile che collega la tua struttura HyperText Markup Language (HTML) alle tue regole CSS<\/strong>.<\/p>

    Quando assegni una classe a un elemento HTML<\/a>, stai dicendo al browser di trovare la definizione di stile per quella classe nel foglio di stile e applicarla a quello specifico elemento.<\/p>

    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”).<\/p>

    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<\/strong> nel tuo CSS.<\/p>

    Poi, aggiungi semplicemente class=”alert”<\/strong> 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<\/strong> e tutte e cinque le caselle si aggiorneranno automaticamente.<\/p>

    Come usare una classe CSS per applicare uno stile a un elemento HTML?<\/h2>

    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. <\/strong>Poi apri il tuo file HTML, trova l’elemento a cui vuoi applicare lo stile e applica la classe CSS a quell’elemento.<\/p>

    1. Apri il tuo foglio di stile CSS<\/h3>

    Per prima cosa, ti serve un posto dove scrivere le tue regole CSS. Hai due opzioni:<\/p>