← BACK TO THE SERIESSviluppo web da zero · ゼロからのウェブ開発

2026-08-01CH.07 / 24

CSS: lo stile dell'interfaccia

07 - CSS: lo stile dell'interfaccia

Finora abbiamo costruito l'impalcatura della nostra pagina HTML. Tutto funziona, ma... diciamolo: è un po' triste. Bianco, nero, tutto attaccato, font anonimo. Perfetto per un necrologio, meno per una web app moderna.

È qui che entra in gioco il nostro amico CSS: il linguaggio che dà stile, colori e forma alle pagine web. Se l'HTML è lo scheletro, il CSS è il vestito, l'espressione e l'eleganza.

✨ Che cos'è il CSS?

CSS sta per Cascading Style Sheets, fogli di stile a cascata. Fu introdotto a metà anni '90, quando i siti cominciavano ad aver bisogno non solo di testi e link ma anche di un layout gradevole e coerente. Prima del CSS ogni browser faceva un po' come voleva: immagina il caos.

Oggi il CSS è lo standard universale per definire lo stile delle pagine web. Con il CSS possiamo:

cambiare colori, font e spaziature
disporre gli elementi in griglia o in riga
gestire animazioni, transizioni e visibilità
rendere un sito responsive, cioè adattabile a ogni schermo

🎯 Selettori: dire al browser "voglio modificare questo"

Per applicare uno stile a un elemento dobbiamo prima selezionarlo. Il CSS funziona così:

CSS · コード

selettore {
  proprietà: valore;
}

Per esempio:

CSS · コード

h1 {
  color: navy;
}

I selettori più comuni sono tre:

per tipo di elemento: p, h1, form
per classe, col punto: .box, .button-primary
per ID, col cancelletto: #form-iscrizione

CSS · コード

1#titolo {
2  font-size: 24px;
3}
4
5.button {
6  background-color: black;
7  color: white;
8}

E quando usare l'uno o l'altro? Regola pratica:

il tag per gli stili generici, validi per tutti gli elementi di quel tipo
la classe quando vuoi riutilizzare lo stile su più elementi: è il selettore che userai il 90% delle volte
l'ID per un solo elemento specifico, perché deve essere univoco nella pagina

❔ Come si applica, concretamente?

Ci sono tre modi per portare il CSS in una pagina HTML.

1. Inline, direttamente sull'elemento con l'attributo style:

HTML · コード

<p style="color: red;">Attenzione: il nemico è alle porte!</p>

Semplice e veloce, ma poco riutilizzabile: sporca il codice.

2. Interno, dentro un tag <style> nell'<head>:

HTML · コード

1<head>
2  <style>
3    p {
4      color: navy;
5    }
6  </style>
7</head>

Va bene per prototipi o pagine singole; appena la pagina cresce, diventa difficile da mantenere.

3. Esterno, in un file .css separato collegato con un <link>:

HTML · コード

<!-- nell'HTML -->
<link rel="stylesheet" href="stile.css" />

CSS · コード

1/* nel file stile.css */
2p {
3  color: darkgreen;
4}

Riutilizzabile, pulito, mantenibile: è il metodo usato nei progetti reali, ed è quello che useremo noi.

📦 Il box model: tutto è una scatola

Nel mondo CSS ogni elemento è una scatola, e ogni scatola ha quattro strati:

il contenuto: il testo, l'immagine, quello che c'è dentro
il padding: lo spazio interno, tra contenuto e bordo
il border: il bordo della scatola
il margin: lo spazio esterno, verso gli altri elementi

Capire il box model è fondamentale per allineare, distanziare e impaginare. Quando un elemento "non si sposta come dovrebbe", nove volte su dieci la risposta è qui: apri i DevTools, ispezionalo, e guarda il diagramma della scatola nella tab Elements.

📐 Flexbox: l'alleato per l'impaginazione

Una volta i layout si costruivano con float e margini calcolati a mano: un incubo. Con Flexbox disponi gli elementi in riga o in colonna, li centri facilmente e controlli spazi e comportamenti responsive.

CSS · コード

1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

Header, card, footer, moduli: con Flexbox impagini praticamente tutto.

📱 Media query: il sito si adatta a ogni schermo

Con le media query cambi lo stile in base alla dimensione dello schermo:

CSS · コード

1@media (max-width: 600px) {
2  .form-container {
3    flex-direction: column;
4  }
5}

È questo che rende un sito responsive: usabile sul monitor della scrivania come sul telefono in metropolitana.

🛠️ Framework CSS: perché reinventare tutto?

Scrivere CSS da zero va benissimo per imparare, ma sui progetti grandi può diventare faticoso. Per questo esistono framework CSS con classi già pronte. Uno dei più diffusi oggi è Tailwind CSS, che segue l'approccio utility-first: invece di scrivere regole personalizzate, componi lo stile con classi predefinite.

HTML · コード

<button class="bg-black text-white py-2 px-4 rounded">
  Invia
</button>

Niente file CSS da scrivere: le classi fanno tutto. Per ora però niente framework: prima si imparano le basi, poi si scelgono le scorciatoie.

💡 Vestiamo il modulo dei Guardiani

Riprendiamo il modulo del capitolo scorso e diamogli vita con del CSS puro. Riscriviamo index.html aggiungendo le classi. E nota un dettaglio: i <br /> di ripiego che usavamo per andare a capo spariscono. Ora a spaziare ci pensa il CSS, come si deve.

HTML · コード

1<!DOCTYPE html>
2<html lang="it">
3<head>
4  <meta charset="UTF-8" />
5  <title>Arruolamento Guardiani della Notte</title>
6  <!-- link al foglio di stile -->
7  <link rel="stylesheet" href="guardiani.css" />
8</head>
9<body>
10  <h1 id="titolo-pagina">Modulo di adesione ai Guardiani</h1>
11
12  <form class="form-dark">
13    <label for="name">Nome:</label>
14    <input type="text" id="name" name="name" class="campo" required />
15
16    <label for="lastname">Cognome:</label>
17    <input type="text" id="lastname" name="lastname" class="campo" required />
18
19    <label for="email">Email:</label>
20    <input type="email" id="email" name="email" class="campo" required />
21
22    <label>
23      <input type="checkbox" name="oath" required />
24      Accetto di servire fino alla morte 🧊
25    </label>
26
27    <button class="btn-invio">Entra nella Guardia</button>
28  </form>
29</body>
30</html>

E nella stessa cartella creiamo il file guardiani.css:

CSS · コード

1/* la pagina: sfondo scuro da Barriera */
2body {
3  background-color: #1a1a1a;
4  font-family: sans-serif;
5}
6
7/* selettore per ID */
8#titolo-pagina {
9  text-align: center;
10  font-size: 32px;
11  color: #f2f2f2;
12}
13
14/* selettore per classe: il form */
15.form-dark {
16  background-color: #2e2e2e;
17  padding: 20px;
18  border-radius: 8px;
19  max-width: 500px;
20  margin: 40px auto;
21  color: white;
22}
23
24/* i campi di testo */
25.campo {
26  display: block;
27  width: 100%;
28  margin-top: 8px;
29  margin-bottom: 16px;
30  padding: 8px;
31  background: #444;
32  border: none;
33  border-radius: 4px;
34  color: white;
35}
36
37/* il pulsante */
38.btn-invio {
39  display: block;
40  margin-top: 16px;
41  background-color: #000;
42  color: white;
43  padding: 10px 16px;
44  border: none;
45  border-radius: 6px;
46  cursor: pointer;
47}
48
49.btn-invio:hover {
50  background-color: #222;
51}

Ricarica la pagina nel browser: dark, serio, leggibile. Un look degno della Guardia della Notte. E nota il .btn-invio:hover: quel :hover è una pseudo-classe, uno stile che si attiva solo quando il mouse è sull'elemento. Il primo assaggio di interattività, senza una riga di JavaScript.

✅ Conclusione

Il CSS è ciò che trasforma una pagina da grezza a curata, da leggibile a memorabile. E non è solo estetica: è usabilità, accessibilità, identità. Col tempo imparerai a maneggiarlo come un linguaggio visivo, e quando scoprirai quanto potere hai nel posizionare, animare e trasformare gli elementi... ti divertirai, tanto.

Nel prossimo capitolo arriva il JavaScript, l'anima interattiva del frontend. Perché dopo che la pagina è strutturata e stilizzata... è ora di farla muovere. ⚡