Il framework CSS più leggero al mondo: nessuna dipendenza, nessun JavaScript obbligatorio. Impara a costruire layout responsive, navigazioni, modal, accordion, animazioni e dark mode con poche classi. Con esempi pratici e interattivi.
Introduzione a W3.CSS
W3.CSS è un framework CSS creato da W3Schools che permette di costruire siti web moderni e responsive senza JavaScript e senza dipendenze esterne. Il file pesa meno di 30 KB e include centinaia di classi pronte all'uso.
Caratteristica
Descrizione
Leggero
~28 KB, un singolo file CSS
No dipendenze
Non richiede jQuery o altri framework
Responsive
Layout mobile-first integrato
Cross-browser
Funziona su tutti i browser moderni
Dark mode
Tema scuro incluso
Rispetto a Bootstrap, W3.CSS è più snello e non richiede JavaScript per la maggior parte dei componenti. È ideale per siti statici, portfolio e landing page.
💡 Nota: W3.CSS non sostituisce la conoscenza di CSS puro — è uno strumento per velocizzare il lavoro. Imparare prima il CSS di base rimane fondamentale.
Setup e inclusione
Per usare W3.CSS basta includere il file CSS nel <head> della pagina. Puoi usare il CDN di W3Schools o scaricare il file.
Via CDN (consigliato)
HTML — inclusione CDN
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Il mio sito con W3.CSS</title>
</head>
<body>
<div class="w3-container w3-blue">
<h1>Benvenuto in W3.CSS!</h1>
</div>
<div class="w3-container">
<p>Il framework CSS più leggero del mondo.</p>
</div>
</body>
</html>
Struttura base della pagina
Tutte le classi W3.CSS iniziano con il prefisso w3-. La classe fondamentale è w3-container che aggiunge padding orizzontale.
Classe
Effetto
w3-container
Padding left/right 16px
w3-content
Container centrato max-width 980px
w3-panel
Padding top/bottom 0.01em e 16px
w3-main
Margine automatico per sidebar layout
💡 Tip: Usa sempre il tag <meta name="viewport"> per garantire il comportamento responsive su mobile.
Colori
W3.CSS include un sistema di colori molto ricco: ogni colore ha una classe background e una text. I nomi seguono una convenzione semplice e intuitiva.
I container in W3.CSS gestiscono la struttura del layout. Permettono di centrare il contenuto e controllare la larghezza massima della pagina.
HTML — containers e layout base
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- Header a tutta larghezza -->
<div class="w3-container w3-teal w3-padding-64">
<h1>Il mio sito</h1>
<p>Header a tutta larghezza</p>
</div>
<!-- Contenuto centrato con larghezza massima -->
<div class="w3-content w3-padding" style="max-width:800px">
<h2>Titolo della sezione</h2>
<p>Questo testo è centrato e limitato a 800px di larghezza.</p>
</div>
<!-- Panel con sfondo -->
<div class="w3-panel w3-light-grey">
<p>Un panel con sfondo grigio chiaro e padding verticale.</p>
</div>
Classe padding
Descrizione
w3-padding
Padding 8px top/bottom, 16px left/right
w3-padding-small
Padding 4px top/bottom, 8px left/right
w3-padding-large
Padding 12px top/bottom, 24px left/right
w3-padding-16
Padding 16px su tutti i lati
w3-padding-32
Padding 32px su tutti i lati
w3-padding-64
Padding 64px su tutti i lati
Testo e Font
W3.CSS include classi per controllare dimensioni, allineamento e stile del testo senza scrivere CSS personalizzato.
HTML — stili testo
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- Dimensioni -->
<p class="w3-tiny">Testo tiny (10px)</p>
<p class="w3-small">Testo small (12px)</p>
<p>Testo normale (15px, default)</p>
<p class="w3-large">Testo large (18px)</p>
<p class="w3-xlarge">Testo xlarge (24px)</p>
<p class="w3-xxlarge">Testo xxlarge (36px)</p>
<p class="w3-xxxlarge">Testo xxxlarge (48px)</p>
<p class="w3-jumbo">Testo jumbo (64px)</p>
<hr>
<!-- Allineamento -->
<p class="w3-left-align">Allineato a sinistra</p>
<p class="w3-center">Centrato</p>
<p class="w3-right-align">Allineato a destra</p>
<!-- Font monospace per codice -->
<p class="w3-code">Testo in stile codice monospace</p>
Font di Google
W3.CSS si integra facilmente con Google Fonts includendo il link nel <head> e usando la classe w3-font-*.
HTML — Google Font
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body { font-family: 'Roboto', sans-serif; }
</style>
<div class="w3-container">
<h2>Titolo con Roboto</h2>
<p>Paragrafo con il font Roboto da Google Fonts.</p>
</div>
Padding e Margin
W3.CSS offre classi pronte per gestire spacing senza scrivere CSS. Le classi seguono uno schema numerico da 0 a 64.
Classe margin
Valore
w3-margin
16px tutti i lati
w3-margin-top
16px solo sopra
w3-margin-bottom
16px solo sotto
w3-margin-left
16px solo sinistra
w3-margin-right
16px solo destra
HTML — spacing con classi W3.CSS
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container w3-blue w3-margin w3-padding-32">
<p>Questo div ha margin 16px e padding 32px</p>
</div>
<div class="w3-container w3-green w3-margin-top w3-padding-16">
<p>Questo div ha margin solo in alto e padding 16px</p>
</div>
<!-- Centrare un elemento -->
<div class="w3-container w3-orange w3-padding" style="width:50%; margin:auto">
<p class="w3-center">Elemento centrato al 50%</p>
</div>
Bordi e Arrotondamento
W3.CSS semplifica l'aggiunta di bordi e angoli arrotondati con classi dedicate.
W3.CSS non ha una classe w3-alert dedicata, ma è facilissimo creare alert colorati combinando le classi di base. I panel con bordi laterali funzionano come note contestuali.
HTML — alert e messaggi
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- Alert successo -->
<div class="w3-panel w3-green w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-large w3-display-topright">×</span>
<h3>✅ Successo!</h3>
<p>L'operazione è stata completata con successo.</p>
</div>
<!-- Alert errore -->
<div class="w3-panel w3-red">
<h3>❌ Errore</h3>
<p>Si è verificato un errore. Riprova più tardi.</p>
</div>
<!-- Alert attenzione -->
<div class="w3-panel w3-yellow">
<h3>⚠️ Attenzione</h3>
<p>Controlla i dati inseriti prima di continuare.</p>
</div>
<!-- Nota informativa -->
<div class="w3-panel w3-blue">
<h3>ℹ️ Info</h3>
<p>Puoi personalizzare questo componente con qualsiasi colore W3.CSS.</p>
</div>
Tabelle
Le tabelle W3.CSS sono già stilizzate con la classe w3-table. Classi aggiuntive gestiscono striping, hover e bordi.
Crea una pagina profilo con: progress bar per le competenze (HTML 90%, CSS 80%, JS 70%), una card con avatar circolare, e un pulsante che apre un modal con i dettagli di contatto. Usa solo W3.CSS!
Esercizi pratici
🏆 Esercizio 1 — Pagina portfolio
Crea una landing page con: navbar nera con 4 voci + pulsante "Contatti" a destra, sezione hero con sfondo teal e testo centrato, 3 card affiancate con icona, titolo e descrizione, footer scuro. Usa solo classi W3.CSS.
🏆 Esercizio 2 — Dashboard
Costruisci una dashboard con: sidebar blu laterale con menu a 5 voci, area main con 4 card statistiche affiancate (2+2), tabella con dati fittizi e hover, progress bar per 3 metriche. Aggiungi un toggle per aprire/chiudere la sidebar.
🏆 Esercizio 3 — Form di contatto
Crea un form di contatto con: input nome, email, messaggio con stile W3.CSS (w3-input, w3-select), validazione visiva con bordi rossi/verdi, alert di conferma che appare dopo l'invio, e un modal di ringraziamento.
Hai imparato le basi e i componenti principali di W3.CSS. Ecco i prossimi passi consigliati:
🔗 Documentazione ufficiale: w3schools.com/w3css
🎨 Prova i temi colore (w3-theme-*) per personalizzare l'aspetto globale
📱 Studia le classi di visibilità responsive per ottimizzare il mobile
⚡ Combina W3.CSS con JavaScript vanilla per componenti avanzati
🆚 Confronta con Bootstrap e Tailwind per scegliere il framework giusto
🎓 Corso completato! Ora hai tutti gli strumenti per costruire siti web moderni e responsive con W3.CSS. Metti in pratica le competenze con i progetti degli esercizi!
