Lezione 5 · 60-90 minuti

🎨 Un po' di stile con il CSS

Obiettivo: collegare un foglio di stile CSS al sito e imparare le regole base per cambiare colori, font e layout.

🎒 Ci serve

Il sito creato nelle lezioni precedenti: index.html, chi-sono.html, hobby.html

🧠 Un po' di teoria

Finora hai lavorato solo con l'HTML e realizzato le basi del tuo sito: funziona tutto, ma da vedere è un po' spoglio, quasi tutto in bianco e nero. È il momento di diventare creativi e aggiungere un po' di stile!
Per farlo serve un file CSS (Cascading Style Sheets — fogli di stile a cascata): contiene "ricette" che dicono al browser come devono apparire gli elementi della pagina. Scoprirai tra poco cosa c'entrano le cascate.

🔨 Costruisci: dai colore al tuo sito

Nella cartella mio-primo-sito, crea una sottocartella css, e dentro un file di testo chiamato stile.css.

In ogni pagina HTML (index.html, chi-sono.html, hobby.html...), dentro head, aggiungi questa riga per collegare il foglio di stile:

<link type="text/css" rel="stylesheet" href="css/stile.css" />

Un nuovo tag, link! Permette di collegare al documento HTML elementi esterni "utili". L'attributo type dice che è un file CSS di tipo testo; rel dice la sua relazione col documento principale (è il suo foglio di stile); href, come già sai, indica il file.

Apri stile.css con l'editor e scrivi la tua prima regola:

body {
  font-family: sans-serif;
}

Salva, aggiorna una delle pagine html: è cambiato il font? Prova a cambiare sans-serif con serif, cursive, fantasy o monospace.

Questa regola dice al browser come mostrare tutto quello che sta dentro il tag body. Aggiungi altre righe alla stessa regola:

body {
  font-family: sans-serif;
  font-size: 20px;
  margin: 2em;
}

Ora aggiungi una seconda regola, questa volta per il titolo h1:

h1 {
  text-align: center;
  color: white;
  background-color: blue;
  border-radius: 0.5em;
  padding: 0.5em;
}

     Salva e aggiorna: il titolo ora ha uno sfondo colorato!

Anche il CSS richiede un po' di ordine: le maiuscole e le minuscole vanno rispettate come in HTML; ogni selettore ha le sue regole tra parentesi graffe { }; ogni regola ha i due punti : tra nome e valore e termina con un punto e virgola ;. Anche qui la spaziatura non conta per il browser, ma l'indentazione aiuta a leggere il codice.

Non abbiamo ancora spiegato cosa c'entrano le "cascate" nel nome CSS! Prova ad aggiungere questa regola e guarda cosa succede:

h1 {
  font-family: fantasy;
}

Con una regola hai impostato un font per tutto il documento (selettore body), poi con una nuova regola hai cambiato il comportamento solo di una sua parte, il titolo (selettore h1) — a cascata, appunto. Nota che tutte le altre regole del body restano valide anche per h1 (per esempio il font-size, se non lo hai sovrascritto).

🚀 Sfide

⭐ Stella

Cambia i colori di sfondo e testo di h1 con altri a tua scelta.

⭐⭐ Cometa

Aggiungi una regola per il tag p (per esempio color o font-size) e una per ul o li.

⭐⭐⭐ Razzo

Aggiungi una regola per il tag a (i link), per esempio color, e prova ad aggiungere anche a:hover { ... }: cosa succede quando passi il mouse sopra un link?

📝 Quiz: mettiti alla prova

Cosa significa CSS?

Computer Style System.

Cascading Style Sheets.

Colorful Standard Sheets.

Quale tag collega un file CSS a una pagina HTML?

<style>

<css>

<link>

In una regola CSS come "body { color: blue; }", cosa è "body"?

Il selettore: dice a quale elemento si applica la regola.

Il valore della regola.

Un commento.

📚 Da guardare o leggere

Le basi del CSS (MDN) — selettori, proprietà e tanti altri esempi da provare.

🎉 Hai finito il corso!

Ora hai un piccolo sito con più pagine, immagini, link e uno stile tutto tuo. Se vuoi continuare a sperimentare, guarda la sezione "Progetti da provare" nella pagina Web design, oppure chiedi a un mentor nuove sfide.