CSS Completo — Guida Docente v4

Sintassi & Cascade

Come è strutturata una regola CSS, come si collega all'HTML, e come funziona la cascata

Struttura di una regola CSS

FONDAMENTALE

Ogni regola CSS è composta da: selettore + blocco { } con coppie proprietà: valore; — ogni dichiarazione deve terminare con il punto e virgola. I commenti si scrivono tra /* */.

CSS

RISULTATO

▶ HTML usato in questo esempio

<h1>Titolo principale</h1>
<p>Paragrafo normale di testo.</p>
<p class="speciale">Paragrafo con classe speciale!</p>

🔗 Vedi anche: h1/h2/h3 — Titoli p — Paragrafo Selettori .classe Colori CSS border e padding Cascata & Specificità

Come si collega il CSS all'HTML — 3 metodi

COLLEGAMENTO

1. Foglio esterno (✓ consigliato) — file separato .css collegato con <link> nell'<head>
2. Interno — tag <style> nell'<head>
3. Inline — attributo style="" sul singolo tag. Specificità massima. Da evitare perché difficile da mantenere.

CSS

RISULTATO

▶ HTML con i 3 metodi di collegamento

<!-- METODO 1 — foglio esterno (nell'<head>) -->
<link rel="stylesheet" href="stile.css">

<!-- METODO 2 — stile interno (nell'<head>) -->
<style>
  p { color: red; }
</style>

<!-- METODO 3 — inline (da evitare) -->
<p style="color: tomato; font-size: 16px;">testo</p>

<!-- Nel demo: -->
<p class="esterno">Stile da foglio esterno (simulato)</p>
<p class="interno">Stile interno (<style>)</p>
<p style="color:tomato;font-family:sans-serif;font-size:15px">Stile inline (color:tomato)</p>

🔗 Vedi anche: Specificità (inline vince) Variabili CSS

La Cascata — chi vince quando ci sono conflitti

IMPORTANTE

"CSS" sta per Cascading Style Sheets. In caso di conflitto tra regole vince quella con:

1. !important — sovrascrive tutto (usalo il meno possibile)
2. Specificità più alta — inline > ID > Classe > Tag
3. Ordine nel codice — a parità di specificità vince l'ultima
4. Origine — inline > interno > esterno > browser default

CSS

RISULTATO

▶ HTML usato in questo esempio

<p>Solo tag p → blu</p>
<p class="rosso">Classe .rosso → rosso</p>
<p id="speciale">ID #speciale → verde</p>
<p class="rosso override">!important → viola</p>

🔗 Vedi anche: Specificità dettagliata Selettori #id .classe

Ereditarietà CSS

Quali proprietà si "trasmettono" automaticamente dai genitori ai figli

Proprietà ereditate vs non ereditate

CONCETTO

Alcune proprietà si ereditano automaticamente dai genitori — non servono da riscrivere su ogni elemento.

✓ SI ereditano	✗ NON si ereditano
color, font-family, font-size, font-weight, font-style, line-height, letter-spacing, text-align, text-transform, visibility, cursor, list-style	margin, padding, border, width, height, background, display, position, float, overflow, box-shadow, border-radius

La keyword inherit forza l'ereditarietà anche per proprietà che di default non si ereditano.

CSS

RISULTATO

▶ HTML usato in questo esempio

<p>Testo body — eredita font e colore</p>
<div class="contenitore">
  Contenitore blu (border NON si eredita)
  <p>Figlio → eredita il colore blu</p>
  <span>Anche span eredita il blu</span>
  <div class="figlio-bordo">
    border: inherit → eredita il bordo!
  </div>
</div>
<p class="reset">color:initial → torna al default browser</p>

🔗 Vedi anche: La Cascata font-family, color margin, padding, border

Colori in CSS

Tutti i formati colore: nome, hex, rgb, rgba, hsl, hsla, transparent, currentColor

Tutti i formati del colore a confronto

COLORI

nome — 140 parole chiave: red, blue, tomato, royalblue, goldenrod…
#hex 6 cifre — coppie RR GG BB in esadecimale (00–FF): #ff0000 = rosso puro
#hex 3 cifre — versione breve quando ogni coppia è uguale: #f00 = #ff0000
rgb(r,g,b) — valori 0–255 per rosso, verde, blu
rgba(r,g,b,a) — come rgb + alpha 0–1 (trasparenza)
hsl(h,s%,l%) — Hue 0–360°, Saturazione %, Luminosità %. Intuitivo per variare tonalità
hsla(h,s%,l%,a) — come hsl + trasparenza
transparent — completamente trasparente
currentColor — usa il valore corrente di color (utile per border, outline, fill SVG)

CSS

body { font-family: sans-serif; padding: 12px; }
p { margin: 5px 0; padding: 6px 12px; font-size: 13px;
    border-radius: 5px; border-left: 4px solid; }

/* Nomi */
.nome1 { color: tomato;      border-color: tomato; }
.nome2 { color: royalblue;   border-color: royalblue; }

/* Hex */
.hex6  { color: #1a73e8;     border-color: #1a73e8; background: #e8f0fe; }
.hex3  { color: #f00;        border-color: #f00; }  /* = #ff0000 */
.hex4  { color: #f80a;       border-color: #f80; }  /* con alpha */

/* RGB e RGBA */
.rgb   { color: rgb(34,197,94);   border-color: rgb(34,197,94); }
.rgba  { color: rgba(30,64,175,1); background: rgba(30,64,175,0.08);
         border-color: rgba(30,64,175,0.4); }

/* HSL */
.hsl1  { color: hsl(280,80%,55%); border-color: hsl(280,80%,55%); }
.hsl2  { color: hsl(30,90%,45%);  border-color: hsl(30,90%,45%); }
/* Stessa hue, luminosità diversa */
.hsl3  { color: hsl(220,80%,30%); border-color: hsl(220,80%,30%); }
.hsl4  { color: hsl(220,80%,60%); border-color: hsl(220,80%,60%); }

/* transparent */
.transp { background: transparent;
  border: 2px solid rgba(255,100,0,0.5); color: #555; }

/* currentColor */
.current { color: royalblue;
  border: 2px solid currentColor; /* usa il blu */
  box-shadow: 0 0 0 3px currentColor; /* idem */ }

RISULTATO

▶ HTML usato in questo esempio

<p class="nome1">Nome: tomato</p>
<p class="nome2">Nome: royalblue</p>
<p class="hex6">Hex 6: #1a73e8</p>
<p class="hex3">Hex 3: #f00 = #ff0000</p>
<p class="rgb">rgb(34, 197, 94)</p>
<p class="rgba">rgba con sfondo trasparente</p>
<p class="hsl1">hsl(280,80%,55%) — viola</p>
<p class="hsl3">hsl(220,80%,30%) — blu scuro</p>
<p class="hsl4">hsl(220,80%,60%) — blu chiaro</p>
<p class="transp">transparent + bordo rgba</p>
<p class="current">currentColor — border usa il colore del testo</p>

🔗 Vedi anche: background-color e gradienti Variabili colore con --var opacity e filtri colore

Unità di misura

px, em, rem, %, vw, vh, ch, vmin, vmax — assolute vs relative

Tutte le unità a confronto

UNITÀ

Unità	Relativa a	Uso tipico
px	pixel fisico	bordi, shadow, icone
%	contenitore padre	width, height fluidi
em	font-size del genitore	padding, margin relativi al font
rem	font-size di <html>	font-size, spaziatura globale ✓
vw	1% larghezza viewport	sezioni full-width, font fluidi
vh	1% altezza viewport	hero a schermo intero (height:100vh)
vmin	il minore tra vw e vh	elementi quadrati adattivi
vmax	il maggiore tra vw e vh	raro
ch	larghezza del carattere "0"	width righe di testo (60ch = leggibile)

Attenzione con em: si accumula nei tag annidati! Se padre=16px e figlio=1.5em → 24px, nipote=1.5em → 36px. rem è stabile perché punta sempre all'<html>.

CSS

html { font-size: 16px; }  /* base per rem */
body { font-family: sans-serif; padding: 12px; }
.box { padding: 6px 12px; margin: 5px 0; border-radius: 5px;
  font-size: 12px; border-left: 3px solid; }
label { font-size: 10px; color: #888; display: block; margin: 12px 0 2px; font-weight: bold; }

/* px — fisso, non cambia */
.px { width: 180px; background: #fde68a; border-color: #f59e0b; }

/* % — relativo al contenitore */
.perc { width: 70%; background: #bbf7d0; border-color: #10b981; }

/* em — relativo al font-size del genitore (cambia se nidificato!) */
.em-box { font-size: 1.3em; background: #bfdbfe; border-color: #3b82f6; }

/* rem — relativo ad html (sempre stabile) */
.rem-box { font-size: 1.3rem; background: #e9d5ff; border-color: #8b5cf6; }

/* vw/vh */
.vw  { width: 60vw; background: #fed7aa; border-color: #f97316; }
.vh  { height: 8vh; background: #fce7f3; border-color: #ec4899; display: flex; align-items: center; }

/* ch — ideale per larghezza colonne di testo */
.ch  { width: 40ch; background: #d1fae5; border-color: #059669; }

/* dimostrazione accumulo em */
.padre { font-size: 1em; color: #333; margin: 8px 0; }
.figlio { font-size: 1.5em; color: royalblue; }
.nipote { font-size: 1.5em; color: tomato; } /* 1.5 × 1.5 × 16px = 36px! */

RISULTATO

▶ HTML usato in questo esempio

<label>Larghezze</label>
<div class="box px">180px fisso</div>
<div class="box perc">70% del contenitore</div>
<div class="box vw">60vw (viewport width)</div>
<div class="box ch">40ch (larghezza ottimale per leggere)</div>
<label>Font-size: em vs rem</label>
<div class="box em-box">1.3em (relativo al padre)</div>
<div class="box rem-box">1.3rem (relativo ad html, stabile)</div>
<label>Accumulo em nei tag annidati</label>
<div class="padre">Padre 1em=16px
  <div class="figlio">Figlio 1.5em=24px
    <div class="nipote">Nipote 1.5em=36px! (accumulo)</div>
  </div>
</div>

🔗 Vedi anche: font-size margin e padding con % calc() — mescola unità diverse vw/vh nel responsive

Testo & Tipografia

Titoli h1–h6, paragrafi, font, allineamento, decorazioni — tutto il CSS per il testo

Tag HTML per il testo — h1, h2, h3, h4, h5, h6, p

HTML + CSS

I tag di intestazione h1–h6 hanno valori di default diversi impostati dal browser. Con CSS puoi sovrascrivere tutto.
h1 — titolo principale (uno solo per pagina, importante per SEO)
h2 — sottotitolo di sezione
h3–h6 — sottosezioni di livello crescente
p — paragrafo. Ha margin top e bottom di default.
span — elemento inline senza significato semantico, utile per stilare parti di testo

CSS — stila i titoli!

RISULTATO

▶ HTML — struttura gerarchica h1→h6

<h1>Titolo principale h1</h1>
<p>Paragrafo introduttivo con testo descrittivo.</p>
<h2>Sezione principale h2</h2>
<p>Paragrafo della sezione.</p>
<h3>Sottosezione h3</h3>
<h4>Gruppo h4</h4>
<h5>Dettaglio h5</h5>
<h6>Nota h6</h6>

🔗 Vedi anche: Selettori tag font-size in rem/em white-space per il testo

Tutte le proprietà tipografiche

FONT

Proprietà	Valori	Nota
font-family	Arial, sans-serif…	Elenco fallback separati da virgola
font-size	16px, 1rem, 1.2em	Preferire rem per consistenza
font-weight	normal(400), bold(700), 100–900	Dipende dal font disponibile
font-style	normal, italic, oblique
font-variant	normal, small-caps	Maiuscoletto
line-height	1.6, 24px, 150%	Senza unità = moltiplicatore. 1.5–1.8 ideale
letter-spacing	0.5px, -1px	Negativo avvicina le lettere
word-spacing	4px	Spazio tra parole
text-align	left, right, center, justify	justify → testo giustificato
text-decoration	none, underline, line-through, overline	Può avere colore e stile: underline red wavy
text-transform	uppercase, lowercase, capitalize, none	capitalize → Prima lettera maiuscola
text-indent	20px, 2em	Rientro prima riga
text-shadow	x y blur colore	Ombra del testo. Più valori separati da virgola

CSS

body { padding: 14px; background: #fafafa; }
p { font-family: Arial, sans-serif; font-size: 14px;
    line-height: 1.8; color: #333; margin: 5px 0; padding: 2px 6px; }

h2 {
  font-family: 'Georgia', serif;
  font-size: 24px;
  font-weight: bold;
  color: #1a1a2e;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.15);
  margin-bottom: 14px;
}

.f-bold   { font-weight: bold; }
.f-300    { font-weight: 300; }
.f-italic { font-style: italic; }
.f-sc     { font-variant: small-caps; }
.align-c  { text-align: center; }
.align-r  { text-align: right; }
.justify  { text-align: justify; }
.deco-ul  { text-decoration: underline; }
.deco-lt  { text-decoration: line-through; color: #999; }
.deco-col { text-decoration: underline red wavy; }
.upper    { text-transform: uppercase; letter-spacing: 3px; font-size: 11px; }
.capital  { text-transform: capitalize; }
.lh-tight { line-height: 1.1; color: navy; font-size: 13px; }
.lh-loose { line-height: 2.2; color: darkgreen; font-size: 13px; }
.ls-wide  { letter-spacing: 6px; }
.shadow1  { text-shadow: 2px 2px 3px rgba(0,0,0,0.3); }
.shadow2  { text-shadow: 0 0 8px royalblue; color: white;
            background: #111; padding: 4px 10px; }
.indent   { text-indent: 24px; }

RISULTATO

▶ HTML usato in questo esempio

<h2>Tipografia CSS</h2>
<p class="f-bold">font-weight: bold (700)</p>
<p class="f-300">font-weight: 300 (leggero)</p>
<p class="f-italic">font-style: italic</p>
<p class="f-sc">font-variant: small-caps</p>
<p class="align-c">text-align: center</p>
<p class="align-r">text-align: right</p>
<p class="deco-ul">text-decoration: underline</p>
<p class="deco-lt">text-decoration: line-through</p>
<p class="deco-col">underline red wavy</p>
<p class="upper">text-transform uppercase</p>
<p class="capital">ogni parola maiuscola</p>
<p class="lh-tight">line-height: 1.1 (interlinea stretta)</p>
<p class="lh-loose">line-height: 2.2 (molto spaziato)</p>
<p class="ls-wide">letter-spacing: 6px</p>
<p class="shadow1">text-shadow base</p>
<p class="shadow2">text glow effect</p>
<p class="indent">text-indent: rientro della prima riga</p>
<p class="justify">text-align justify: Testo giustificato che va a capo per mostrare l'effetto di allineamento ai margini.</p>

🔗 Vedi anche: Unità em, rem per font Colori per color: white-space, word-break ::first-letter, ::placeholder Variabili per font-size globale

Box Model

Ogni elemento HTML è una "scatola" composta da 4 strati sovrapposti

I 4 strati: content → padding → border → margin

FONDAMENTALE

content — il contenuto vero (testo, immagine…). Si controlla con width e height.
padding — spazio interno tra contenuto e bordo. Ha il colore di sfondo dell'elemento.
border — il bordo visibile. Fa parte delle dimensioni (tranne con box-sizing: border-box).
margin — spazio esterno tra l'elemento e gli altri. È trasparente (vedi lo sfondo del padre).

margin

border

padding

content

CSS — modifica i valori!

RISULTATO

▶ HTML + shorthand margin/padding spiegato

<div class="scatola">
  Sono una scatola!<br>
  width: 220px | padding: 20px 30px | border: 3px
</div>

<!-- SHORTHAND margin e padding: -->
<!-- 1 valore:  tutti e 4 i lati uguali        -->
<!-- 2 valori:  top/bottom | left/right         -->
<!-- 3 valori:  top | left/right | bottom       -->
<!-- 4 valori:  top | right | bottom | left (senso orario) -->

🔗 Vedi anche: Selettori per stilare box border, border-radius display: block e dimensioni gap, padding in flexbox calc() per width dinamici px, %, em nel box model

Sfondi & Bordi

background-color, immagini, gradienti, bordi, border-radius, box-shadow

Sfondo: colore, immagine e gradiente

SFONDO

CSS

RISULTATO

▶ HTML usato in questo esempio

<div class="col">background-color solido</div>
<div class="grad-lin">linear-gradient 135deg</div>
<div class="grad-top">linear-gradient to right</div>
<div class="grad-rad">radial-gradient</div>
<div class="img-bg">background-image + cover</div>
<div class="multi"></div>

Bordi, border-radius, box-shadow

BORDI

border: spessore stile colore — stili: solid, dashed, dotted, double, none
border-radius: arrotonda gli angoli. Con 50% su un quadrato → cerchio
box-shadow: offset-x offset-y blur spread colore — con inset → ombra interna

CSS

body { font-family: sans-serif; padding: 12px; background: #f0f0f0; }
div { margin: 8px 0; padding: 12px; background: white; font-size: 13px; }

.b-solid  { border: 2px solid #333; }
.b-dashed { border: 2px dashed royalblue; }
.b-dotted { border: 3px dotted tomato; }
.b-lati   { border-top: 3px solid #333; border-bottom: 3px solid #333; }

/* border-radius */
.r-small  { border: 2px solid #333; border-radius: 6px; }
.r-large  { border: 2px solid #333; border-radius: 20px; }
.r-cerchio { width: 80px; height: 80px; background: tomato;
             border-radius: 50%; color: white;
             display: flex; align-items: center; justify-content: center; }
.r-asimm  { border: 2px solid purple;
             border-radius: 50px 10px 50px 10px; }

/* box-shadow */
.shadow1  { box-shadow: 2px 4px 8px rgba(0,0,0,0.2); }
.shadow2  { box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.shadow-c { box-shadow: 0 0 0 3px royalblue; } /* outline con shadow */
.shadow-i { box-shadow: inset 0 2px 6px rgba(0,0,0,0.2); } /* interna */
.shadow-m { box-shadow: 3px 3px 0 tomato, 6px 6px 0 navy; } /* multipla */

RISULTATO

▶ HTML usato in questo esempio

<div class="b-solid">border solid</div>
<div class="b-dashed">border dashed</div>
<div class="b-dotted">border dotted</div>
<div class="b-lati">solo top e bottom</div>
<div class="r-small">border-radius: 6px</div>
<div class="r-large">border-radius: 20px</div>
<div class="r-cerchio">50%</div>
<div class="r-asimm">border-radius asimmetrico</div>
<div class="shadow1">box-shadow base</div>
<div class="shadow2">box-shadow morbida</div>
<div class="shadow-c">anello colorato</div>
<div class="shadow-i">inset shadow</div>
<div class="shadow-m">shadow multipla</div>

🔗 Vedi anche: Formati colore border e padding box-shadow Variabili per colori tema background responsive

Outline vs Border

Differenze importanti tra i due — spesso confusi!

border vs outline — le differenze

CONFRONTO

Sembrano uguali ma sono molto diversi:

border: occupa spazio (fa parte del box model), può avere border-radius, può essere impostato lato per lato
outline: NON occupa spazio (non sposta gli altri elementi), non supporta border-radius, va tutto intorno all'elemento

L'outline si vede di default sui link e input quando ricevono :focus — non rimuoverla mai per accessibilità!

CSS

RISULTATO — clicca sull'input!

▶ HTML usato in questo esempio

<div class="con-border">Con border (occupa spazio, ha border-radius)</div>
<div class="con-outline">Con outline (non occupa spazio)</div>
<input type="text" placeholder="Clicca qui — vedi :focus">

🔗 Vedi anche: border nel box model :focus e accessibilità box-shadow come alternativa

Tutti i Selettori CSS

Come selezionare esattamente gli elementi da stilare

Selettori base + combinatori + attributo

SELETTORI

tag — seleziona tutti gli elementi di quel tipo
.classe — elementi con quell'attributo class
#id — elemento con quell'attributo id (deve essere unico nella pagina)
* — universale, seleziona tutto
A B — B discendente di A (anche annidato in profondità)
A > B — B figlio diretto di A (non nipoti)
A + B — B fratello adiacente (il primo subito dopo A)
A ~ B — tutti i fratelli B che vengono dopo A
[attr] — ha l'attributo attr
[attr="val"] — attributo con valore esatto
[attr^="val"] — valore che inizia con "val"
[attr$="val"] — valore che finisce con "val"
[attr*="val"] — valore che contiene "val"

CSS

RISULTATO

▶ HTML usato in questo esempio

<p>Tag p (grigio)</p>
<p class="blu">Classe .blu</p>
<p id="unico">ID #unico</p>
<div class="cont">Contenitore: <span>span giallo</span></div>
<ul class="lista">
  <li>Figlio diretto (verde)</li>
  <li><ul><li>Nipote (NON verde)</li></ul></li>
</ul>
<h3>Titolo h3</h3>
<p>Subito dopo h3 → viola + sottolineato (h3+p e h3~p)</p>
<p>Altro paragrafo dopo h3 → solo sottolineato (h3~p)</p>
<input type="text" placeholder="[type=text] → blu">
<input type="email" placeholder="[type=email] → rosso">
<p><a href="https://esempio.com">https → verde</a></p>
<p><a href="doc.pdf">.pdf → rosso</a></p>

🔗 Vedi anche: Specificità dei selettori Pseudo-classi :hover :focus Pseudo-elementi ::before Ereditarietà CSS

Specificità (Cascata)

Il sistema di punteggio che decide quale regola vince in caso di conflitto

Il punteggio (ID, Classe/Attributo/Pseudo, Tag)

IMPORTANTE

Il punteggio si legge come 3 blocchi separati: (ID | Classe | Tag)
Non si sommano tra livelli: 11 classi (0,11,0) non battono 1 ID (1,0,0)!
inline style = (1,0,0,0) — sempre più specifico
!important = vince su tutto — usarlo solo come ultima risorsa

CSS

RISULTATO

▶ HTML usato in questo esempio

<p>Solo tag p → blu (0,0,1)</p>
<p class="rosso">p.rosso → arancio (0,1,1) batte .rosso (0,1,0)</p>
<p id="speciale" class="rosso">ID → viola (1,0,0) vince su tutto</p>
<p style="color: green;">inline style → verde (batte anche l'ID)</p>

🔗 Vedi anche: Tutti i selettori La Cascata

Pseudo-classi

Selezionare elementi in base al loro stato o posizione

Pseudo-classi: hover, focus, checked, nth-child, not e altre

PSEUDO

:hover — al passaggio del mouse
:focus — quando l'elemento ha il focus (input selezionato, link con tab…)
:active — durante il click
:visited / :link — link visitato / non visitato
:checked — checkbox/radio selezionato
:disabled / :enabled — input disabilitato/abilitato
:first-child / :last-child — primo/ultimo figlio
:nth-child(n) — n-esimo figlio (può usare formule: 2n=pari, 2n+1=dispari, odd, even)
:not(selector) — tutto tranne quel selettore
:empty — elementi senza figli
:first-of-type / :last-of-type — primo/ultimo di quel tipo di tag

CSS — interagisci!

body { font-family: sans-serif; padding: 14px; }

/* :hover */
.btn { display:inline-block; padding:9px 18px; background:royalblue;
  color:white; border-radius:6px; cursor:pointer; margin:4px;
  transition: background .2s, transform .15s; }
.btn:hover { background: darkblue; transform: scale(1.05); }
.btn:active { transform: scale(0.97); }

/* :focus */
input { padding:7px 10px; border:1px solid #ccc; border-radius:5px;
  font-size:13px; display:block; margin:5px 0; outline:none; }
input:focus { border-color: royalblue;
  box-shadow: 0 0 0 3px rgba(65,105,225,.15); }

/* :checked */
input[type="checkbox"]:checked + label { color: green; font-weight: bold; }
input[type="checkbox"] { margin-right: 6px; }

/* :nth-child */
li { padding: 4px 8px; }
li:first-child { color: green; font-weight: bold; }
li:last-child  { color: red; }
li:nth-child(even) { background: #f5f5f5; }

/* :not() */
p:not(.escluso) { color: navy; }
.escluso { color: #aaa; font-style: italic; }

/* :empty */
div:empty { background: orange; height: 20px; width: 80px; }

RISULTATO

▶ HTML usato in questo esempio

<div class="btn">Hover + Active</div>
<input type="text" placeholder="Clicca → :focus">
<div>
  <input type="checkbox" id="cb">
  <label for="cb">Seleziona (checked → verde)</label>
</div>
<ul>
  <li>Primo (verde)</li>
  <li>Secondo (even=grigio)</li>
  <li>Terzo</li>
  <li>Quarto (even=grigio)</li>
  <li>Quinto (last=rosso)</li>
</ul>
<p>Paragrafo normale → blu (:not .escluso)</p>
<p class="escluso">Escluso da :not()</p>
<div></div> <!-- :empty → arancio -->

🔗 Vedi anche: Selettori combinatori transition su :hover :focus su input Pseudo-elementi ::before

Pseudo-elementi

::before, ::after, ::first-line, ::first-letter, ::placeholder, ::selection

I pseudo-elementi principali

PSEUDO

I pseudo-elementi (con :: doppio) selezionano parti di un elemento, non elementi interi.
::before — inserisce contenuto virtuale PRIMA del contenuto dell'elemento (richiede content:)
::after — inserisce contenuto virtuale DOPO (richiede content:)
::first-line — prima riga di un testo
::first-letter — prima lettera (per effetti capolettera)
::placeholder — stila il testo placeholder degli input
::selection — stila il testo selezionato dall'utente

CSS

body { font-family: sans-serif; padding: 14px; }

/* ::before — icona davanti */
.icona::before {
  content: "★ ";
  color: gold;
  font-size: 16px;
}

/* ::after — badge dopo */
.nuovo::after {
  content: " NEW";
  background: tomato;
  color: white;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ::before per decorazione grafica */
.linea-decorata {
  position: relative;
  padding-left: 14px;
}
.linea-decorata::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: royalblue;
  border-radius: 2px;
}

/* ::first-letter capolettera */
.capolettera::first-letter {
  font-size: 2.5em;
  float: left;
  line-height: 1;
  margin-right: 6px;
  color: royalblue;
  font-weight: bold;
}

/* ::placeholder */
input::placeholder { color: #aaa; font-style: italic; }
input { padding: 8px; border: 1px solid #ccc;
        border-radius: 5px; display: block; margin: 8px 0; }

/* ::selection */
::selection { background: royalblue; color: white; }

p { margin: 6px 0; }

RISULTATO — seleziona del testo!

▶ HTML usato in questo esempio

<p class="icona">Con ::before icona stella</p>
<p class="nuovo">Prodotto</p>
<p class="linea-decorata">Riga con barra sinistra decorativa</p>
<p class="capolettera">Lorem ipsum dolor sit amet, questo paragrafo ha il capolettera.</p>
<input placeholder="placeholder stilato con ::placeholder">
<p>Seleziona questo testo → ::selection</p>

🔗 Vedi anche: Pseudo-classi Selettori ::before per icone lista ::first-letter, text

Proprietà display

Come ogni elemento occupa spazio nella pagina

block, inline, inline-block, none, visibility

LAYOUT

block — occupa tutta la larghezza disponibile, va a capo prima e dopo. Accetta width, height, margin, padding. (div, p, h1–h6, ul, li, section…)
inline — si inserisce nel flusso del testo. Non accetta width/height. Margin/padding orizzontali sì, verticali no. (span, a, strong, em, img…)
inline-block — come inline (rimane nella riga) ma accetta width, height e padding verticale
none — rimuove l'elemento dal flusso. Non occupa spazio. Come se non esistesse.
visibility: hidden — nasconde l'elemento ma mantiene lo spazio occupato (differenza chiave con display:none)
table / table-cell — simula le tabelle HTML

CSS

RISULTATO

▶ HTML usato in questo esempio

<label>display: block</label>
<div class="d-block">Block 1</div>
<div class="d-block">Block 2 (va a capo)</div>
<label>display: inline</label>
<span class="d-inline">Inline A</span>
<span class="d-inline">Inline B</span>
<label>display: inline-block</label>
<div class="d-iblock">A</div>
<div class="d-iblock">B</div>
<div class="d-iblock">C</div>
<label>display: none vs visibility: hidden</label>
<div class="segnaposto">Prima dell'elemento nascosto</div>
<div class="d-none">display:none — sparisce!</div>
<div class="v-hidden">visibility:hidden — spazio rimane!</div>
<div class="segnaposto">Dopo l'elemento nascosto</div>

🔗 Vedi anche: display: flex display: grid position e display overflow con display

Flexbox

Il sistema di layout più usato — allinea elementi in riga o colonna con precisione

Flexbox interattivo completo

LAYOUT

Si attiva con display: flex sul contenitore. I figli diventano flex items.
Proprietà del CONTAINER:
— flex-direction: row (default) | column | row-reverse | column-reverse
— justify-content: distribuzione sull'asse principale
— align-items: allineamento sull'asse secondario
— flex-wrap: nowrap (default) | wrap — permette agli item di andare a capo
— gap: spazio tra items (riga e colonna)
Proprietà degli ITEM:
— flex: 1 — occupa tutto lo spazio disponibile
— flex-grow / flex-shrink / flex-basis
— align-self — sovrascrive align-items per quell'item
— order — cambia l'ordine visivo senza modificare l'HTML

flex-direction:

justify-content:

align-items:

flex-wrap:

CSS (aggiornato dai bottoni)

RISULTATO

▶ HTML usato in questo esempio

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2 (alto)</div>
  <div class="item">Item 3 (flex:1)</div>
  <div class="item">Item 4</div>
</div>

🔗 Vedi anche: CSS Grid (2D) Navbar con flexbox Card grid display: flex vs block calc() per width flex

CSS Grid

Layout a due dimensioni — righe E colonne allo stesso tempo

Grid interattivo — colonne, righe, aree

LAYOUT

display: grid sul contenitore. A differenza di flexbox, Grid controlla righe e colonne insieme.
grid-template-columns — definisce le colonne: 200px 1fr 1fr, repeat(3, 1fr)
grid-template-rows — definisce le righe
fr — unità fractional: 1fr = "una frazione dello spazio disponibile"
gap — spazio tra righe e colonne
grid-column — su un item: quante colonne occupa (span 2 = occupa 2 colonne)
grid-row — su un item: quante righe occupa
grid-area — con grid-template-areas definisce layout nominati

grid-template-columns:

gap:

CSS

RISULTATO

▶ HTML usato in questo esempio

<div class="griglia">
  <div class="cella">1</div>
  <div class="cella wide">2 — wide (span 2)</div>
  <div class="cella tall">3 — tall (span 2 righe)</div>
  <div class="cella">4</div>
  <div class="cella">5</div>
  <div class="cella">6</div>
</div>

Grid con aree nominate — layout pagina completo

AVANZATO

CSS

RISULTATO

▶ HTML usato in questo esempio

<div class="pagina">
  <header class="header">Header (grid-area: header)</header>
  <aside class="sidebar">
    <b>Sidebar</b>
    <a href="#">Home</a>
    <a href="#">Profilo</a>
  </aside>
  <main class="main">Contenuto principale</main>
  <footer class="footer">Footer © 2025</footer>
</div>

🔗 Vedi anche: Flexbox (1D) Grid responsive Layout pagina con grid Footer multi-colonna

Position

Posizionamento preciso degli elementi fuori dal flusso normale

static, relative, absolute, fixed, sticky

POSITION

static — default. Segue il flusso normale. top/left non funzionano.
relative — si sposta rispetto a dove sarebbe normalmente, ma mantiene il suo spazio nel flusso
absolute — esce dal flusso. Si posiziona rispetto al primo antenato con position ≠ static (o al body)
fixed — esce dal flusso. Rimane fisso rispetto alla finestra del browser (non scrolla)
sticky — si comporta come relative finché non raggiunge il punto specificato durante lo scroll, poi si "attacca"

CSS

body { font-family: sans-serif; padding: 12px; height: 500px; }
div { padding: 8px 12px; margin: 6px 0; border-radius: 5px; font-size: 13px; }

/* RELATIVE */
.rel {
  position: relative;
  top: 12px;     /* si sposta in giù */
  left: 20px;    /* si sposta a destra */
  background: #bfdbfe;
}

/* ABSOLUTE — si posiziona rispetto al .contenitore */
.contenitore {
  position: relative; /* ← punto di riferimento per .abs */
  background: #fde68a;
  height: 90px;
  margin: 12px 0;
}
.abs {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: tomato;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  margin: 0;
}

/* FIXED — fisso nel viewport (provalo scrollando) */
.fixed-box {
  position: fixed;
  bottom: 12px;
  right: 12px;
  background: #1a1a2e;
  color: white;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  margin: 0;
}

/* STICKY */
.sticky {
  position: sticky;
  top: 0;
  background: #d1fae5;
  border-bottom: 2px solid green;
  font-weight: bold;
  z-index: 10;
}

RISULTATO — scrolla!

▶ HTML usato in questo esempio

<div>Elemento normale</div>
<div class="rel">relative: +12px top +20px left</div>
<div>Elemento normale (lo spazio del .rel è ancora lì)</div>
<div class="contenitore">
  Contenitore (position: relative)
  <div class="abs">absolute</div>
</div>
<div class="sticky">sticky top:0 — si attacca scrollando</div>
<div>Contenuto sotto lo sticky</div>
<div>Altro contenuto...</div>
<div class="fixed-box">📌 fixed</div>

🔗 Vedi anche: display e flusso overflow e z-index Navbar sticky/fixed :hover con position

Float & Clear

Tecnica classica per far scorrere il testo intorno agli elementi

float: left/right — clear: both

FLOAT

CSS

RISULTATO

▶ HTML usato in questo esempio

<div class="img-sx">LEFT</div>
<p>Il testo scorre intorno all'elemento float a sinistra. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
<div class="img-dx">RIGHT</div>
<p>Questo testo scorre intorno all'elemento float a destra. Adipiscing elit, sed do eiusmod.</p>
<div class="dopo-float">clear: both — questo va sotto tutti i float</div>

🔗 Vedi anche: Alternativa moderna: flexbox Alternativa moderna: grid clearfix e overflow:hidden

Overflow & Z-index

Cosa fare quando il contenuto è troppo grande, e chi sta sopra chi

overflow + z-index + white-space

OVERFLOW

CSS

body { font-family: sans-serif; padding: 12px; }
.box { width: 170px; height: 70px; padding: 8px; margin: 8px 4px;
  border: 1px solid #ccc; font-size: 12px; display: inline-block;
  vertical-align: top; border-radius: 5px; }
label { font-size: 10px; color: #888; display: block; margin-bottom: 2px; }

.vis  { overflow: visible;  background: #dbeafe; } /* fuoriesce */
.hid  { overflow: hidden;   background: #fde68a; } /* taglia */
.scr  { overflow: scroll;   background: #d1fae5; } /* sempre scrollbar */
.aut  { overflow: auto;     background: #fce7f3; } /* scrollbar solo se serve */
.ox   { overflow-x: hidden; overflow-y: auto; background: #e9d5ff; }

/* Troncamento testo con puntini */
.trunc { white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; background: #fff3cd; width: 150px; }

/* Z-INDEX */
.stack { position: relative; height: 80px; margin-top: 16px; }
.z1 { position: absolute; width: 120px; height: 55px; top:0; left:0;
  background: rgba(239,68,68,.85); border-radius: 5px;
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:12px;font-weight:bold; z-index: 1; }
.z3 { position: absolute; width: 120px; height: 55px; top:15px; left:30px;
  background: rgba(59,130,246,.9); border-radius: 5px;
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:12px;font-weight:bold; z-index: 3; }
.z2 { position: absolute; width: 120px; height: 55px; top:28px; left:60px;
  background: rgba(16,185,129,.85); border-radius: 5px;
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:12px;font-weight:bold; z-index: 2; }

RISULTATO

▶ HTML usato in questo esempio

<div class="box vis"><label>visible</label>testo lungo che fuoriesce dal box senza stop</div>
<div class="box hid"><label>hidden</label>testo lungo che viene tagliato quando esce</div>
<div class="box scr"><label>scroll</label>testo lungo con scrollbar sempre visibile anche se non serve</div>
<div class="box aut"><label>auto</label>scrollbar solo se il contenuto è troppo grande</div>
<div class="trunc">Testo troncato con i puntini...</div>
<div class="stack">
  <div class="z1">z-index: 1</div>
  <div class="z3">z-index: 3</div>
  <div class="z2">z-index: 2</div>
</div>

🔗 Vedi anche: z-index e position text-overflow ellipsis display: none vs hidden

Ombre & Effetti visivi

box-shadow, text-shadow, clip-path, aspect-ratio

Ombre e forme speciali

VISUALE

CSS

body { font-family: sans-serif; padding: 16px; background: #f0f0f0; }
div, p { margin: 10px 0; }

/* box-shadow */
.s1 { background:white; padding:12px; border-radius:8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.s2 { background:white; padding:12px; border-radius:8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.s3 { background:white; padding:12px; border-radius:8px;
  box-shadow: 4px 4px 0 #000; } /* ombra solida/piatta */
.s4 { background:white; padding:12px; border-radius:8px;
  box-shadow: 0 0 0 4px royalblue; } /* anello */
.s5 { background:#1a1a2e; color:white; padding:12px; border-radius:8px;
  box-shadow: 0 0 20px rgba(91,164,245,0.5); } /* glow */

/* text-shadow */
.ts1 { font-size:22px; font-weight:bold; color:#333;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.ts2 { font-size:22px; font-weight:bold; color:white;
  text-shadow: 0 0 10px royalblue, 0 0 20px royalblue; background:#111; padding:8px; }

/* clip-path — forme speciali */
.clip-tri { width:100px; height:80px; background:tomato;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.clip-hex { width:100px; height:90px; background:royalblue;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:inline-block; margin:0 8px; }

/* aspect-ratio */
.ratio { background:#d1fae5; width:200px;
  aspect-ratio: 16/9; display:flex;align-items:center;
  justify-content:center; border-radius:6px; font-size:13px; }

RISULTATO

▶ HTML usato in questo esempio

<div class="s1">box-shadow leggera</div>
<div class="s2">box-shadow profonda</div>
<div class="s3">ombra solida</div>
<div class="s4">anello/ring</div>
<div class="s5">glow effect</div>
<p class="ts1">text-shadow base</p>
<p class="ts2">text glow</p>
<div class="clip-tri"></div>
<div class="clip-hex"></div>
<div class="ratio">aspect-ratio: 16/9</div>

🔗 Vedi anche: box-shadow e border Animare le ombre filter: drop-shadow

Filter & Opacity

blur, brightness, contrast, grayscale, sepia, hue-rotate — effetti visivi sugli elementi

Filtri CSS e opacity

FILTRI

opacity — trasparenza dell'elemento (0=invisibile, 1=opaco). Colpisce l'elemento E i figli.
filter: blur(px) — sfuoca l'elemento
filter: brightness(%) — luminosità (100%=normale, 0%=nero, 200%=doppio brillante)
filter: contrast(%) — contrasto
filter: grayscale(%) — scala di grigi (0%=colore, 100%=B&N)
filter: sepia(%) — effetto seppia/vintage
filter: hue-rotate(deg) — ruota i colori
filter: drop-shadow() — ombra che segue la forma (non il rettangolo come box-shadow)

CSS

body { font-family: sans-serif; padding: 12px; background: #111; color: white; }
div { display: inline-block; margin: 6px; text-align: center; font-size: 11px; }
img { display: block; width: 90px; height: 70px; object-fit: cover;
  border-radius: 6px; }

/* Ogni img ha un filtro diverso */
.normale   img { filter: none; }
.blur      img { filter: blur(3px); }
.bright    img { filter: brightness(150%); }
.dark      img { filter: brightness(50%); }
.contrast  img { filter: contrast(200%); }
.gray      img { filter: grayscale(100%); }
.sepia     img { filter: sepia(100%); }
.hue       img { filter: hue-rotate(120deg); }
.saturate  img { filter: saturate(300%); }
.inv       img { filter: invert(100%); }
.multi     img { filter: grayscale(50%) brightness(120%) contrast(110%); }
.hover-ef img { transition: filter .3s; }
.hover-ef img:hover { filter: brightness(120%) saturate(150%); }

/* opacity */
.opacita { opacity: 0.4; color: white; background: royalblue;
  padding: 8px; border-radius: 5px; display: block; margin-top: 10px; }

RISULTATO — hover sull'ultima!

▶ HTML usato in questo esempio

<div class="normale"><img src="https://picsum.photos/90/70?1">normale</div>
<div class="blur"><img src="https://picsum.photos/90/70?1">blur</div>
<div class="bright"><img src="https://picsum.photos/90/70?1">bright</div>
<div class="gray"><img src="https://picsum.photos/90/70?1">grayscale</div>
<div class="sepia"><img src="https://picsum.photos/90/70?1">sepia</div>
<div class="hue"><img src="https://picsum.photos/90/70?1">hue-rotate</div>
<div class="inv"><img src="https://picsum.photos/90/70?1">invert</div>
<div class="hover-ef"><img src="https://picsum.photos/90/70?1">hover!</div>
<div class="opacita">opacity: 0.4</div>

🔗 Vedi anche: Animare i filtri box-shadow vs drop-shadow filter + transform

Transform

Traslazioni, rotazioni, scale, skew — senza spostare altri elementi

translate, rotate, scale, skew

TRANSFORM

transform modifica l'aspetto visivo dell'elemento senza influire sul layout degli altri.
translate(x, y) — sposta. translateX, translateY, translateZ
rotate(deg) — ruota. Positivo = senso orario
scale(x, y) — ridimensiona. scale(1.5) = 1.5× più grande
skew(deg) — inclina/distorce
Si possono combinare: transform: rotate(45deg) scale(1.2)

CSS — prova hover!

RISULTATO — hover per annullare

▶ HTML usato in questo esempio

<div class="box traslato">translate</div>
<div class="box ruotato">rotate 30°</div>
<div class="box scalato">scale 1.3</div>
<div class="box skewato">skewX 15°</div>
<div class="box combo">combo</div>
<div class="box origin">origin</div>

🔗 Vedi anche: Animare transform Animation con transform filter + transform

Transition

Effetti di cambio stato fluidi e animati

transition — sintassi e timing functions

TRANSITION

transition: proprietà durata timing delay
proprietà — quale proprietà animare. all = tutte
durata — es: 0.3s, 500ms
timing — come cambia la velocità: ease(default), linear, ease-in, ease-out, ease-in-out, cubic-bezier()
delay — ritardo prima che inizi

CSS — hover su tutto!

body { font-family: sans-serif; padding: 16px; }

/* Transizione colore */
.t-color {
  background: royalblue; color: white; padding: 10px 20px;
  border-radius: 6px; cursor: pointer; display: inline-block; margin: 6px;
  transition: background 0.3s ease;
}
.t-color:hover { background: tomato; }

/* Transizione multipla */
.t-multi {
  background: white; color: #333; padding: 12px 20px;
  border: 2px solid #ccc; border-radius: 6px; cursor: pointer;
  display: inline-block; margin: 6px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.t-multi:hover {
  background: #1a1a2e; color: white;
  border-color: #1a1a2e; transform: translateY(-2px);
}

/* Diverse timing functions */
.t-ease     { transition: transform 0.5s ease; }
.t-linear   { transition: transform 0.5s linear; }
.t-ease-in  { transition: transform 0.5s ease-in; }
.t-ease-out { transition: transform 0.5s ease-out; }

.timing-box {
  display: inline-block; background: tomato; color: white;
  padding: 8px 14px; border-radius: 5px; margin: 5px;
  cursor: pointer; font-size: 12px;
}
.timing-box:hover { transform: translateX(60px); }

/* Delay */
.delay1 { transition: background .3s ease 0s; }
.delay2 { transition: background .3s ease 0.2s; }
.delay3 { transition: background .3s ease 0.4s; }
.delay1, .delay2, .delay3 {
  background: royalblue; color: white; padding: 8px;
  margin: 3px; border-radius: 4px; cursor: pointer;
  display: inline-block; font-size: 12px;
}
.delay1:hover,.delay2:hover,.delay3:hover { background: tomato; }

RISULTATO — hover!

▶ HTML usato in questo esempio

<div class="t-color">Hover → cambia colore</div>
<div class="t-multi">Hover → transizione multipla</div>
<br><b>Timing functions (hover per vedere differenza):</b><br>
<div class="timing-box t-ease">ease</div>
<div class="timing-box t-linear">linear</div>
<div class="timing-box t-ease-in">ease-in</div>
<div class="timing-box t-ease-out">ease-out</div>
<br><b>Delay diversi (hover qui sopra):</b><br>
<div class="delay1">delay 0s</div>
<div class="delay2">delay 0.2s</div>
<div class="delay3">delay 0.4s</div>

🔗 Vedi anche: transform nelle transizioni :hover per le transizioni Animation automatiche Bottoni con transizioni

Animation & @keyframes

Animazioni CSS che girano automaticamente senza interazione

@keyframes + animation

ANIMATION

Si definisce l'animazione con @keyframes nome { } usando from/to o percentuali.
Si applica con animation: nome durata timing iteration direction
animation-iteration-count: infinite, o un numero
animation-direction: normal, reverse, alternate (avanti/indietro), alternate-reverse
animation-fill-mode: forwards (rimane all'ultimo frame), backwards, both
animation-play-state: paused / running — utile per pausare con hover

CSS

body { font-family: sans-serif; padding: 14px; background: #0f0f1a; color: white; }
div { margin: 10px 0; }

/* 1. Pulsazione */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.15); opacity: 0.8; }
}
.pulsante { width: 60px; height: 60px; background: tomato; border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite; display: inline-block; }

/* 2. Scorrimento laterale */
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}
.scorrevole { width: 60px; height: 30px; background: royalblue; border-radius: 4px;
  animation: slide 2s ease-in-out infinite alternate; }

/* 3. Rotazione */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,.2);
  border-top-color: white; border-radius: 50%;
  animation: spin 0.8s linear infinite; display: inline-block; }

/* 4. Fade in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 1s ease forwards;
  background: rgba(255,255,255,.1); padding: 8px; border-radius: 5px; }

/* 5. Cambio colore */
@keyframes colors {
  0%   { background: #ef4444; }
  33%  { background: #3b82f6; }
  66%  { background: #10b981; }
  100% { background: #ef4444; }
}
.colori { width: 100%; height: 30px; border-radius: 5px;
  animation: colors 3s linear infinite; }

/* 6. Pausa con hover */
.pausabile { width: 50px; height: 50px; background: gold; border-radius: 8px;
  animation: spin 2s linear infinite; display: inline-block; cursor: pointer; }
.pausabile:hover { animation-play-state: paused; }

RISULTATO — hover sul cubo oro per pausare!

▶ HTML usato in questo esempio

<b>Pulsazione:</b> <div class="pulsante"></div>
<b>Slide alternate:</b>
<div class="scorrevole"></div>
<b>Spinner di caricamento:</b> <div class="spinner"></div>
<b>Fade in:</b>
<div class="fade-in">Questo elemento fa fade in al caricamento</div>
<b>Cambio colori:</b>
<div class="colori"></div>
<b>Hover per pausare:</b> <div class="pausabile"></div>

🔗 Vedi anche: Transition vs Animation transform nei keyframes filter animato

Cursor & Pointer

Cambiare il cursore del mouse sull'elemento

Tutti i valori di cursor

CURSOR

CSS

RISULTATO — passa il mouse!

▶ HTML usato in questo esempio

<p>Passa il mouse su ogni box per vedere il cursore:</p>
<div class="cbox default">default</div>
<div class="cbox pointer">pointer 👆</div>
<div class="cbox move-c">move</div>
<div class="cbox grab-c">grab</div>
<div class="cbox crosshair">crosshair</div>
<div class="cbox wait-c">wait ⏳</div>
<div class="cbox not-allowed">not-allowed 🚫</div>
<div class="cbox zoom-in">zoom-in 🔍</div>
<div class="cbox help-c">help ❓</div>
<div class="cbox ew-resize">ew-resize ↔</div>

🔗 Vedi anche: :hover + cursor cursor su input

White-space & Word-break

Controllare come va a capo il testo e come vengono gestiti gli spazi

white-space, word-break, overflow-wrap, text-overflow

TESTO

white-space: normal — default: va a capo, spazi multipli collassano a uno
white-space: nowrap — testo su una riga sola, non va a capo mai
white-space: pre — rispetta tutti gli spazi e gli a capo del codice HTML (come il tag <pre>)
white-space: pre-wrap — come pre ma va a capo se necessario
word-break: break-all — spezza le parole ovunque
overflow-wrap: break-word — spezza le parole solo se necessario (consigliato)
text-overflow: ellipsis — mette i puntini (…) al posto del testo troncato. Richiede overflow:hidden e white-space:nowrap

CSS

body { font-family: sans-serif; padding: 12px; }
.box { width: 180px; background: #f5f5f5; border: 1px solid #ddd;
  padding: 8px; margin: 8px 4px; font-size: 12px; display: inline-block;
  vertical-align: top; border-radius: 5px; }
label { font-size: 10px; color: #888; display: block; margin-bottom: 4px; font-weight: bold; }

/* white-space */
.normal   { white-space: normal; }
.nowrap   { white-space: nowrap; overflow: hidden; }
.pre      { white-space: pre; }
.pre-wrap { white-space: pre-wrap; }

/* word-break / overflow-wrap */
.break-all  { word-break: break-all; }
.break-word { overflow-wrap: break-word; }

/* text-overflow ellipsis */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Esempio pratico: card con titolo troncato */
.card-trunc { width: 150px; background: white; border: 1px solid #ddd;
  border-radius: 8px; overflow: hidden; margin: 8px 4px;
  display: inline-block; font-size: 12px; }
.card-trunc .titolo { padding: 8px; font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-trunc .corpo { padding: 0 8px 8px; color: #666; }

RISULTATO

▶ HTML usato in questo esempio

<div class="box normal"><label>normal</label>testo     con   spazi   multipli   che   va   a   capo</div>
<div class="box nowrap"><label>nowrap</label>testo molto lungo che non va mai a capo</div>
<div class="box pre"><label>pre</label>riga 1
riga 2  spazi</div>
<div class="box break-all"><label>break-all</label>parolamoltolungachenonsispezza</div>
<div class="box ellipsis"><label>ellipsis</label>testo molto lungo troncato con i puntini di sospensione</div>
<div class="card-trunc">
  <div class="titolo">Titolo molto lungo che viene troncato</div>
  <div class="corpo">Descrizione breve</div>
</div>

🔗 Vedi anche: Proprietà testo overflow hidden + ellipsis Titoli card troncati

Object-fit & Object-position

Come le immagini si adattano al loro contenitore

object-fit per immagini e video

IMMAGINI

Quando un'immagine ha dimensioni diverse dal suo contenitore, object-fit decide come adattarsi:
fill — (default) distorce l'immagine per riempire completamente
contain — mostra tutta l'immagine, aggiunge spazio vuoto (letterbox)
cover — riempie completamente, taglia i bordi. Quello più usato!
none — dimensione originale, taglia se troppo grande
scale-down — il minore tra none e contain
object-position sposta il punto di focus (es: top, center, 20% 30%)

CSS

RISULTATO

▶ HTML usato in questo esempio

<div class="wrap fill"><img src="https://picsum.photos/300/200">fill</div>
<div class="wrap contain"><img src="https://picsum.photos/300/200">contain</div>
<div class="wrap cover"><img src="https://picsum.photos/300/200">cover ✓</div>
<div class="wrap pos-top"><img src="https://picsum.photos/300/200">cover+top</div>
<div class="wrap pos-bottom"><img src="https://picsum.photos/300/200">cover+bottom</div>

🔗 Vedi anche: width e height background-size: cover img nelle card

calc() e funzioni CSS

Calcoli dinamici, min(), max(), clamp() — CSS che si adatta da solo

calc(), min(), max(), clamp()

FUNZIONI

calc() — esegue calcoli mescolando unità diverse. calc(100% - 40px)
min(a, b) — usa il valore più piccolo tra i due
max(a, b) — usa il valore più grande
clamp(min, ideale, max) — valore che si adatta tra un minimo e un massimo. Molto utile per il responsive!

CSS

body { font-family: sans-serif; padding: 14px; }
div { margin: 8px 0; padding: 10px; border-radius: 6px; font-size: 13px; }

/* calc() — somma unità diverse */
.calc1 { width: calc(100% - 40px); background: #dbeafe; }
.calc2 { width: calc(50% + 20px);  background: #fde68a; }
.calc3 { margin-left: calc(50% - 60px); background: #d1fae5; width: 120px; }

/* min() — mai più largo di 300px */
.min-ex { width: min(100%, 300px); background: #fce7f3; }

/* max() — almeno 200px */
.max-ex { width: max(200px, 50%); background: #e9d5ff; }

/* clamp(minimo, ideale, massimo) */
.clamp-ex {
  /* font che si adatta: minimo 14px, ideale 2.5vw, massimo 24px */
  font-size: clamp(14px, 2.5vw, 24px);
  background: #fed7aa;
}
.clamp-w {
  /* larghezza: min 200px, ideale 50%, max 400px */
  width: clamp(200px, 50%, 400px);
  background: #d1fae5;
}

/* Esempio pratico: sidebar + contenuto */
.layout-calc { display: flex; gap: 16px; }
.sidebar-c { width: 160px; flex-shrink: 0; background: #f0f0f0; padding: 10px; }
.main-c { width: calc(100% - 176px); background: white; border: 1px solid #ddd; padding: 10px; }

RISULTATO

▶ HTML usato in questo esempio

<div class="calc1">calc(100% - 40px)</div>
<div class="calc2">calc(50% + 20px)</div>
<div class="calc3">centrato con calc</div>
<div class="min-ex">min(100%, 300px)</div>
<div class="max-ex">max(200px, 50%)</div>
<div class="clamp-ex">font-size: clamp(14px, 2.5vw, 24px) — adatta con il viewport</div>
<div class="layout-calc">
  <div class="sidebar-c">sidebar 160px</div>
  <div class="main-c">main: calc(100% - 176px)</div>
</div>

🔗 Vedi anche: Unità di misura Larghezze dinamiche calc() nel responsive Variabili + calc()

Variabili CSS (Custom Properties)

Definire valori riutilizzabili — cambia uno, aggiornano tutti

:root, --variabile, var()

VARIABILI

Si definiscono con --nome-variabile: valore e si usano con var(--nome-variabile)
Definite in :root { } sono globali (disponibili ovunque). Si possono anche definire localmente su un elemento.
var(--colore, rosso) — il secondo parametro è il valore di fallback
Cambiate con JavaScript: document.documentElement.style.setProperty('--colore', 'blue')

CSS — modifica i colori in :root!

/* ══ MODIFICA QUESTI VALORI ══ */
:root {
  --colore-primario: #3b82f6;
  --colore-secondario: #1e3a5f;
  --colore-accento: #ef4444;
  --colore-testo: #1f2937;
  --raggio: 8px;
  --spazio-sm: 8px;
  --spazio-md: 16px;
  --font-titolo: Georgia, serif;
}

/* Tutti usano le variabili */
body { font-family: sans-serif; padding: var(--spazio-md); }

.header {
  background: var(--colore-secondario);
  color: white;
  padding: var(--spazio-md);
  border-radius: var(--raggio);
  font-family: var(--font-titolo);
  margin-bottom: var(--spazio-md);
}

.btn-primario {
  background: var(--colore-primario);
  color: white;
  padding: var(--spazio-sm) var(--spazio-md);
  border: none; border-radius: var(--raggio);
  cursor: pointer; margin: 4px;
}

.btn-accento {
  background: var(--colore-accento);
  color: white;
  padding: var(--spazio-sm) var(--spazio-md);
  border: none; border-radius: var(--raggio);
  cursor: pointer; margin: 4px;
}

.card-v {
  border: 2px solid var(--colore-primario);
  border-radius: var(--raggio);
  padding: var(--spazio-md);
  color: var(--colore-testo);
  margin-top: var(--spazio-md);
}

/* Variabile locale — sovrascrive :root */
.dark-section {
  --colore-primario: #f59e0b; /* locale! */
  background: #111;
  padding: var(--spazio-md);
  border-radius: var(--raggio);
  margin-top: var(--spazio-md);
}
.dark-section .btn-primario {
  background: var(--colore-primario); /* usa quella locale */
}

RISULTATO

▶ HTML usato in questo esempio

<div class="header">Header con variabili CSS</div>
<button class="btn-primario">Primario</button>
<button class="btn-accento">Accento</button>
<div class="card-v">Card con variabili — prova a cambiare --colore-primario in :root!</div>
<div class="dark-section">
  <p style="color:white">Sezione con variabile locale (--colore-primario: giallo)</p>
  <button class="btn-primario">Usa variabile locale</button>
</div>

🔗 Vedi anche: :root e global styles Colori come variabili Variabili nei media query Variabili locali con :hover

Media Query & Responsive

Adattare il design a schermi di dimensioni diverse

@media — sintassi e breakpoint comuni

RESPONSIVE

@media (condizione) { regole CSS }
max-width — stili per schermi fino a quella larghezza (mobile first inverso)
min-width — stili per schermi da quella larghezza in su (mobile first)
Breakpoint comuni: 480px (mobile), 768px (tablet), 1024px (laptop), 1280px (desktop)
Si possono combinare: @media (min-width: 768px) and (max-width: 1024px)
Altre condizioni: orientation: landscape, prefers-color-scheme: dark, print

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: sans-serif; }

/* ── STILE BASE (mobile) ── */
.pagina { display: flex; flex-direction: column; }

nav {
  background: #1a1a2e;
  color: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links { display: none; } /* nascosto su mobile */
.hamburger { display: block; cursor: pointer; font-size: 20px; }

.contenuto { display: flex; flex-direction: column; }
.sidebar { background: #f0f0f0; padding: 14px; }
main { padding: 14px; }

.hero {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white; text-align: center; padding: 30px 16px;
}
.hero h1 { font-size: 22px; margin-bottom: 8px; }

/* ── TABLET (min-width: 600px) ── */
@media (min-width: 600px) {
  .nav-links { display: flex; gap: 16px; list-style: none; }
  .nav-links a { color: #ccc; text-decoration: none; font-size: 14px; }
  .hamburger { display: none; }
  .hero h1 { font-size: 28px; }
}

/* ── DESKTOP (min-width: 900px) ── */
@media (min-width: 900px) {
  .contenuto { flex-direction: row; }
  .sidebar { width: 200px; flex-shrink: 0; }
  main { flex: 1; }
  .hero { padding: 50px; }
  .hero h1 { font-size: 36px; }
}

/* ── STAMPA ── */
@media print {
  nav, .sidebar { display: none; }
  main { width: 100%; }
}

/* Contenuto */
.sidebar ul { list-style: none; padding: 0; }
.sidebar li a { display: block; padding: 5px 0; color: #555; text-decoration: none; font-size: 13px; }
main p { color: #555; line-height: 1.7; font-size: 14px; margin-bottom: 10px; }

RISULTATO

▶ HTML usato in questo esempio

<div class="pagina">
  <nav>
    <b>MySite</b>
    <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">Chi siamo</a></li>
    </ul>
    <div class="hamburger">☰</div>
  </nav>
  <div class="hero"><h1>Titolo hero</h1><p>Sottotitolo</p></div>
  <div class="contenuto">
    <aside class="sidebar"><b>Menu</b>...</aside>
    <main><p>Contenuto principale...</p></main>
  </div>
</div>

🔗 Vedi anche: vw, vh, % Flex-wrap responsive Grid responsive Variabili nei breakpoint Navbar responsive

Navbar

Barra di navigazione orizzontale — componente completo

Navbar con logo, link, voce attiva e hover

COMPONENTE

Una navbar tipica usa flexbox per allineare logo e link. I link attivi hanno una classe .attivo.
position: sticky; top: 0; la tiene fissa durante lo scroll. z-index alto per stare sopra tutto.

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; }

nav {
  background: #1a1a2e;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.logo {
  font-size: 18px;
  font-weight: 700;
  color: white;
  text-decoration: none;
  letter-spacing: -0.5px;
}
.logo span { color: #5ba4f5; }

.nav-links {
  display: flex;
  list-style: none;
  gap: 4px;
}

.nav-links a {
  display: block;
  padding: 8px 14px;
  color: #aaa;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  transition: background .2s, color .2s;
}
.nav-links a:hover { background: rgba(255,255,255,.08); color: white; }
.nav-links a.attivo { background: #5ba4f5; color: white; font-weight: 600; }

.nav-cta {
  background: #e8d44d;
  color: #000 !important;
  font-weight: 700 !important;
}
.nav-cta:hover { background: #d4c03a !important; }

RISULTATO

▶ HTML usato in questo esempio

<nav>
  <div class="nav-inner">
    <a href="#" class="logo">My<span>Site</span></a>
    <ul class="nav-links">
      <li><a href="#" class="attivo">Home</a></li>
      <li><a href="#">Chi siamo</a></li>
      <li><a href="#">Servizi</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#" class="nav-cta">Contatti</a></li>
    </ul>
  </div>
</nav>
<p style="padding:16px;color:#555;font-family:sans-serif">Contenuto della pagina...</p>

🔗 Vedi anche: Flexbox nella navbar :hover sui link position: sticky Transition sui link

Banner / Hero

Sezione principale a tutta larghezza — con testo, pulsante, gradiente e overlay

Hero section completa

COMPONENTE

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; }

/* Hero con gradiente */
.hero {
  width: 100%;
  min-height: 280px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

/* Cerchio decorativo di sfondo */
.hero::before {
  content: "";
  position: absolute;
  width: 400px; height: 400px;
  background: rgba(91,164,245,0.08);
  border-radius: 50%;
  top: -100px; right: -100px;
}

.hero-content { position: relative; z-index: 1; }

.hero-tag {
  display: inline-block;
  background: rgba(91,164,245,0.2);
  color: #5ba4f5;
  border: 1px solid rgba(91,164,245,0.4);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero h1 {
  color: white;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
}
.hero h1 span { color: #e8d44d; }

.hero p {
  color: #aaa;
  font-size: 16px;
  max-width: 500px;
  line-height: 1.6;
  margin: 0 auto 24px;
}

.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn-hero-p {
  background: #5ba4f5;
  color: white;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: background .2s, transform .2s;
}
.btn-hero-p:hover { background: #3b82f6; transform: translateY(-2px); }

.btn-hero-s {
  background: transparent;
  color: white;
  padding: 12px 28px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,.3);
  text-decoration: none;
  font-size: 15px;
  transition: border-color .2s;
}
.btn-hero-s:hover { border-color: white; }

RISULTATO

▶ HTML usato in questo esempio

<section class="hero">
  <div class="hero-content">
    <div class="hero-tag">Novità 2025</div>
    <h1>Crea siti web <span>bellissimi</span></h1>
    <p>Impara CSS e crea pagine web professionali. Guida completa con esempi pratici.</p>
    <div class="hero-btns">
      <a href="#" class="btn-hero-p">Inizia ora</a>
      <a href="#" class="btn-hero-s">Scopri di più</a>
    </div>
  </div>
</section>

🔗 Vedi anche: Gradiente e immagini Centrare con flexbox position: relative/absolute Bottoni CTA

Card

Componente card — prodotto, articolo, utente — con hover e griglia

Card griglia con hover effect

COMPONENTE

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; padding: 16px; background: #f5f5f5; }

/* Griglia card */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* Card base */
.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform .25s, box-shadow .25s;
  cursor: pointer;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* Immagine card */
.card-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}

/* Badge sull'immagine */
.card-img-wrap {
  position: relative;
  overflow: hidden;
}
.card-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Corpo card */
.card-body { padding: 14px; }
.card-cat {
  font-size: 10px;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 5px;
}
.card-title {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
  line-height: 1.3;
}
.card-desc {
  font-size: 12px;
  color: #777;
  line-height: 1.55;
  margin-bottom: 12px;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-price { font-size: 16px; font-weight: 700; color: #111; }
.card-price-old { font-size: 12px; color: #aaa; text-decoration: line-through; margin-left: 5px; }
.card-btn {
  background: #111;
  color: white;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background .2s;
}
.card-btn:hover { background: #3b82f6; }

RISULTATO

▶ HTML usato in questo esempio

<div class="card-grid">

  <div class="card">
    <div class="card-img-wrap">
      <img class="card-img" src="https://picsum.photos/200/130?1">
      <span class="card-badge">Nuovo</span>
    </div>
    <div class="card-body">
      <div class="card-cat">Elettronica</div>
      <div class="card-title">Prodotto fantastico</div>
      <div class="card-desc">Descrizione breve del prodotto.</div>
      <div class="card-footer">
        <span><span class="card-price">€29</span>
        <span class="card-price-old">€49</span></span>
        <button class="card-btn">Acquista</button>
      </div>
    </div>
  </div>

  <!-- ripeti per altre card -->
</div>

🔗 Vedi anche: Grid per le card Padding e border-radius Badge absolute sulla card box-shadow sulle card Hover sulle card object-fit: cover immagine

Form

Input, label, textarea, select, checkbox, radio — stilati con CSS

Form completo con focus e validazione visiva

COMPONENTE

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; padding: 16px; background: #f5f7fa; }

.form-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  max-width: 420px;
}
.form-card h2 { font-size: 20px; color: #111; margin-bottom: 20px; }

/* Gruppo campo */
.field {
  margin-bottom: 16px;
}

/* Label */
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 5px;
}
.required::after { content: " *"; color: #ef4444; }

/* Input, textarea, select */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  color: #111;
  background: white;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

input:focus, textarea:focus, select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* Stato errore */
input.errore { border-color: #ef4444; }
input.errore:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.msg-errore { font-size: 11px; color: #ef4444; margin-top: 4px; }

/* Stato successo */
input.ok { border-color: #10b981; }

textarea { min-height: 90px; resize: vertical; }

/* Select */
select { cursor: pointer; }

/* Checkbox e Radio */
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  cursor: pointer;
}
.check-row input[type="checkbox"],
.check-row input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: #3b82f6;
  cursor: pointer;
}
.check-row label { margin: 0; font-weight: 400; cursor: pointer; }

/* Pulsante submit */
.btn-submit {
  width: 100%;
  padding: 12px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .15s;
  margin-top: 4px;
}
.btn-submit:hover { background: #2563eb; transform: translateY(-1px); }
.btn-submit:active { transform: none; }

RISULTATO — clicca sui campi!

▶ HTML usato in questo esempio

<div class="form-card">
  <h2>Registrazione</h2>

  <div class="field">
    <label class="required">Nome</label>
    <input type="text" placeholder="Il tuo nome" class="ok">
  </div>

  <div class="field">
    <label class="required">Email</label>
    <input type="email" placeholder="[email protected]" class="errore">
    <div class="msg-errore">Inserisci un'email valida</div>
  </div>

  <div class="field">
    <label>Messaggio</label>
    <textarea placeholder="Scrivi qui..."></textarea>
  </div>

  <div class="field">
    <label>Paese</label>
    <select>
      <option>Italia</option>
      <option>Francia</option>
    </select>
  </div>

  <div class="field">
    <label>Interessi</label>
    <div class="check-row">
      <input type="checkbox" id="c1" checked>
      <label for="c1">Web Design</label>
    </div>
    <div class="check-row">
      <input type="radio" name="pref" id="r1">
      <label for="r1">CSS</label>
    </div>
  </div>

  <button class="btn-submit">Registrati</button>
</div>

🔗 Vedi anche: :focus, :checked, :disabled :valid, :invalid Focus ring accessibile display: block su input

Tabella

Stilare le tabelle HTML — border-collapse, zebra, hover, caption

Tabella completa professionale

COMPONENTE

border-collapse: collapse — unisce i bordi adiacenti (senza si sovrappongono)
border-separate — mantiene bordi separati, con border-spacing si può regolare la distanza
vertical-align — allineamento verticale nelle celle: top, middle, bottom
caption — titolo della tabella stilato con caption-side: top/bottom

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; padding: 16px; background: #f5f5f5; }

.tabella-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-size: 13px;
}

caption {
  caption-side: top;
  font-weight: 700;
  font-size: 15px;
  color: #111;
  padding: 14px 16px 10px;
  text-align: left;
  background: white;
  border-bottom: 2px solid #f0f0f0;
}

/* Intestazione */
thead tr { background: #1a1a2e; }
th {
  padding: 12px 16px;
  text-align: left;
  color: #aaa;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
th:first-child { color: white; }

/* Righe */
td {
  padding: 11px 16px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
  color: #333;
}

/* Zebra striping */
tbody tr:nth-child(even) td { background: #fafafa; }

/* Hover riga */
tbody tr:hover td { background: #eff6ff; }

/* Ultima riga senza bordo */
tbody tr:last-child td { border-bottom: none; }

/* Badge stato */
.badge { display: inline-block; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-ok  { background: #d1fae5; color: #065f46; }
.badge-att { background: #fef3c7; color: #92400e; }
.badge-err { background: #fee2e2; color: #991b1b; }

/* Allineamento numeri a destra */
.num { text-align: right; font-variant-numeric: tabular-nums; }

RISULTATO

▶ HTML usato in questo esempio

<div class="tabella-wrap">
<table>
  <caption>Ordini recenti</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>Cliente</th>
      <th>Prodotto</th>
      <th>Totale</th>
      <th>Stato</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Mario Rossi</td>
      <td>Laptop Pro</td>
      <td class="num">€1.299</td>
      <td><span class="badge badge-ok">Consegnato</span></td>
    </tr>
    <tr>
      <td>002</td>
      <td>Sara Bianchi</td>
      <td>Mouse wireless</td>
      <td class="num">€45</td>
      <td><span class="badge badge-att">In attesa</span></td>
    </tr>
    <tr>
      <td>003</td>
      <td>Luca Verdi</td>
      <td>Tastiera mec.</td>
      <td class="num">€149</td>
      <td><span class="badge badge-err">Annullato</span></td>
    </tr>
  </tbody>
</table>
</div>

🔗 Vedi anche: :nth-child zebra Colori celle border-collapse

Footer

Footer multi-colonna con link, colori e copyright

Footer completo con grid

COMPONENTE

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; }

footer {
  background: #0f172a;
  color: #94a3b8;
  padding: 40px 20px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 32px;
}

/* Colonna brand */
.footer-brand .logo {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: 12px;
}
.footer-brand .logo span { color: #5ba4f5; }
.footer-brand p {
  font-size: 13px;
  line-height: 1.65;
  color: #64748b;
}
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; text-decoration: none; font-size: 14px;
  transition: background .2s, color .2s;
}
.social a:hover { background: #5ba4f5; color: white; }

/* Colonne link */
.footer-col h4 {
  color: white;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a {
  color: #64748b;
  text-decoration: none;
  font-size: 13px;
  transition: color .2s;
}
.footer-col a:hover { color: #5ba4f5; }

/* Copyright */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 16px 20px;
  text-align: center;
  font-size: 12px;
  color: #475569;
  max-width: 900px;
  margin: 0 auto;
}

RISULTATO

▶ HTML usato in questo esempio

<footer>
  <div class="footer-grid">
    <div class="footer-brand">
      <div class="logo">My<span>Site</span></div>
      <p>Creiamo esperienze digitali memorabili.</p>
      <div class="social">
        <a href="#">tw</a>
        <a href="#">ig</a>
        <a href="#">gh</a>
      </div>
    </div>
    <div class="footer-col">
      <h4>Prodotto</h4>
      <ul>
        <li><a href="#">Funzionalità</a></li>
        <li><a href="#">Prezzi</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Azienda</h4>
      <ul>
        <li><a href="#">Chi siamo</a></li>
        <li><a href="#">Lavora con noi</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Supporto</h4>
      <ul>
        <li><a href="#">Documenti</a></li>
        <li><a href="#">Contatti</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">© 2025 MySite. Tutti i diritti riservati.</div>
</footer>

🔗 Vedi anche: Grid multi-colonna Flexbox nel footer Colori dark del footer

Liste

list-style, menu verticale, checklist, numerazione decorata

Liste stilate in tutti i modi

LISTE

CSS

body { font-family: sans-serif; padding: 14px; }
h4 { color: #555; font-size: 12px; text-transform: uppercase;
     letter-spacing: 1px; margin: 14px 0 6px; }

/* 1. Reset lista */
.no-style { list-style: none; padding: 0; }

/* 2. Icona personalizzata con ::before */
.checklis { list-style: none; padding: 0; }
.checklis li { padding: 5px 0 5px 26px; position: relative; font-size: 14px; color: #333; }
.checklis li::before { content: "✓"; position: absolute; left: 0;
  color: #10b981; font-weight: bold; }
.checklis .no::before { content: "✗"; color: #ef4444; }

/* 3. Menu verticale */
.menu-v { list-style: none; padding: 0; width: 200px; }
.menu-v li a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; text-decoration: none;
  color: #444; border-radius: 7px; font-size: 14px;
  transition: background .15s, color .15s;
}
.menu-v li a:hover { background: #eff6ff; color: #3b82f6; }
.menu-v li a.attivo { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.menu-v li a .icon { width: 18px; text-align: center; }

/* 4. Numerazione decorata */
.num-list { list-style: none; padding: 0; counter-reset: mio-counter; }
.num-list li { counter-increment: mio-counter; padding: 6px 0 6px 40px;
  position: relative; font-size: 14px; border-bottom: 1px solid #f0f0f0; }
.num-list li::before {
  content: counter(mio-counter);
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  background: #3b82f6; color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: bold;
}

/* 5. list-style-type valori */
.disc   { list-style-type: disc; }
.circle2{ list-style-type: circle; }
.square2{ list-style-type: square; }
.decim  { list-style-type: decimal; }
.roman  { list-style-type: upper-roman; }
ul, ol  { padding-left: 22px; font-size: 13px; margin: 4px 0; }

RISULTATO

▶ HTML usato in questo esempio

<h4>Checklist</h4>
<ul class="checklis">
  <li>HTML completato</li>
  <li>CSS completato</li>
  <li class="no">JavaScript non ancora</li>
</ul>

<h4>Menu verticale</h4>
<ul class="menu-v">
  <li><a href="#" class="attivo"><span class="icon">🏠</span>Home</a></li>
  <li><a href="#"><span class="icon">👤</span>Profilo</a></li>
  <li><a href="#"><span class="icon">⚙️</span>Impostazioni</a></li>
</ul>

<h4>Numerazione decorata (CSS Counter)</h4>
<ol class="num-list">
  <li>Prima voce</li>
  <li>Seconda voce</li>
  <li>Terza voce</li>
</ol>

🔗 Vedi anche: ::before per icone :first-child, :last-child display: block su li

Bottoni

Tutti i tipi di bottoni — varianti, stati, effetti

Libreria bottoni completa

COMPONENTE

CSS — hover su tutti!

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; padding: 16px; background: #f5f5f5; }
h4 { color: #888; font-size: 11px; text-transform: uppercase;
     letter-spacing: 1px; margin: 16px 0 8px; }

/* BASE */
.btn {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 7px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin: 4px;
  transition: all .2s;
}

/* Varianti colore */
.btn-primary   { background: #3b82f6; color: white; }
.btn-primary:hover   { background: #2563eb; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59,130,246,.4); }
.btn-success   { background: #10b981; color: white; }
.btn-success:hover   { background: #059669; transform: translateY(-1px); }
.btn-danger    { background: #ef4444; color: white; }
.btn-danger:hover    { background: #dc2626; transform: translateY(-1px); }
.btn-warning   { background: #f59e0b; color: white; }
.btn-warning:hover   { background: #d97706; transform: translateY(-1px); }

/* Outline */
.btn-outline-b { background: transparent; color: #3b82f6; border: 2px solid #3b82f6; }
.btn-outline-b:hover { background: #3b82f6; color: white; }
.btn-outline-g { background: transparent; color: #10b981; border: 2px solid #10b981; }
.btn-outline-g:hover { background: #10b981; color: white; }

/* Ghost */
.btn-ghost { background: transparent; color: #555; border: 2px solid #ddd; }
.btn-ghost:hover { background: #f0f0f0; border-color: #bbb; }

/* Dimensioni */
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 5px; }
.btn-lg { padding: 13px 30px; font-size: 16px; border-radius: 10px; }

/* Full width */
.btn-full { display: block; width: 100%; text-align: center; }

/* Icona */
.btn-icon { display: inline-flex; align-items: center; gap: 7px; }

/* Stato loading */
.btn-loading { position: relative; color: transparent !important; }
.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Disabilitato */
.btn:disabled, .btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

RISULTATO

▶ HTML usato in questo esempio

<h4>Varianti</h4>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>

<h4>Outline</h4>
<button class="btn btn-outline-b">Outline blu</button>
<button class="btn btn-outline-g">Outline verde</button>
<button class="btn btn-ghost">Ghost</button>

<h4>Dimensioni</h4>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Medium</button>
<button class="btn btn-primary btn-lg">Large</button>

<h4>Stati</h4>
<button class="btn btn-primary btn-loading">Loading</button>
<button class="btn btn-primary btn-disabled">Disabilitato</button>
<button class="btn btn-primary btn-icon">★ Con icona</button>

🔗 Vedi anche: Transition su :hover :hover :active :disabled Loading spinner padding, border-radius

Quiz CSS

Metti alla prova le tue conoscenze — 20 domande su tutto il CSS

0

punti

0

corrette

0/20

completate

Cheatsheet CSS

Tutte le proprietà essenziali a colpo d'occhio

📦 Box Model

margintop right bottom left

paddingtop right bottom left

borderspessore stile colore

border-radiuspx / %

box-sizingborder-box ✓

width / heightpx % auto

min/max-widthpx / % / none

🎨 Colori & Sfondo

colornome / #hex / rgb / hsl

backgroundcolor / image / gradient

background-sizecover / contain / px

background-poscenter / top / 50% 50%

opacity0 – 1

linear-gradient(dir, c1, c2)

radial-gradient(shape, c1, c2)

🔤 Testo

font-familyArial / sans-serif…

font-sizepx / rem / em / %

font-weightnormal / bold / 100-900

font-stylenormal / italic

text-alignleft / center / right / justify

text-decorationnone / underline / line-through

text-transformuppercase / lowercase / capitalize

line-height1.5 / px / normal

letter-spacingpx / em

text-shadowx y blur colore

📐 Flexbox (container)

display: flexattiva flexbox

flex-directionrow / column / *-reverse

justify-contentflex-start/end/center/space-*

align-itemsflex-start/end/center/stretch

flex-wrapnowrap / wrap

gappx (spazio tra items)

📐 Flexbox (item)

flex1 / grow shrink basis

align-selfsovrascrive align-items

order0 (default), ordine visivo

flex-growquanto cresce (0=no, 1=sì)

flex-shrinkquanto si restringe

flex-basisdimensione base

🔲 CSS Grid

display: gridattiva grid

grid-template-cols1fr 2fr / repeat(3,1fr)

grid-template-rowsauto 100px 1fr

gapriga colonna

grid-columnspan 2 / 1 / 3

grid-areanome area template

📍 Position

positionstatic/relative/absolute/fixed/sticky

top/right/bottom/leftpx / % / auto

z-indexnumero (più alto = sopra)

floatleft / right / none

clearleft / right / both

✨ Effetti

box-shadowx y blur spread colore

text-shadowx y blur colore

filterblur / brightness / grayscale…

clip-pathpolygon() circle()

aspect-ratio16/9 / 1/1 / auto

🎬 Animazioni

transitionprop dur timing delay

animationnome dur timing iter dir

@keyframesfrom/to o 0% 100%

transformtranslate/rotate/scale/skew

transform-origincentro rotazione

animation-play-statepaused / running

📱 Responsive

@media (max-width)fino a quella larghezza

@media (min-width)da quella larghezza in su

vw / vh% del viewport

clamp(min,val,max)valore adattivo

calc()calcoli con unità miste

min() / max()scegli il minore/maggiore

🎯 Selettori chiave

.classeelementi con quella classe

#idelemento unico

A BB discendente di A

A > BB figlio diretto di A

A + BB fratello adiacente

[attr="val"]attributo con valore

:hover :focusstato elemento

::before ::aftercontenuto virtuale

🔢 Specificità

!importantvince su tutto (evita)

inline style(1,0,0,0)

#id(0,1,0,0)

.classe [attr] :pseudo(0,0,1,0)

tag ::pseudo-el(0,0,0,1)

* (universale)(0,0,0,0)

📦 Overflow & Display

overflowvisible/hidden/scroll/auto

text-overflowellipsis (+ overflow:hidden)

white-spacenowrap/pre/pre-wrap

display: nonenasconde (no spazio)

visibility:hiddennasconde (spazio rimane)

object-fitcover/contain (img)

🎨 Variabili CSS

:root { --x: val }definisce variabile globale

var(--x)usa la variabile

var(--x, fallback)con valore di default

el { --x: val }variabile locale all'elemento