W3.CSS · Marco Consiglio

🗺️ Cos'è W3.CSS — semplicità didattica, un solo file CSS

W3.CSS è un framework creato da W3Schools, pensato per essere estremamente semplice da imparare: un unico file CSS di circa 25KB, nessuna dipendenza JavaScript obbligatoria (a differenza di Bootstrap/Materialize), e classi con nomi molto diretti (w3-red, w3-large) invece di sistemi di naming più complessi.

È spesso la prima scelta per chi si avvicina ai framework CSS per la prima volta, proprio per il basso numero di concetti da imparare rispetto a Bootstrap o Tailwind.

⚙️ Includere W3.CSS via CDN

✅ Un SOLO file, senza script JavaScript da includere separatamente — la maggior parte dei componenti (accordion, modal, tab) usa CSS puro con piccoli helper JavaScript opzionali solo dove strettamente necessario per il comportamento dinamico (es. aprire/chiudere un modal).

📦 Container — nomi di classe diretti e descrittivi

<div class="w3-container"> <h1>Titolo</h1> <p>Contenuto con padding orizzontale automatico.</p> </div> <div class="w3-panel w3-pale-blue w3-border"> <p>Un pannello con sfondo e bordo colorato.</p> </div>

Anteprima w3-panel

Un pannello con sfondo colorato.

💡 w3-container applica principalmente padding orizzontale, molto più semplice del sistema container/container-fluid di Bootstrap con le sue varianti per breakpoint — coerente con la filosofia di W3.CSS di ridurre il numero di concetti da imparare.

🎨 Colori predefiniti — nomi diretti invece di scale numeriche

A differenza della scala numerica di Tailwind (blue-600) o dei nomi semantici di Bootstrap (primary, danger), W3.CSS usa nomi di colore DIRETTI E LETTERALI.

<div class="w3-red w3-text-white">Sfondo rosso</div> <div class="w3-pale-green">Verde pallido</div> <div class="w3-amber">Ambra</div>

Approccio	Esempio classe	Framework
Nome letterale diretto	`w3-red`, `w3-amber`	W3.CSS
Nome semantico	`bg-danger`, `bg-warning`	Bootstrap
Scala numerica	`bg-red-600`	Tailwind

⚠️ Il vantaggio della semplicità (nomi diretti, facili da ricordare) ha un costo: cambiare il colore "di errore" in tutto un sito richiederebbe modificare OGNI singola occorrenza di w3-red, mentre in Bootstrap basterebbe ridefinire cosa significa danger in un unico punto — un compromesso tra semplicità immediata e manutenibilità a lungo termine.

📱 Classi responsive — nascondere/mostrare per dimensione

<div class="w3-hide-small"> Nascosto su schermi piccoli </div> <div class="w3-col m6 l4""> Colonna: piena larghezza su mobile (default), metà su medium, un terzo su large </div>

Classe	Effetto
`w3-hide-small`	Nasconde l'elemento su schermi piccoli (mobile)
`w3-hide-medium`	Nasconde l'elemento su schermi medi (tablet)
`w3-hide-large`	Nasconde l'elemento su schermi grandi (desktop)

💡 w3-col è l'equivalente concettuale di col in Bootstrap/Materialize, ma con nomi di breakpoint scritti per esteso (m, l) invece di trattini con numeri — nuovamente, priorità alla leggibilità immediata rispetto alla compattezza.

🎬 Animazioni CSS native integrate

<div class="w3-animate-top"> Appare scendendo dall'alto </div> <div class="w3-animate-fading"> Dissolvenza in loop continuo </div> <div class="w3-spin"> Rotazione continua (utile per icone di caricamento) </div>

Anteprima w3-spin

✅ Queste animazioni sono implementate con @keyframes CSS puro (lo stesso meccanismo di base che si scriverebbe manualmente) — W3.CSS le fornisce già pronte con nomi di classe descrittivi, risparmiando la scrittura delle regole @keyframes per gli effetti più comuni.

🧩 Applicazioni tipiche

Tipologia	Uso tipico
Progetti didattici introduttivi	Primo approccio ai framework CSS, poche classi da memorizzare
Siti semplici senza build step	Pagine statiche dove un singolo file CDN è sufficiente
Prototipi con animazioni base	Demo che richiedono effetti di apparizione/dissolvenza senza scrivere CSS custom
Progetti con vincoli di peso	Contesti dove anche i ~25KB extra di Bootstrap sono da evitare

🎓 Esercitazioni pratiche

Pannelli colorati con nomi diretti

Crea 3 pannelli w3-panel con colori diversi (w3-pale-red, w3-pale-yellow, w3-pale-green) per rappresentare tre stati (errore, avviso, successo).

⏱ 15 min📦 1 file HTML💻 Individuale

Layout responsive con w3-col

Costruisci una griglia a 3 colonne (w3-col l4) che diventa 2 colonne su tablet (m6) e impilata su mobile.

⏱ 20 min📦 1 file HTML💻 Individuale

Card con animazione di ingresso

Crea una card che appare con w3-animate-top al caricamento della pagina, includendo un'icona con w3-spin per simulare un caricamento.

⏱ 15 min📦 1 file HTML💻 Individuale

W3.CSS — Il framework leggero di W3Schools

Report Quiz

🎓 Attestato di Competenze sbloccato!