🎨 Naser Dev Path — Modulo 2 di 8

CSS: Le Basi

HTML ti dà la struttura. CSS ti dà l'aspetto. Colori, font, layout, animazioni — tutto quello che rende un sito bello parte da qui.

0% completato
1

Cos'è CSS?

CSS sta per Cascading Style Sheets. È il linguaggio che controlla come appare l'HTML. Senza CSS, tutti i siti sarebbero testo nero su sfondo bianco.

La parola "Cascading" (a cascata) significa che le regole si ereditano e si sovrascrivono a cascata — lo capirai presto.

💡 HTML vs CSS

HTML dice cosa c'è nella pagina (titolo, paragrafo, immagine).
CSS dice come appare (colore rosso, font grande, sfondo scuro).
Sono due linguaggi separati — tienili mentalmente distinti.

Come si scrive una regola CSS

Ogni regola CSS ha questa struttura:

Anatomia di una regola CSS
/* selettore  { proprietà: valore; } */

h1 {
    color: red;
    font-size: 2rem;
}

p {
    color: #555;
    line-height: 1.6;
}
  • Il selettore dice "a chi si applica questa regola"
  • Le proprietà dicono cosa cambiare (color, font-size, background…)
  • I valori dicono come cambiarlo (red, 16px, #fff…)
  • Ogni dichiarazione finisce con ;

Come collegare CSS all'HTML

Ci sono 3 modi — dal peggiore al migliore:

1. Inline style (il peggiore — evitalo)
<p style="color: red; font-size: 18px;">Testo rosso</p>
/* Problema: CSS e HTML mescolati, impossibile da gestire su grandi progetti */
2. Tag <style> nel <head> (per esercizi e pagine piccole)
<head>
    <style>
        p { color: blue; }
    </style>
</head>
3. File CSS esterno (il metodo corretto)
<head>
    <!-- Collegamento al file CSS esterno -->
    <link rel="stylesheet" href="stile.css">
</head>

/* Nel file stile.css: */
body { font-family: Arial, sans-serif; }
h1   { color: #2d3436; }

Negli esercizi useremo il tag <style> perché è più semplice. Nei progetti reali userai sempre un file esterno.

🔬 Prova tu — Il tuo primo CSS

✏️ EDITOR LIVE
2

I selettori: chi riceve lo stile

Il selettore decide a quali elementi HTML si applica la regola CSS. Esistono tre tipi fondamentali:

1. Selettore di tag

Seleziona tutti gli elementi di quel tipo nella pagina:

Selettore di tag
h1     { color: navy; }         /* Tutti gli h1 */
p      { font-size: 1rem; }    /* Tutti i paragrafi */
a      { color: blue; }         /* Tutti i link */
body   { margin: 0; }           /* L'intera pagina */

2. Selettore di classe (.)

Seleziona solo gli elementi con quell'class. Il punto . davanti al nome è obbligatorio nel CSS:

Selettore di classe
/* Nel CSS: */
.evidenziato { background: yellow; }
.grande      { font-size: 1.5rem; }

/* Nell'HTML: */
<p class="evidenziato">Questo ha sfondo giallo.</p>
<p>Questo è normale.</p>
<p class="evidenziato grande">Questo è giallo E grande.</p>
🎯 CLASSE vs TAG

Il selettore di tag modifica TUTTI gli elementi di quel tipo — utile per stili globali.
Il selettore di classe ti permette di scegliere esattamente quali elementi modificare — molto più flessibile.

3. Selettore di ID (#)

Seleziona un solo elemento con quell'id. Il cancelletto # davanti è obbligatorio:

Selettore di ID
/* Nel CSS: */
#header-principale { background: #2d3436; }

/* Nell'HTML: */
<header id="header-principale">...</header>

/* ATTENZIONE: l'id deve essere unico nella pagina! */
📌 REGOLA PRATICA

Nella pratica moderna si usano quasi solo le classi. Sono riutilizzabili e più flessibili degli ID. Usa gli ID solo se hai una buona ragione (JavaScript, link ancora).

🔬 Prova tu — Selettori in azione

✏️ EDITOR LIVE — Selettori
3

Proprietà fondamentali

Colori

I colori in CSS si scrivono in vari modi:

Modi per scrivere i colori
/* Nome del colore (solo per i colori di base) */
h1 { color: red; }
p  { background-color: white; }

/* Esadecimale (il più usato) — #RRGGBB */
h1 { color: #2d3436; }       /* Grigio scuro */
a  { color: #0984e3; }       /* Blu */

/* RGB — rosso, verde, blu (0-255) */
p  { color: rgb(99, 110, 114); }

/* RGBA — come RGB ma con trasparenza (0-1) */
.overlay { background: rgba(0, 0, 0, 0.5); }  /* Nero al 50% */
#2d3436
#0984e3
#00b894
#e84393
#fdcb6e
#6c5ce7

Font e testo

Proprietà testo
body {
    font-family: Arial, Helvetica, sans-serif;  /* Font (lista di fallback) */
    font-size: 16px;                          /* Dimensione base */
    line-height: 1.6;                         /* Interlinea */
    color: #2d3436;                           /* Colore testo */
}

h1 {
    font-size: 2.5rem;          /* rem = relativo al font base */
    font-weight: 700;           /* 400=normale, 700=grassetto */
    text-align: center;        /* left | center | right */
    letter-spacing: -0.5px;    /* Spazio tra le lettere */
}

a {
    text-decoration: none;     /* Rimuove la sottolineatura */
}
📐 px vs rem vs em

px = pixel fissi (100px è sempre 100px).
rem = relativo al font-size della pagina (1rem = 16px di default). Preferiscilo per i font.
em = relativo al font-size dell'elemento padre. Utile per padding proporzionale.

4

Il Box Model — ogni elemento è una scatola

In CSS, ogni elemento HTML è una scatola rettangolare. Questa scatola ha 4 strati, dall'interno verso l'esterno:

MARGIN (spazio esterno)
BORDER (bordo)
PADDING (spazio interno)
CONTENT (il tuo testo)
Box Model in CSS
.card {
    /* CONTENT: dimensioni del contenuto */
    width: 300px;
    height: auto;              /* auto = si adatta al contenuto */

    /* PADDING: spazio interno (tra contenuto e bordo) */
    padding: 20px;             /* tutti e 4 i lati */
    padding: 10px 20px;        /* top/bottom  left/right */
    padding-top: 10px;         /* solo sopra */

    /* BORDER: il bordo */
    border: 2px solid #2d3436;  /* spessore tipo colore */
    border-radius: 8px;          /* angoli arrotondati */

    /* MARGIN: spazio esterno (tra questo e gli altri) */
    margin: 20px auto;         /* top/bottom auto = centra orizzontalmente */
    margin-bottom: 1rem;        /* solo sotto */
}
🔑 TRUCCO: margin auto

margin: 0 auto; è il modo classico per centrare un elemento con larghezza fissa. 0 = nessun margin sopra/sotto, auto = il browser distribuisce automaticamente lo spazio a sinistra e destra.

🔬 Prova tu — Il Box Model

✏️ EDITOR LIVE — Box Model
5

🏋️ Sfida: Stila la tua pagina personale

Prendi l'HTML del modulo 1 e dagli un aspetto professionale con CSS. La struttura HTML è già fornita — devi scrivere tu il CSS.

🎨 SFIDA — CSS per la pagina personale

Il tuo CSS deve includere:

  1. Un background-color sul body
  2. Un color personalizzato su h1
  3. Un font-size sui paragrafi
  4. Almeno una class definita e usata
  5. Almeno un padding o margin
  6. Un border-radius su qualsiasi elemento
💡 Mostra suggerimento

Inizia con gli stili globali: body (background, font-family), poi h1 (color, font-size), poi p. Dopo aggiungi padding a header e margin ai paragrafi. Infine, crea una classe (es. .highlight) e applicala a qualcosa.

✏️ EDITOR — Sfida CSS
✅ Sfida completata! Sei pronto per il Modulo 3: JavaScript
6

📝 Test di verifica

Vediamo se hai capito le basi del CSS. Rispondi a tutte le domande:

🧠 QUIZ — 6 domande + 3 bonus 🎓

1. Cosa significa CSS?

Creative Style System
Cascading Style Sheets
Computer Style Script
Colorful Site Setup

2. Qual è il modo corretto per selezionare un elemento con class="titolo" in CSS?

#titolo { }
titolo { }
.titolo { }
*titolo { }

3. Quale proprietà CSS imposta il colore del testo?

color
text-color
font-color
background-color

4. Nel box model CSS, quale strato è il più esterno?

padding
margin
border
content

5. Come si centra orizzontalmente un elemento con larghezza fissa?

text-align: center;
align: center;
position: center;
margin: 0 auto;

6. Qual è la differenza tra padding e margin?

padding = spazio interno (tra contenuto e bordo), margin = spazio esterno (tra elementi)
padding = spazio esterno, margin = spazio interno
Sono la stessa cosa, solo nomi diversi

🎓 BONUS — Per la lode (queste vanno oltre il modulo)

7. 🎓 Cosa fa box-sizing: border-box;?

Aggiunge un bordo automatico a tutti gli elementi
Rende tutti i div quadrati
Include padding e border nella larghezza totale — se scrivi width:200px, l'elemento occupa esattamente 200px

8. 🎓 Cosa significa la C di "Cascading" in CSS?

Il CSS è veloce come una cascata
Le regole si applicano a cascata — un'elemento eredita gli stili dai suoi genitori, e regole più specifiche vincono su quelle generali
Si riferisce al modo in cui il browser scarica il CSS

9. 🎓 Quale unità è preferibile usare per i font-size e perché?

rem — relativo al font-size del documento, scala bene su tutti i dispositivi e rispetta le preferenze utente
px — precisi e controllabili, niente sorprese
% — percentuali, sempre proporzionali
🎉
6/6
risposte corrette
Perfetto! Hai capito le basi del CSS. Pronto per JavaScript!