Ricordate le bambole di carta? Una sagoma da ritagliare lungo la linea tratteggiata e un foglio pieno di vestiti, ognuno con le sue linguette da piegare dietro le spalle. Con la stessa sagoma potevi fare una persona in cappotto, una in costume da spiaggia, una pronta per un matrimonio.
Quando devo spiegare il CSS a qualcuno che parte da zero, torno sempre a quell’immagine. Perché il CSS funziona esattamente così: c’è una struttura che non cambia, e sopra ci metti i vestiti che vuoi.
La sagoma: l’HTML
L’HTML è la bambola nuda. Dice cosa c’è nella pagina e in che ordine: un titolo, un paragrafo, un’immagine, un pulsante, un modulo da compilare. Non dice niente su come appare.
<article class="card">
<h2>Titolo</h2>
<p>Un paragrafo di testo.</p>
<a href="#">Leggi tutto</a>
</article>Aperto in un browser così com’è, questo codice funziona ma è spoglio: testo nero su fondo bianco, font di sistema, tutto incolonnato. È una sagoma, appunto. E va bene così, perché una buona struttura è proprio quella che regge qualunque vestito.
Il guardaroba: le proprietà
Il CSS è il foglio con i vestiti. Ogni proprietà è un capo, e ogni capo fa una cosa sola. color cambia il colore del testo. background cambia lo sfondo. padding dà respiro dentro l’elemento, margin lo allontana da quelli vicini. border-radius arrotonda gli angoli.
.card {
background: #fdf6ec;
color: #2b2b2b;
font-family: Georgia, serif;
padding: 1.5rem;
border: 1px solid #e0d6c8;
border-radius: 12px;
}Sei righe, e la stessa card di prima diventa un’altra cosa. Nessuna di queste righe richiede di sapere programmare: si leggono quasi come frasi in inglese. È questa la semplicità del CSS. Ogni pezzo si capisce da solo, si prova, si toglie, si rimette, e la struttura sotto non si rompe.
Dove sta la potenza
La potenza arriva quando inizi a combinare i capi. Un paio di proprietà ben scelte cambiano il comportamento di un’intera pagina.
.galleria {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
}Queste tre righe creano una griglia che si adatta da sola: quattro colonne su un monitor largo, due su un tablet, una sullo smartphone. Niente media query, niente JavaScript.
Lo stesso vale per il movimento. Con transition e transform un pulsante si ingrandisce leggermente al passaggio del mouse, una card si solleva, un menu scivola in posizione. Anni fa per ottenere effetti simili serviva una libreria; oggi bastano due righe.
.card {
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
}E poi c’è la cosa che più mi colpisce ancora oggi: lo stesso HTML, con un foglio di stile diverso, diventa un sito completamente diverso. Chi ha visto CSS Zen Garden lo sa. Centinaia di designer hanno vestito la stessa identica pagina, e nessun risultato assomiglia agli altri.
Dove la metafora non basta
Onestamente, le bambole di carta spiegano bene l’inizio, non tutto. Il CSS ha due meccanismi che nessun guardaroba ha.
Il primo è l’ereditarietà. Se dai un font al body, tutti gli elementi dentro lo indossano senza che tu lo ripeta. È come se, vestendo la bambola, anche le tasche e i bottoni prendessero il colore della giacca.
Il secondo è la cascata, quella che dà il nome al linguaggio: quando due regole vogliono vestire lo stesso elemento in modo diverso, il browser decide quale vince in base a specificità e ordine. È la parte che fa arrabbiare molti sviluppatori, ma è anche quella che rende il CSS così espressivo. Capita la cascata, smetti di combatterla e inizi a usarla.
Un vestito alla volta
In tanti team che ho visto, il CSS è la parte che si subisce. Si lascia per ultima, si copia da Stack Overflow, si affida a un framework senza sapere cosa fa sotto. Poi, quando qualcosa non si allinea, si aggiunge un !important e si va avanti.
È un peccato, perché il CSS moderno è uno degli strumenti più potenti che abbiamo, ed è anche uno dei più accessibili. Non serve impararlo tutto insieme. Si parte da color e padding, si passa a display, poi a grid, poi alle transizioni. Un vestito alla volta, come con le bambole di carta.
E voi, qual è la proprietà CSS che vi ha fatto pensare per la prima volta “ah, ma allora si può fare”?
Se volete fare il passo successivo, da pochi giorni è uscito il mio libro CSS Semantico. Scrivere CSS che comunica, scala e dura nel tempo. Parte proprio da qui: dal CSS standard di oggi, senza preprocessori, con nesting, variabili e classi componibili che descrivono cosa è un elemento invece di come appare. Dentro ci sono teoria, esempi commentati e tre progetti guidati, pensati sia per chi sta iniziando sia per chi arriva da anni di Sass. Trovate tutto, compreso un capitolo in anteprima gratuita, su csssemantico.it.
- CSS è il vestito - Novembre 2, 2026
- Ho scritto un libro… - Ottobre 28, 2026
- Assistenti con un PC tutto loro: è iniziata l’era degli agenti che lavorano 24/7 - Ottobre 26, 2026