Mattia.sala: Crea Lezione 5: Un po di stile con il CSS (da PDF Sushi Card)

2026-08-03T20:54:59Z

Crea Lezione 5: Un po di stile con il CSS (da PDF Sushi Card)

Nuova pagina

{{Corso/Pagina|corso=webdesign|1=Lezione 5 · 60-90 minuti|2=🎨 Un po' di stile con il CSS|obiettivo=Obiettivo: '''collegare un foglio di stile CSS al sito e imparare le regole base per cambiare colori, font e layout.'''}}
== 🎒 Ci serve ==

{{Corso/Materiali}}
*Il sito creato nelle lezioni precedenti: <code>index.html</code>, <code>chi-sono.html</code>, <code>hobby.html</code>
{{Corso/FineMateriali}}

== 🧠 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!
</br>
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 ==

{{Corso/Passi}}
{{Corso/Passo|1=
Nella cartella <code>mio-primo-sito</code>, crea una sottocartella <code>css</code>, e dentro un file di testo chiamato <code>stile.css</code>.
}}
{{Corso/Passo|1=
In ogni pagina HTML (<code>index.html</code>, <code>chi-sono.html</code>, <code>hobby.html</code>...), dentro <code>head</code>, aggiungi questa riga per collegare il foglio di stile:
<pre>
<link type="text/css" rel="stylesheet" href="css/stile.css" />
</pre>
Un nuovo tag, <code>link</code>! Permette di collegare al documento HTML elementi esterni "utili". L'attributo <code>type</code> dice che è un file CSS di tipo testo; <code>rel</code> dice la sua relazione col documento principale (è il suo foglio di stile); <code>href</code>, come già sai, indica il file.
}}
{{Corso/Passo|1=
Apri <code>stile.css</code> con l'editor e scrivi la tua prima regola:
<pre>
body {
font-family: sans-serif;
}
</pre>
Salva, aggiorna una delle pagine html: è cambiato il font? Prova a cambiare <code>sans-serif</code> con <code>serif</code>, <code>cursive</code>, <code>fantasy</code> o <code>monospace</code>.
}}
{{Corso/Passo|1=
Questa regola dice al browser come mostrare tutto quello che sta dentro il tag <code>body</code>. Aggiungi altre righe alla stessa regola:
<pre>
body {
font-family: sans-serif;
font-size: 20px;
margin: 2em;
}
</pre>
}}
{{Corso/Passo|1=
Ora aggiungi una seconda regola, questa volta per il titolo <code>h1</code>:
<pre>
h1 {
text-align: center;
color: white;
background-color: blue;
border-radius: 0.5em;
padding: 0.5em;
}
</pre>
Salva e aggiorna: il titolo ora ha uno sfondo colorato!
{{Corso/Tip|1=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 <code>{ }</code>; ogni regola ha i due punti <code>:</code> tra nome e valore e termina con un punto e virgola <code>;</code>. Anche qui la spaziatura non conta per il browser, ma l'indentazione aiuta a leggere il codice.}}
}}
{{Corso/Passo|1=
Non abbiamo ancora spiegato cosa c'entrano le "cascate" nel nome CSS! Prova ad aggiungere questa regola e guarda cosa succede:
<pre>
h1 {
font-family: fantasy;
}
</pre>
Con una regola hai impostato un font per tutto il documento (selettore <code>body</code>), poi con una nuova regola hai cambiato il comportamento solo di una sua parte, il titolo (selettore <code>h1</code>) — a cascata, appunto. Nota che tutte le altre regole del <code>body</code> restano valide anche per <code>h1</code> (per esempio il <code>font-size</code>, se non lo hai sovrascritto).
}}
{{Corso/FinePassi}}

== 🚀 Sfide ==

{{Corso/Sfida|1=stella|2=
Cambia i colori di sfondo e testo di <code>h1</code> con altri a tua scelta.
}}

{{Corso/Sfida|1=cometa|2=
Aggiungi una regola per il tag <code>p</code> (per esempio <code>color</code> o <code>font-size</code>) e una per <code>ul</code> o <code>li</code>.
}}

{{Corso/Sfida|1=razzo|2=
Aggiungi una regola per il tag <code>a</code> (i link), per esempio <code>color</code>, e prova ad aggiungere anche <code>a:hover { ... }</code>: cosa succede quando passi il mouse sopra un link?
}}

== 📝 Quiz: mettiti alla prova ==

{{Corso/Quiz|domanda=Cosa significa CSS?|A=Computer Style System.|B=Cascading Style Sheets.|C=Colorful Standard Sheets.|risposta=B|ok=Esatto!|riprova=Riprova!}}

{{Corso/Quiz|domanda=Quale tag collega un file CSS a una pagina HTML?|A=<style>|B=<css>|C=<link>|risposta=C|ok=Sì! Con gli attributi rel e href.|riprova=Riprova!}}

{{Corso/Quiz|domanda=In una regola CSS come "body { color: blue; }", cosa è "body"?|A=Il selettore: dice a quale elemento si applica la regola.|B=Il valore della regola.|C=Un commento.|risposta=A|ok=Esatto: il selettore sceglie l'elemento, le regole tra { } dicono come deve apparire.|riprova=Riprova!}}

== 📚 Da guardare o leggere ==

{{Corso/Fonte|1=
[https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/CSS_basics Le basi del CSS (MDN)] — selettori, proprietà e tanti altri esempi da provare.
}}

== 🎉 Hai finito il corso! ==

{{Corso/Tip|1=
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.
}}

{{Corso/FinePagina|prev=[[Corsi/Web design/Lezione 4|Lezione 4: La homepage e i link]]|next=}}

Corsi/Web design/Lezione 5 - Cronologia

Mattia.sala: Crea Lezione 5: Un po di stile con il CSS (da PDF Sushi Card)