Il tuo primo CSS: la pagina prende i colori

Conosci il linguaggio CSS e guarda il tuo sito web smettere di sembrare del 1995.

Te lo mostro: cos’è il CSS

HTML è lo scheletro della pagina. CSS è il vestito: colori, font, dimensioni, spazi. Si scrive in un file separato e assomiglia a questo:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Leggilo ad alta voce così: “Ogni titolo h1, coloralo blu scuro. Ogni paragrafo p, fallo 18 pixel e grigio scuro.”

Ogni regola ha tre parti:

un selettore (h1) – a cosa si applica la regola,
una proprietà (color) – cosa stiamo cambiando,
un valore (darkblue) – in cosa lo stiamo cambiando.

I due punti separano proprietà e valore, e ogni riga finisce con un punto e virgola. Attenzione a quei punti e virgola – uno dimenticato è l’errore CSS più comune al mondo.

Collegarlo: dì alla pagina del tuo CSS

Dentro la cartella my-website, crea un nuovo file chiamato style.css.
Aggiungi questa riga dentro <head> di ogni pagina HTML:
```
<link rel="stylesheet" href="style.css">
```
Significa: “Troverai l’aspetto di questa pagina nel file style.css.”
Verifica che funzioni – metti qualcosa di impossibile da non notare in style.css:
```
body {
  background-color: yellow;
}
```
Salva, aggiorna la pagina. È tutto giallo? Funziona! (Puoi togliere il giallo adesso.)

I colori in CSS

Puoi scrivere i colori come parole inglesi (red, darkblue, lightgray, tomato, gold…) oppure più precisamente come un codice che inizia con il cancelletto: #1d4ed8 è blu, #16a34a è verde. Mescola qualsiasi codice colore ti piace su htmlcolorcodes.com.

Ora tocca a te 💪

Vesti il tuo sito web con i primi colori. In style.css, imposta:

il colore di sfondo dell’intera pagina (body),
il colore dei titoli (h1, h2),
la dimensione e il colore dei paragrafi (p).

Soluzioni – ovviamente, modifica pure i colori:

🏫 Sito web della scuola – soluzione

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Il blu si adatta bene a un sito scolastico – trasmette fiducia (per questo lo usano anche le banche!).

🙋 Sito web personale – soluzione

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

Un sito personale può essere più audace – l’arancione caldo dice “questo posto è vivo”.

🌍 Diario di viaggio – soluzione

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Verde come foreste e prati – perfetto per un diario di viaggio.

⚽ Sito web del club – soluzione

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

La scelta migliore sono i colori del club – giocate in rosso? Allora rosso!

⚠️

Regola di leggibilità: testo scuro su sfondo chiaro (o viceversa). Giallo chiaro su bianco è illeggibile. Quando non sei sicuro, chiedi a qualcuno: “Riesci a leggerlo comodamente?”

✅

Controlla da solo: Il tuo sito web ha i suoi colori – e siccome il CSS vive in un file collegato a ogni pagina, tutte le pagine si sono colorate insieme. Furbo, no?

Cosa porti via da questa lezione

CSS = l’aspetto. Si scrive in un file style.css, collegato con un tag <link> in <head>.
La regola: selettore { proprietà: valore; } – e non dimenticare i punti e virgola.
Un file CSS veste l’intero sito web in una volta.