CSS: stile e layout

CSS sta per Cascading Style Sheets (Fogli di Stile a Cascata). Il suo unico scopo è definire l'estetica visiva degli elementi definiti nell'HTML.

Quando il browser carica il tuo sito, unisce la struttura (DOM) con le regole di stile (CSSOM) in un processo chiamato **Render Tree**, dipingendo graficamente i pixel sullo schermo.

Anatomia di una regola CSS

La sintassi del CSS è incredibilmente lineare e si compone di tre parti principali:

selettore {
  proprietà: valore;
  altra-proprietà: altro-valore;
}

• Selettore: indica al browser a chi applicare lo stile (es. a quali tag o classi).
• Proprietà: l'aspetto visivo che vuoi modificare (es. `color`, `font-size`, `margin`).
• Valore: la specifica impostazione che vuoi assegnare alla proprietà (es. `red`, `16px`).

Per applicare lo stile all'HTML ci sono tre metodi. Ricorda sempre che la regola aurea del web design è la **separazione delle responsabilità**: l'HTML si occupa del contenuto, il CSS dello stile.

• Foglio esterno (Consigliato): Scrivi le regole in un file separato con estensione `.css` (es. `stile.css`) e lo colleghi nell'head dell'HTML usando il tag `<link rel="stylesheet" href="stile.css">`. È la prassi standard perché ti permette di usare lo stesso stile su più pagine.
• Tag Style interno: Inserisci le regole direttamente nell'head dell'HTML dentro un tag `<style>`. Utile solo per rapidi test temporanei.
• Stile inline: Scrivi le regole direttamente nel tag HTML tramite l'attributo `style` (es. `<p style="color: red;">`). Evitalo: mescola logica e presentazione, rendendo il codice difficilissimo da mantenere.

Perché i browser "mentono" e l'utilità del Reset

Se crei una pagina HTML vuota senza CSS, noterai che il testo ha già un font, i titoli sono grandi e ci sono dei margini bianchi ai bordi dello schermo. Questo accade perché **ogni browser applica stili di default** (chiamati User Agent Stylesheet) che differiscono leggermente tra Chrome, Safari e Firefox.

Per evitare che il tuo sito appaia diverso a seconda del browser usato, gli sviluppatori inseriscono un **Reset CSS** come prima cosa. Questo reset azzera le differenze di default, offrendoti una tela bianca e prevedibile su cui dipingere. Il reset più comune riguarda il box-sizing:

/* Reset base universale */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Per poter applicare uno stile a un elemento, devi prima riuscire a trovarlo. I selettori servono a questo. Ecco quelli di base:

• Selettore di Tipo (o tag): seleziona tutti gli elementi con quel tag specifico (es. `h2` colora tutti i titoli H2).
• Selettore di Classe: seleziona gli elementi con una specifica classe HTML. Si indica con un punto (`.`) ed è riutilizzabile su quanti elementi vuoi (es. `.card`).
• Selettore di ID: seleziona un elemento univoco identificato dal cancelletto (`#`). Poiché l'ID deve essere unico nella pagina, usalo con molta parsimonia per lo stile.

/* Selettore di tipo */
p { color: #333; }

/* Selettore di classe */
.testo-evidenziato { background-color: yellow; }

/* Selettore di ID */
#bottone-speciale { border-radius: 50px; }

Puoi combinare i selettori separandoli con uno spazio per trovare elementi figli (selettore discendente, es. `.menu a` trova tutti i link dentro la classe `.menu`) o separandoli con una virgola per applicare lo stesso stile a selettori diversi (es. `h1, h2` seleziona entrambi i titoli).

Cosa succede se due regole diverse cercano di applicare colori differenti allo stesso paragrafo? Chi vince la sfida? Nel CSS la risposta è regolata da due concetti cardine.

La Cascata

Il browser legge il codice dall'alto verso il basso. A parità di importanza del selettore, l'ultima regola scritta in ordine temporale vince e sovrascrive quelle precedenti:

p { color: red; }
p { color: blue; } /* Vince questa perché è scritta per ultima! */

La Specificità: il sistema a punti

Se i selettori sono diversi, il browser calcola un punteggio di importanza per decidere chi vince. Selettori più precisi e specifici battono quelli generici. Pensa alla specificità come a un sistema a punti:

• Tag HTML: vale **1 punto** (specificità minima).
• Classe CSS: vale **10 punti** (specificità media).
• ID HTML: vale **100 punti** (specificità alta).
• Stile Inline: vale **1000 punti** (specificità massima).

Guarda questo esempio:

/* 1 Elemento = 1 punto */
p { color: blue; }

/* 1 Classe = 10 punti. Vince questa! */
.paragrafo-rosso { color: red; }

Evita l'uso di `!important` alla fine delle regole. Forza il valore al di sopra di qualsiasi calcolo di specificità, ma rende il debug e le modifiche future un vero incubo. Usalo solo come risorsa estrema.

Per il browser, **qualunque elemento sulla pagina è una scatola rettangolare**. Questa scatola è regolata dal Box Model.

La metafora della spedizione postale

Per capire il Box Model, immagina di dover spedire un vaso di ceramica fragile per posta:

• Content (Contenuto): È il vaso stesso. Corrisponde allo spazio occupato da testi o immagini.
• Padding (Spazio interno): È il pluriball avvolto attorno al vaso dentro la scatola. Crea spazio bianco *dentro* l'elemento, ereditandone lo sfondo.
• Border (Bordo): È lo spessore del cartone della scatola stessa.
• Margin (Margine esterno): È la distanza di sicurezza che tieni tra questa scatola e gli altri pacchi nel furgone delle consegne. Serve a distanziare gli elementi all'esterno.

Il tranello del calcolo delle dimensioni e la salvezza di border-box

Di default, se imposti la larghezza di un elemento a `300px`, e poi aggiungi un padding di `20px` su ogni lato e un bordo di `2px`, la larghezza finale dell'elemento sullo schermo sarà di **344px** (300 + 20 + 20 + 2 + 2). Questo rende la creazione di layout precisi incredibilmente frustrante.

Per risolvere questo problema, impostiamo sempre la regola globale `box-sizing: border-box`. Questa dice al browser di includere padding e bordo *all'interno* della larghezza impostata. Se imposti `300px`, l'elemento rimarrà largo esattamente `300px`, restringendo lo spazio interno del contenuto. È una regola fondamentale presente in ogni progetto moderno.

Gran parte dell'identità visiva passa attraverso la formattazione dei testi e la gestione cromatica.

I formati colore

Nel CSS puoi impostare i colori in diversi formati:

• HEX (Esadecimale): il classico formato web (es. `#00a8ff`).
• RGBA: definisce i canali Red, Green, Blue e l'Alpha per la trasparenza (es. `rgba(0, 168, 255, 0.5)` crea un colore trasparente al 50%).
• HSL / HSLA: basato su Hue (Tonalità, 0-360°), Saturation (Saturazione, %) e Lightness (Luminosità, %). Molto comodo per creare varianti chiare o scure dello stesso colore al volo.

Tipografia accessibile: px vs rem

Evita di definire la dimensione dei testi in pixel (`px`). I pixel sono unità assolute. Se un utente con problemi visivi imposta la dimensione del testo del proprio browser su "molto grande", i testi scritti in `px` rimarranno piccoli e illeggibili.

Usa invece l'unità **`rem`**, che è relativa alla dimensione di base del browser (di default `1rem = 16px`). Impostando un testo a `1.25rem` (equivalente a 20px), la dimensione si adatterà automaticamente alle preferenze dell'utente, garantendo un'accessibilità ottimale.

Flexbox è lo strumento principe per allineare e distribuire gli elementi lungo **una singola dimensione** (in orizzontale come riga, o in verticale come colonna). È perfetto per barre di navigazione, liste di elementi o allineamenti interni a componenti.

Per attivarlo, basta applicare `display: flex` all'elemento contenitore:

.menu {
  display: flex;
  justify-content: space-between; /* Distribuisce lo spazio tra gli elementi figli */
  align-items: center;            /* Centra gli elementi verticalmente */
  gap: 15px;                      /* Spazio minimo costante tra i figli */
}

Con Flexbox non hai bisogno di calcolare margini complessi: le proprietà `justify-content` (asse principale) e `align-items` (asse trasversale) gestiscono gli spazi in modo del tutto automatico ed elastico.

Mentre Flexbox lavora su una sola riga o colonna alla volta, CSS Grid permette di gestire **due dimensioni contemporaneamente** (righe e colonne). È lo strumento ideale per griglie di card, gallerie fotografiche complesse o per la gabbia strutturale della pagina.

.griglia-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonne di ugual dimensione */
  gap: 20px;                             /* Spazio tra righe e colonne */
}

L'unità di misura **`fr`** rappresenta una frazione dello spazio disponibile. Nell'esempio sopra, le tre colonne si spartiscono lo spazio in parti esattamente uguali. Puoi creare griglie straordinariamente responsive che si adattano allo schermo senza usare media query:

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

Capire la differenza logica tra questi due strumenti è uno degli scogli più frequenti. Ecco una guida decisionale semplice basata sull'approccio allo sviluppo:

Regola aurea: se devi allineare un gruppo di elementi lungo una linea retta, usa **Flexbox**. Se devi disporre gli elementi su una griglia strutturata dove vuoi controllare sia l'allineamento verticale sia quello orizzontale, usa **CSS Grid**.

Di default, il browser dispone gli elementi uno dopo l'altro seguendo il flusso naturale del documento. La proprietà `position` permette di "sfidare la gravità" e scavalcare questo ordine di posizionamento.

• `static` (Default): L'elemento segue il flusso standard della pagina.
• `relative`: L'elemento può essere spostato rispetto alla sua posizione normale. Molto usato come contenitore di riferimento per elementi posizionati in modo assoluto.
• `absolute`: L'elemento viene rimosso dal flusso della pagina (gli altri elementi si comportano come se non esistesse) e viene posizionato rispetto al suo antenato non statico più vicino.
• `fixed`: L'elemento è posizionato rispetto alla finestra del browser. Rimane fisso nello stesso punto anche se scorri la pagina (es. la chat di assistenza in basso a destra).
• `sticky`: Un comportamento ibrido. L'elemento si comporta normalmente finché non raggiunge una determinata soglia di scorrimento (es. `top: 0`), dopodiché si "incolla" allo schermo.

/* Schema tipico: un badge posizionato sopra l'angolo di una card */
.card {
  position: relative; /* La card fa da ancora di riferimento */
}

.badge {
  position: absolute;
  top: -10px;
  right: -10px;       /* Posizionato a cavallo dell'angolo in alto a destra */
}

Un sito web moderno deve potersi leggere comodamente sia sullo schermo di uno smartwatch sia su un televisore 4K. Il responsive design è l'insieme di tecniche usate per raggiungere questo obiettivo.

Le Media Queries e i Breakpoint

Le media query permettono di applicare regole CSS solo al soddisfacimento di determinate condizioni dello schermo (i cosiddetti breakpoint):

/* Stile base (Mobile-First: valido per tutti gli schermi a partire dagli smartphone) */
.griglia {
  grid-template-columns: 1fr;
}

/* Stile applicato solo su schermi larghi almeno 768px (Tablet e Desktop) */
@media (min-width: 768px) {
  .griglia {
    grid-template-columns: repeat(3, 1fr);
  }
}

L'approccio **Mobile-First** consiste nel progettare il sito partendo dallo schermo piccolo dello smartphone (scrivendo le regole base fuori dalle media query) per poi aggiungere via via colonne, dettagli e stili per schermi più grandi all'interno di query `@media (min-width: ...)`. È lo standard dell'industria moderna.

Le variabili CSS (o Custom Properties) permettono di memorizzare valori ricorrenti (come colori di brand, font o spaziature) in un unico posto per poi riutilizzarli ovunque nel foglio di stile.

Di solo si dichiarano nella pseudo-classe `:root` per renderle disponibili globalmente:

:root {
  --colore-primario: #00a8ff;
  --padding-base: 1.5rem;
}

.pulsante {
  background-color: var(--colore-primario);
  padding: var(--padding-base);
}

Se in futuro il colore del brand dovesse cambiare, ti basterà modificare una sola riga all'interno di `:root` e la modifica si propagherà istantaneamente su centinaia di fogli di stile.

Aggiungere piccoli tocchi di movimento rende l'interfaccia interattiva e premium. Nel CSS moderno puoi animare qualsiasi elemento con facilità.

Le Transizioni (transition)

Una transizione ammorbidisce il passaggio di uno stile al variare dello stato (es. quando l'utente passa il mouse sopra un elemento con `:hover`):

.bottone {
  background-color: #00a8ff;
  transition: background-color 0.3s ease-in-out; /* Transizione morbida */
}

.bottone:hover {
  background-color: #007cc0;
}

Le Trasformazioni (transform)

La proprietà `transform` permette di spostare, ruotare o ingrandire gli elementi sfruttando l'accelerazione hardware della scheda video (GPU), garantendo prestazioni eccezionali ed animazioni a 60fps:

.card {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card:hover {
  transform: translateY(-5px) scale(1.03); /* Si solleva ed ingrandisce leggermente */
}

Nota di stile: la moderazione è tutto. Le animazioni ideali durano tra i `0.2s` e i `0.4s` (micro-interazioni). Movimenti continui, lenti o troppo vistosi finiscono per stancare il lettore e rallentare i dispositivi più datati.

Ecco un riepilogo delle regole di allineamento e dimensionamento più importanti:

Metti in pratica le regole di allineamento e Box Model nel playground:

Il CSS si impara sporcandosi le mani: prova a ricreare layout che vedi online e analizza come sono costruiti. Ecco i passi successivi consigliati per proseguire:

• DevTools del Browser: lo strumento indispensabile per fare il debug dei tuoi layout Flexbox o Grid, ispezionare le regole attive in tempo reale e capire quale specificità sta vincendo sul browser.
• JavaScript Fondamentali: per iniziare ad aggiungere dinamismo logico ed interattività avanzata alle tue grafiche.
• Accessibilità web di base: per comprendere come scegliere combinazioni di colori con il giusto contrasto e mantenere visibile il focus della tastiera per tutti gli utenti.
• Tutti i tutorial: torna all'indice per continuare il tuo percorso formativo.