Corso di CSS completo in italiano

Benvenuto nel corso di CSS più completo in italiano. CSS (Cascading Style Sheets, fogli di stile a cascata) è il linguaggio che definisce l'aspetto delle pagine web: colori, font, spaziature, posizionamento, animazioni e layout responsive.

In questo corso trovi tutti gli argomenti del CSS spiegati passo passo, dalle basi fino alle tecniche avanzate come Flexbox, le pseudo-classi e le funzioni matematiche. Ogni capitolo ha esempi reali col codice colorato e un editor “Provalo tu” per scrivere e vedere subito il risultato nel browser.

💡 HTML, CSS e JavaScript: l'HTML è la struttura, il CSS è l'aspetto e JavaScript è il comportamento. Padroneggiare il CSS è indispensabile per chiunque voglia creare siti web professionali.

Esempio

Introduzione al CSS

Il CSS nasce nel 1996 per separare il contenuto (HTML) dalla presentazione (stile). Prima del CSS, l'aspetto veniva definito direttamente nell'HTML, rendendo le pagine difficili da mantenere.

Con il CSS puoi controllare colori, dimensioni, font, spaziature, posizioni e animazioni di tutti gli elementi, e modificare l'intero sito cambiando un solo file. È uno standard del W3C supportato da tutti i browser.

Manutenzione facile: un foglio di stile per tutto il sito.
Pagine più leggere e veloci.
Design responsive: stili diversi per telefono, tablet e desktop.

La sintassi del CSS

Una regola CSS è composta da un selettore e da un blocco di dichiarazioni racchiuse tra parentesi graffe. Ogni dichiarazione è una coppia proprietà: valore; e termina con il punto e virgola.

Esempio: h1 { color: blue; font-size: 32px; } applica a tutti gli <h1> il colore blu e la dimensione 32px.

Esempio

I selettori CSS

I selettori indicano a quali elementi applicare lo stile. I principali:

Selettore di elemento: p (tutti i paragrafi)
Selettore di classe: .nome (elementi con class="nome")
Selettore di id: #nome (l'unico elemento con quell'id)
Selettore universale: * (tutti gli elementi)
Selettore di gruppo: h1, h2, p (più selettori insieme)

Esempio

Come inserire il CSS

Esistono tre modi per applicare il CSS a una pagina:

CSS inline: con l'attributo style nel singolo tag (da usare poco).
CSS interno: dentro <style> nell'<head>, vale per quella pagina.
CSS esterno: in un file .css collegato con <link> — è il metodo migliore, perché vale per tutto il sito.

Se più stili sono in conflitto vince quello più specifico e, a parità, l'ultimo dichiarato (la “cascata”).

Esempio

I commenti CSS

I commenti spiegano il codice e vengono ignorati dal browser. In CSS si scrivono tra /* e */ e possono occupare più righe. Sono utili per organizzare fogli di stile lunghi.

Esempio

Errori comuni nel CSS

Conoscere gli errori più frequenti fa risparmiare ore di debug:

Punto e virgola mancante dopo una dichiarazione.
Parentesi graffa non chiusa.
Nome di proprietà o valore errato (es. colour invece di color).
Unità di misura dimenticata (es. width: 100 invece di 100px).
Selettore sbagliato (punto per le classi, cancelletto per gli id).

⭐ Usa gli strumenti per sviluppatori del browser (tasto F12) per individuare le regole CSS non applicate.

I colori in CSS

I colori si indicano in diversi formati: per nome (red), in esadecimale (#ff0000), in RGB (rgb(255,0,0)), in RGBA con trasparenza, o in HSL (tonalità, saturazione, luminosità).

Si applicano con color (testo) e background-color (sfondo).

Esempio

Gli sfondi (background)

Le proprietà dello sfondo: background-color (colore), background-image (immagine), background-repeat (ripetizione), background-position (posizione), background-size (dimensione, es. cover). Si possono riassumere nella scorciatoia background.

Si possono usare anche gradienti con linear-gradient() o radial-gradient().

Esempio

I bordi (border)

Il bordo si definisce con border indicando spessore, stile e colore: border: 2px solid #333;. Stili comuni: solid, dashed, dotted. Con border-radius si arrotondano gli angoli; con valori alti si ottengono cerchi.

Esempio

I margini (margin)

Il margine è lo spazio esterno all'elemento, che lo distanzia dagli altri. Si imposta con margin (tutti i lati) o per singolo lato (margin-top, -right, -bottom, -left). Con margin: 0 auto; si centra orizzontalmente un blocco di larghezza definita.

Esempio

Il padding

Il padding è lo spazio interno tra il bordo e il contenuto. Si imposta come il margine: padding: 20px; o per singolo lato. Più padding rende un elemento più “arioso” e leggibile.

💡 Margin vs Padding: il margin spinge fuori (verso gli altri), il padding spinge dentro (allarga la scatola attorno al contenuto).

Esempio

Altezza e larghezza

Le proprietà width e height impostano dimensioni. Si possono usare pixel (px), percentuali (%) o unità relative alla finestra (vw, vh). Con min-width/max-width e min-height/max-height si impostano limiti.

Esempio

Il box model

Ogni elemento HTML è una scatola formata da quattro strati, dall'interno verso l'esterno: content (contenuto), padding (spazio interno), border (bordo) e margin (spazio esterno). Capire il box model è fondamentale per controllare gli spazi.

Con box-sizing: border-box; la larghezza include padding e bordo, rendendo i calcoli più semplici (è una pratica molto diffusa).

Esempio

Il contorno (outline)

L'outline è una linea tracciata fuori dal bordo, che non occupa spazio e non sposta gli altri elementi. È molto usato per evidenziare l'elemento attivo (focus), importante per l'accessibilità da tastiera.

Esempio

Formattare il testo

Proprietà principali del testo: color, text-align (allineamento), text-decoration (sottolineatura), text-transform (maiuscole/minuscole), line-height (interlinea), letter-spacing (spaziatura tra lettere), text-indent (rientro).

Esempio

I font

Con font-family scegli il carattere (sempre con alternative di riserva), con font-size la dimensione, con font-weight lo spessore (es. bold), con font-style il corsivo. Puoi importare font esterni come Google Fonts.

Esempio

Le icone

Le icone si aggiungono con librerie come Font Awesome o Google Material Icons (richiamate via <link>), oppure usando direttamente le emoji Unicode, che non richiedono librerie esterne e si stilizzano come testo.

Esempio

Lo stile dei link

I link possono cambiare aspetto nei loro stati: :link (non visitato), :visited (visitato), :hover (mouse sopra), :active (mentre si clicca). Spesso si tolgono la sottolineatura con text-decoration: none e si aggiunge un effetto al passaggio del mouse.

Esempio

Le liste

Con il CSS controlli l'aspetto delle liste: list-style-type cambia il segno (disco, cerchio, quadrato, numeri), list-style: none li rimuove (utile per i menu di navigazione), list-style-position ne imposta la posizione.

Esempio

Le tabelle

Le tabelle si rendono leggibili con border-collapse: collapse (unisce i bordi), padding nelle celle, colori alternati per le righe (:nth-child(even)) e uno sfondo per l'intestazione.

Esempio

La proprietà display

display determina come un elemento viene reso. Valori principali: block (occupa tutta la riga), inline (resta in riga), inline-block (in riga ma con dimensioni), none (nasconde l'elemento), flex e grid (per i layout).

Esempio

Max-width

max-width imposta la larghezza massima di un elemento: può restringersi su schermi piccoli ma non supera il valore indicato. Combinato con margin: 0 auto è il modo classico per creare un contenitore centrato e responsive.

Esempio

Il posizionamento (position)

La proprietà position controlla come un elemento viene posizionato:

static: predefinito, nel flusso normale.
relative: spostato rispetto alla sua posizione originale.
absolute: posizionato rispetto al primo antenato posizionato.
fixed: fisso rispetto alla finestra (resta visibile allo scroll).
sticky: si “incolla” quando raggiunge un bordo durante lo scroll.

Esempio

Gli offset di posizione

Insieme a position si usano le proprietà di offset top, right, bottom e left per spostare l'elemento dai rispettivi bordi. Con position: relative spostano rispetto alla posizione originale; con absolute/fixed rispetto al riferimento.

Esempio

Z-index (sovrapposizione)

Quando gli elementi si sovrappongono, z-index decide quale sta davanti: valori più alti stanno sopra. Funziona solo su elementi posizionati (relative, absolute, fixed, sticky).

Esempio

Overflow (contenuto in eccesso)

overflow gestisce il contenuto che esce da un elemento di dimensioni fisse: visible (predefinito, esce), hidden (taglia), scroll (sempre barre di scorrimento), auto (barre solo se servono).

Esempio

Float (testo attorno)

float fa “galleggiare” un elemento a sinistra o a destra, con il testo che gli scorre attorno (storicamente usato per i layout). Con clear si impedisce ad altri elementi di affiancarsi.

💡 Per i layout moderni oggi si preferiscono Flexbox e Grid; il float resta utile per far scorrere il testo attorno a un'immagine.

Esempio

Inline-block

display: inline-block unisce i vantaggi di inline (gli elementi stanno in riga) e block (si possono impostare larghezza, altezza, padding e margini). Utile per creare pulsanti o caselle affiancate.

Esempio

Allineare gli elementi

Per centrare: il testo con text-align: center; un blocco con margin: 0 auto; in verticale e orizzontale con Flexbox usando justify-content e align-items.

Esempio

I combinatori

I combinatori selezionano elementi in base alla loro relazione:

Discendente div p: tutti i p dentro un div.
Figlio div > p: solo i figli diretti.
Fratello adiacente h2 + p: il p subito dopo un h2.
Fratelli generici h2 ~ p: tutti i p fratelli successivi.

Esempio

Le pseudo-classi

Le pseudo-classi applicano stili in base allo stato o alla posizione di un elemento, usando i due punti: :hover (mouse sopra), :focus (in focus), :first-child, :last-child, :nth-child(n) (ennesimo figlio), :checked (per checkbox/radio).

Esempio

Gli pseudo-elementi

Gli pseudo-elementi (con doppio due punti) stilizzano una parte specifica: ::first-line (prima riga), ::first-letter (prima lettera), ::before e ::after (inseriscono contenuto prima/dopo), ::selection (testo selezionato).

Esempio

Opacità e trasparenza

opacity imposta la trasparenza da 0 (invisibile) a 1 (opaco). In alternativa, per rendere trasparente solo lo sfondo (e non il testo) si usa un colore rgba().

Esempio

Le barre di navigazione

Una barra di navigazione si costruisce da una lista (<ul>) togliendo i puntini e mettendo le voci in orizzontale con Flexbox o inline-block. È il menu tipico di ogni sito.

Esempio

I menu a tendina

Un menu a tendina mostra altre voci al passaggio del mouse, usando un contenitore con position: relative e un sottomenu position: absolute nascosto con display: none e mostrato con :hover.

Esempio

Galleria di immagini

Una galleria si crea disponendo più immagini in griglia con Flexbox o Grid, aggiungendo bordo, padding e un effetto al passaggio del mouse. È perfetta per portfolio e cataloghi.

Esempio

Gli image sprites

Uno sprite è un'unica immagine che contiene più icone. Con background-position si mostra solo la porzione desiderata. Vantaggio: una sola richiesta al server invece di tante, quindi pagine più veloci.

💡 Tecnica storica molto usata per le icone; oggi spesso sostituita da font di icone o SVG, ma ancora utile da conoscere.

Selettori di attributo

Si possono selezionare elementi in base ai loro attributi: [type="text"] (valore esatto), [href^="https"] (inizia con), [href$=".pdf"] (finisce con), [class*="col"] (contiene). Molto utili per i form e i link.

Esempio

Lo stile dei form

Con il CSS si rendono eleganti caselle, aree di testo e pulsanti: padding, bordi arrotondati, colore al focus. Form curati aumentano l'usabilità e la fiducia degli utenti.

Esempio

I contatori

I contatori numerano automaticamente gli elementi con counter-reset (inizializza), counter-increment (incrementa) e content: counter(nome). Utili per numerare sezioni o capitoli in modo dinamico.

Esempio

Le unità di misura

Le unità si dividono in assolute (px) e relative:

px: pixel, misura fissa.
%: percentuale rispetto al genitore.
em: relativo al font dell'elemento.
rem: relativo al font radice (html).
vw/vh: percentuale della larghezza/altezza della finestra.

⭐ Usa rem per i font e le spaziature: rende il sito più coerente e accessibile.

Esempio

L'ereditarietà

Alcune proprietà (come color, font-family, font-size) si ereditano: impostandole sul genitore, valgono anche per i figli. Altre (come border o margin) no. Con il valore inherit puoi forzare l'ereditarietà.

Esempio

La specificità

Quando più regole colpiscono lo stesso elemento, vince quella con specificità maggiore. In ordine crescente: selettore di elemento < classe < id < stile inline. A parità di specificità vince l'ultima regola scritta.

Esempio

La regola !important

!important forza una dichiarazione a prevalere su tutte le altre, ignorando la specificità. È potente ma va usato con parsimonia: ne abusa rende il CSS difficile da gestire e da correggere.

Esempio

Le funzioni matematiche

Il CSS include funzioni matematiche: calc() esegue calcoli mescolando unità diverse (es. calc(100% - 40px)); min() e max() scelgono il valore minimo/massimo; clamp() imposta un valore fluido tra un minimo e un massimo (ideale per font responsive).

Esempio

Ottimizzazione del CSS

Un CSS ottimizzato rende il sito più veloce e facile da mantenere:

Usa un file esterno unico e minificato (senza spazi e commenti) in produzione.
Sfrutta le variabili CSS (--colore) per non ripetere i valori.
Evita selettori troppo complessi e regole duplicate.
Raggruppa le regole simili e riusa le classi.

Esempio

L'accessibilità

Un sito accessibile è usabile da tutti, comprese le persone con disabilità. Buone pratiche CSS:

Garantisci un contrasto sufficiente tra testo e sfondo.
Non rimuovere l'outline dal focus senza un'alternativa visibile.
Usa unità relative (rem) per rispettare le impostazioni dell'utente.
Non comunicare informazioni solo con il colore.

♿ L'accessibilità è una competenza fondamentale e sempre più richiesta: rende il web migliore per tutti.

Il layout di un sito web

Un sito tipico ha: header (testata), nav (menu), main con eventuale aside (barra laterale) e footer. Oggi questi blocchi si dispongono con Flexbox e CSS Grid, che gestiscono righe e colonne in modo semplice e responsive.

Esempio

CSS Bordi arrotondati (border-radius)

La proprietà border-radius arrotonda gli angoli di un elemento. Con valori alti crei pulsanti a pillola; con 50% ottieni un cerchio perfetto.

Esempio

CSS Immagini nei bordi (border-image)

Con border-image puoi usare un'immagine come bordo di un elemento, utile per cornici decorative.

.cornice {
  border: 20px solid transparent;
  border-image: url(bordo.png) 30 round;
}

💡 I tre valori chiave sono: source (l'immagine), slice (come tagliarla) e repeat (stretch, repeat o round).

CSS Sfondi avanzati

Le proprietà background-* permettono di controllare immagini di sfondo multiple, posizione, ripetizione e dimensione. La scorciatoia background le riunisce tutte.

Esempio

⭐ Sovrapporre un gradiente scuro sull'immagine è il trucco classico per rendere il testo sempre leggibile.

CSS Colori avanzati (HSL, RGBA)

Oltre a nomi ed esadecimali, CSS supporta rgb(), rgba() (con trasparenza) e hsl() (tonalità, saturazione, luminosità), molto comodo per creare varianti di uno stesso colore.

Notazione	Esempio
Esadecimale	`#4f46e5`
RGB	`rgb(79, 70, 229)`
RGBA	`rgba(79, 70, 229, .5)`
HSL	`hsl(244, 76%, 59%)`

CSS Gradienti (linear, radial, conic)

I gradienti CSS creano transizioni morbide tra due o più colori, senza usare immagini. I tre tipi sono linear-gradient, radial-gradient e conic-gradient.

Esempio

CSS Ombre (box-shadow e text-shadow)

Le ombre danno profondità: box-shadow per gli elementi e text-shadow per il testo. I valori sono: spostamento X, Y, sfocatura, espansione e colore.

Esempio

CSS Effetti sul testo

Proprietà come text-overflow, word-wrap, writing-mode e -webkit-background-clip permettono effetti tipografici avanzati, come il testo con gradiente.

Esempio

CSS Web Font (@font-face e Google Fonts)

Puoi usare font personalizzati con la regola @font-face o collegando Google Fonts nell'HTML. Questo corso, ad esempio, usa i font Inter e Poppins.

/* nel CSS */
@font-face {
  font-family: 'MioFont';
  src: url('miofont.woff2') format('woff2');
}
body { font-family: 'MioFont', sans-serif; }

💡 Il modo più semplice è incollare il <link> di Google Fonts nel <head> e poi usare font-family nel CSS.

CSS Trasformazioni 2D

La proprietà transform sposta, ruota, scala e inclina gli elementi sul piano: translate(), rotate(), scale(), skew().

Esempio

CSS Trasformazioni 3D

Con rotateX(), rotateY() e la proprietà perspective puoi ruotare gli elementi nello spazio tridimensionale.

Esempio

CSS Transizioni

Le transizioni CSS animano in modo fluido il passaggio di una proprietà da un valore a un altro (ad esempio al passaggio del mouse). Si controllano con transition.

Esempio

⭐ Regola d'oro: metti la transition sullo stato normale, non su :hover, così l'animazione è fluida sia all'entrata che all'uscita.

CSS Animazioni (@keyframes)

Le animazioni CSS permettono movimenti ripetuti e complessi definendo i fotogrammi con @keyframes e applicandoli con animation.

Esempio

CSS Tooltip

Un tooltip è un fumetto informativo che appare al passaggio del mouse. Si realizza con un elemento nascosto reso visibile in :hover.

Esempio

CSS Stile delle immagini

Con il CSS puoi rendere le immagini rotonde, aggiungere bordi e ombre, creare miniature e immagini responsive che non escono dal contenitore.

img { max-width: 100%; height: auto; }      /* responsive */
.avatar { border-radius: 50%; }              /* rotonda */
.thumb { border: 3px solid #ddd; padding: 4px; border-radius: 8px; }

CSS object-fit e object-position

La proprietà object-fit controlla come un'immagine riempie il suo contenitore senza deformarsi: cover riempie ritagliando, contain mostra tutta l'immagine.

img {
  width: 200px; height: 200px;
  object-fit: cover;        /* riempie senza deformare */
  object-position: center;
}

CSS Masking

Il masking nasconde parti di un elemento usando un'immagine o un gradiente come maschera, per creare forme e sfumature.

.img {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

💡 Le zone nere della maschera mostrano l'elemento, quelle trasparenti lo nascondono.

CSS Pulsanti

I pulsanti CSS si creano applicando padding, colore di sfondo, bordi arrotondati ed effetti :hover a un <button> o a un link.

Esempio

CSS Paginazione

La paginazione mostra i numeri di pagina (1, 2, 3…) di un elenco lungo. Si costruisce con una lista di link stilizzati.

.pagina a {
  padding: 8px 14px; text-decoration: none; color: #333;
  border: 1px solid #ddd; border-radius: 6px;
}
.pagina a.attiva { background: #4f46e5; color: #fff; border-color: #4f46e5; }

CSS Colonne multiple

La proprietà column-count dispone il testo su più colonne, come in un giornale.

.testo {
  column-count: 3;
  column-gap: 30px;
}

CSS Variabili (custom properties)

Le variabili CSS (o custom properties) memorizzano valori riutilizzabili: definisci un colore una volta e lo usi ovunque. Si dichiarano in :root e si leggono con var().

Esempio

⭐ Cambiando una sola variabile in :root aggiorni tutto il sito: è la base dei temi chiaro/scuro.

CSS Box Sizing

La proprietà box-sizing: border-box fa sì che padding e bordo siano inclusi nella larghezza dichiarata, evitando calcoli e sorprese nel layout.

* { box-sizing: border-box; }   /* regola consigliata su tutti i progetti */

💡 Senza border-box, un elemento width:200px con padding:20px occupa in realtà 240px. Con border-box resta 200px.

CSS Media Query

Le media query applicano stili diversi in base alla larghezza dello schermo: sono il cuore del responsive design.

Esempio

CSS Flexbox — introduzione

Flexbox è un sistema di layout monodimensionale che dispone gli elementi in riga o in colonna, distribuendo spazio e allineamenti in modo semplice. Si attiva con display: flex sul contenitore.

💡 Flexbox lavora su un asse alla volta (riga oppure colonna). Per layout a griglia su due assi si usa CSS Grid.

CSS Flex Container

Sul contenitore flex agisci con flex-direction (direzione), justify-content (asse principale), align-items (asse trasversale) e flex-wrap (andare a capo).

Esempio

CSS Flex Items

Sui figli agisci con flex-grow (quanto crescono), flex-shrink (quanto si restringono), flex-basis (dimensione base) e order (ordine visuale).

.item     { flex: 1; }       /* tutti gli item occupano lo stesso spazio */
.item.big { flex: 2; }       /* questo occupa il doppio */

CSS Flexbox Responsive

Aggiungendo flex-wrap: wrap e dando una larghezza minima agli item, ottieni un layout che passa automaticamente da più colonne a una sola sui dispositivi piccoli.

.griglia { display:flex; flex-wrap:wrap; gap:16px; }
.griglia .card { flex: 1 1 250px; }   /* min 250px, poi va a capo */

CSS Grid — introduzione

CSS Grid è un sistema di layout bidimensionale: gestisce righe e colonne contemporaneamente, ideale per layout di pagina complessi. Si attiva con display: grid.

CSS Grid Container

Con grid-template-columns definisci le colonne; l'unità fr rappresenta una frazione dello spazio disponibile. gap aggiunge lo spazio tra le celle.

Esempio

CSS Grid Items

Con grid-column e grid-row un elemento può occupare più colonne o righe, ad esempio per un'intestazione a tutta larghezza.

.header { grid-column: 1 / -1; }   /* occupa tutta la riga */
.sidebar { grid-row: span 2; }     /* alta due righe */

⭐ Una griglia responsive senza media query: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

CSS Responsive Web Design (RWD)

Il Responsive Web Design rende un sito leggibile e usabile su qualsiasi schermo — computer, tablet e smartphone — usando layout flessibili, immagini fluide e media query.

CSS Viewport

Il meta tag viewport è indispensabile per il responsive: dice al browser di adattare la pagina alla larghezza del dispositivo. Va sempre nell'<head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS Media Query per il Responsive

I breakpoint più comuni separano smartphone, tablet e desktop. L'approccio mobile-first parte dallo stile per cellulare e aggiunge regole per schermi più grandi.

/* mobile-first: stile base per cellulare */
.col { width: 100%; }
@media (min-width: 768px)  { .col { width: 50%; } }   /* tablet */
@media (min-width: 1024px) { .col { width: 33%; } }   /* desktop */

CSS Immagini Responsive

Per immagini che non escono mai dal contenitore basta la regola d'oro max-width: 100%; height: auto;. Con srcset nell'HTML puoi anche servire immagini di dimensioni diverse per schermi diversi.

img { max-width: 100%; height: auto; display: block; }

CSS Framework

I framework CSS offrono componenti e griglie pronte all'uso per costruire siti responsive più in fretta. I più diffusi sono Bootstrap e Tailwind CSS.

💡 Imparare prima il CSS “puro” è fondamentale: i framework si capiscono e si personalizzano solo se conosci le basi che hai studiato in questo corso.

CSS SASS — introduzione

SASS è un preprocessore CSS: estende il CSS con variabili, annidamento, funzioni e moduli, poi viene “compilato” in normale CSS. Rende i fogli di stile più ordinati e riutilizzabili.

$primario: #4f46e5;          // variabile SASS

.card {
  background: $primario;
  .titolo { color: white; }  // annidamento
}

⭐ Oggi molte funzioni di SASS (come le variabili) esistono anche nel CSS nativo, ma SASS resta utile in progetti grandi.

Esempi CSS pronti da copiare

Il modo migliore per imparare il CSS è partire da esempi già funzionanti: copiali, aprili nell'editor “Provalo tu” e modificali. Ogni esempio di questo corso è anche un piccolo esercizio.

Card con hover

Editor CSS online (Provalo tu)

Su questo corso hai un editor CSS online gratuito integrato. Ogni esempio ha il pulsante “Provalo tu ▶” che apre l'editor a schermo intero, con il codice da una parte e l'anteprima live dall'altra.

Clicca “Provalo tu” su un esempio.
Modifica le regole CSS dentro il blocco <style>.
Premi ▶ Esegui e guarda subito il risultato.

Quiz CSS — metti alla prova le tue conoscenze

Un breve quiz di CSS per autovalutarti. Pensa alla risposta e poi apri la soluzione.

1. Quale proprietà cambia il colore del testo?

✅ color. Attenzione: background-color cambia invece lo sfondo.

2. Come si centra orizzontalmente un blocco con larghezza fissa?

✅ Con margin: 0 auto; (e una width definita).

3. Quale display attiva il layout Flexbox?

✅ display: flex; sul contenitore.

4. Cosa fa box-sizing: border-box?

✅ Include padding e bordo dentro la larghezza dichiarata.

5. Quale selettore ha la specificità più alta tra #id, .classe e p?

✅ #id. L'ordine di forza è: id > classe > elemento.

Esercizi CSS con soluzioni (per principianti)

Questi esercizi di CSS svolti sono pensati per chi vuole fare pratica con esempi reali. Per ognuno c'è la consegna e la soluzione commentata: prova prima da solo, poi confronta. Sono gli stessi esercizi di CSS che assegno ai miei studenti durante le ripetizioni a Roma.

Esercizio 1 — Bottone colorato Base

Crea un pulsante con sfondo blu, testo bianco, angoli arrotondati e padding generoso.

Mostra soluzione

button {
  background: #4f46e5;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
}

Esercizio 2 — Centrare un box Base

Centra un box largo 300px orizzontalmente nella pagina.

Mostra soluzione

.box {
  width: 300px;
  margin: 0 auto;
}

Esercizio 3 — Hover con transizione Medio

Fai cambiare colore a un link in modo fluido quando ci passi sopra il mouse.

Mostra soluzione

a {
  color: #4f46e5;
  transition: color .3s;
}
a:hover {
  color: #f59e0b;
}

Esercizio 4 — Griglia di 3 card Medio

Disponi tre box affiancati e ben distanziati usando Flexbox.

Mostra soluzione

.griglia {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

Esercizio 5 — Layout responsive Avanzato

Crea una griglia di card che mostra 3 colonne su desktop e 1 sola su smartphone, senza media query.

Mostra soluzione

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

⭐ Apri ogni soluzione nell'editor “Provalo tu” e modificala: cambiare i valori è il modo migliore per capire come funziona il CSS.

Sfide CSS — esercizi avanzati senza soluzione

Le sfide CSS sono esercizi più impegnativi, senza soluzione data: l'obiettivo è ragionare e costruire da soli.

🎯 Sfida 1 — Card prodotto

Crea una card prodotto con immagine, titolo, prezzo e pulsante, con ombra e un effetto di sollevamento al passaggio del mouse.

🎯 Sfida 2 — Navbar responsive

Realizza una barra di navigazione orizzontale su desktop che diventa una colonna verticale sotto i 600px usando una media query.

🎯 Sfida 3 — Loader animato

Crea uno spinner di caricamento circolare che gira in continuo usando @keyframes e animation.

Programma del corso CSS (syllabus)

Questo è il programma completo del corso di CSS, l'elenco ordinato degli argomenti dal principiante all'avanzato. È lo stesso syllabus che seguo in classe e nelle ripetizioni.

Basi: sintassi, selettori, come applicare il CSS, commenti.
Aspetto: colori, sfondi, bordi, box model, testo e font.
Layout: display, position, float, Flexbox e Grid.
Avanzato: gradienti, ombre, transizioni, animazioni, trasformazioni, variabili.
Responsive: media query, viewport, immagini fluide, mobile-first.
Pratica: esempi, esercizi, sfide e un layout di pagina completo.

Piano di studio CSS

Quanto ci vuole per imparare il CSS? Le basi si acquisiscono in una settimana. Ecco un piano di studio realistico studiando circa un'ora al giorno.

Giorno	Cosa studiare
1–2	Sintassi, selettori, colori, sfondi, testo
3	Box model, bordi, margini, padding
4	Display, position, Flexbox
5	CSS Grid e layout di pagina
6	Transizioni, animazioni, variabili
7	Responsive design, esercizi e sfide

Preparazione al colloquio — domande CSS frequenti

Le domande di CSS più frequenti ai colloqui per ruoli web (front-end). Utili anche per le interrogazioni a scuola.

Cos'è il box model?

Il modello a scatola: ogni elemento è composto da contenuto, padding, bordo e margine.

Differenza tra Flexbox e Grid?

Flexbox è monodimensionale (una riga o una colonna), Grid è bidimensionale (righe e colonne insieme).

Come funziona la specificità dei selettori?

Determina quale regola vince in caso di conflitto: id (forte) > classe > elemento (debole). !important ha la precedenza ma va evitato.

Differenza tra position relative, absolute e fixed?

relative: spostato rispetto a sé stesso; absolute: rispetto al genitore posizionato; fixed: rispetto alla finestra (resta fisso allo scroll).

Bootcamp CSS — percorso intensivo

Un bootcamp CSS condensa la teoria nella pratica continua. Se vuoi imparare velocemente, alterna ogni argomento con un esercizio immediato:

✅ Studia un argomento (max 20 minuti).
✅ Riproduci l'esempio nell'editor “Provalo tu”.
✅ Svolgi un esercizio collegato senza guardare la soluzione.
✅ Ripeti con l'argomento successivo.

💡 Vuoi un bootcamp CSS seguito di persona a Roma? Con le ripetizioni in presenza costruiamo insieme un percorso su misura, dalla prima regola al sito responsive completo.

Riepilogo CSS — i concetti chiave

Un riepilogo veloce di CSS da ripassare prima di una verifica o un colloquio:

📌 Il CSS definisce l'aspetto (colori, posizioni, dimensioni) delle pagine HTML.
📌 Una regola è fatta da selettore + proprietà: valore.
📌 Il box model (contenuto, padding, bordo, margine) governa lo spazio.
📌 Flexbox e Grid sono i sistemi moderni di layout.
📌 Le media query rendono il sito responsive.
📌 Le variabili e transition/animation portano il sito a livello professionale.

Riferimento — Selettori CSS

I selettori CSS indicano a quali elementi applicare una regola.

Selettore	Seleziona
`p`	Tutti i paragrafi
`.classe`	Elementi con quella classe
`#id`	L'elemento con quell'id
`*`	Tutti gli elementi
`a, p`	Più elementi insieme (gruppo)

Riferimento — Combinatori CSS

Combinatore	Significato
`div p`	Discendente: ogni p dentro un div
`div > p`	Figlio diretto
`div + p`	Fratello immediatamente successivo
`div ~ p`	Tutti i fratelli successivi

Riferimento — Pseudo-classi

Pseudo-classe	Quando si applica
`:hover`	Al passaggio del mouse
`:focus`	Quando l'elemento ha il focus
`:first-child`	Primo figlio
`:nth-child(2)`	Il figlio in posizione data
`:checked`	Checkbox/radio selezionato

Riferimento — Pseudo-elementi

Pseudo-elemento	Cosa stila
`::before`	Contenuto inserito prima
`::after`	Contenuto inserito dopo
`::first-line`	La prima riga di testo
`::placeholder`	Il testo segnaposto di un input
`::selection`	Il testo selezionato dall'utente

Riferimento — At-rules (@)

At-rule	Uso
`@media`	Stili condizionati allo schermo (responsive)
`@import`	Importa un altro foglio di stile
`@font-face`	Definisce un font personalizzato
`@keyframes`	Definisce i fotogrammi di un'animazione

Riferimento — Funzioni CSS

Funzione	A cosa serve
`var()`	Usa una variabile CSS
`calc()`	Calcoli tra unità diverse (es. `100% - 20px`)
`clamp()`	Valore fluido tra un minimo e un massimo
`min()` / `max()`	Il valore minore/maggiore tra quelli dati

Riferimento — Web Safe Fonts

I web safe font sono installati su quasi tutti i dispositivi, quindi si vedono sempre. Si usano come fallback dopo i font personalizzati.

Famiglia	Esempi
Sans-serif	Arial, Helvetica, Verdana
Serif	Times New Roman, Georgia
Monospace	Courier New, Consolas

Riferimento — Proprietà animabili

Non tutte le proprietà si possono animare in modo fluido. Le più performanti da animare sono transform e opacity.

Proprietà	Animabile
`opacity`	✅ Sì (consigliata)
`transform`	✅ Sì (consigliata)
`color`, `background`	✅ Sì
`display`	❌ No

Riferimento — Unità di misura CSS

Unità	Tipo
`px`	Assoluta (pixel)
`%`	Relativa al contenitore
`em`	Relativa al font dell'elemento
`rem`	Relativa al font radice
`vw` / `vh`	% della larghezza/altezza della finestra

Riferimento — Convertitore PX ↔ EM

Conversione tra px ed em con dimensione di riferimento 16px. Formula: em = px ÷ 16.

Pixel	EM (base 16px)
8px	0.5em
16px	1em
24px	1.5em
32px	2em

Riferimento — Colori CSS

Modo	Esempio (viola)
Nome	`indigo`
Esadecimale	`#4f46e5`
RGB	`rgb(79, 70, 229)`
HSL	`hsl(244, 76%, 59%)`

Riferimento — Valori predefiniti

Ogni proprietà CSS ha un valore iniziale usato se non lo imposti. La parola chiave initial riporta una proprietà al suo default, inherit la fa ereditare dal genitore.

Proprietà	Valore predefinito
`display`	`inline` (varia per tag)
`color`	ereditato (di solito nero)
`margin` / `padding`	`0` (ma i browser hanno default propri)

Riferimento — Supporto dei browser

Quasi tutte le proprietà CSS moderne (Flexbox, Grid, variabili, transizioni) sono supportate dai browser moderni (Chrome, Firefox, Edge, Safari). Per le funzioni più recenti conviene verificare su Can I Use.

💡 Il prefisso -webkit- serviva per alcune proprietà sperimentali su Chrome/Safari: oggi è raramente necessario.

Certificato CSS

Vuoi una certificazione di CSS da mostrare nel CV? Al termine di questo corso hai le competenze per affrontare i test di certificazione online più diffusi e, soprattutto, per costruire siti web responsive reali.

Se sei un mio studente, posso rilasciarti un attestato di partecipazione al percorso di CSS svolto durante le ripetizioni in presenza a Roma, con l'elenco degli argomenti e dei progetti realizzati.

⭐ Il vero “certificato” è il tuo portfolio: un sito responsive che hai realizzato da solo vale più di qualsiasi attestato.

Conclusione

Complimenti! 🎉 Hai completato il corso di CSS completo e gratuito in italiano: dalla sintassi e i selettori al box model, da Flexbox e Grid alle animazioni, dalle variabili al responsive design, fino a esercizi, sfide, riferimenti e SASS. Ora sai dare stile a qualsiasi pagina web.

Il modo migliore per imparare il CSS è fare pratica ogni giorno: rifai gli esercizi CSS, affronta le sfide e prova a costruire un layout di pagina completo.

E ora?

Il prossimo passo è rendere le tue pagine interattive con JavaScript. Se vuoi un percorso guidato passo passo o aiuto per una verifica, posso seguirti con le ripetizioni di informatica in presenza a Roma.

🎯 La tua sfida finale

Prendi una pagina HTML che hai già scritto e trasformala: scegli una palette di tre colori, usa Flexbox o Grid per il layout e aggiungi una transizione al passaggio del mouse su un bottone.

⚡ Continua con il corso JavaScript 🚀 Esplora gli altri corsi 📅 Prenota una lezione