Fondamenti

Teoria CSS3

CSS descrive come gli elementi HTML devono apparire: colori, dimensioni, layout, spaziature, animazioni e comportamento responsive.

Regole, selettori e dichiarazioni

Come si legge una regola

  • Selettore: individua gli elementi.
  • Dichiarazione: coppia proprietà-valore.
  • Blocco: insieme di dichiarazioni tra parentesi graffe.
.card {
  background: white;
  padding: 20px;
  border-radius: 16px;
}

Cascade, specificità ed ereditarietà

Quando più regole agiscono sullo stesso elemento, il browser decide quale applicare considerando origine, importanza, specificità e ordine.

CascadeLe regole successive possono sovrascrivere quelle precedenti.
SpecificitàID, classi e tag hanno pesi diversi.
EreditarietàAlcune proprietà passano automaticamente ai figli.

Esempi interattivi

Modifica il codice e osserva l’anteprima live.

Box model visuale

Modifica padding, margin e bordo per capire come cresce un elemento.

box model
Codice modificabile
Risultato live
Verifica

Quiz su Teoria CSS3

Rispondi alle domande per controllare subito la comprensione dell’argomento.

1. Che cosa indica un selettore CSS?

2. Quale simbolo seleziona una classe?

3. Quale simbolo seleziona un ID?

4. Che cosa contiene una dichiarazione CSS?

5. Quale proprietà spesso viene ereditata?

6. Che cosa rappresenta il box model?

Esercitazione libera

Laboratorio libero: Teoria CSS3

Parti dagli esempi della pagina, modifica il codice e crea una variante personale. Salva una copia del codice quando ottieni il risultato desiderato.