Tutti i tutorial

Stile e Layout per chi inizia

Nota iniziale

Questa guida non descrive ogni singola proprietà o valore CSS. Sarebbe impossibile e controproducente. CSS è un linguaggio sterminato, con centinaia di regole che si scoprono man mano che si presenta la necessità di risolvere un problema visivo.

In questo tutorial troverai i pilastri concettuali: quei principi invisibili che, se capiti subito, ti risparmieranno ore di frustrazione e comportamenti apparentemente "inspiegabili" del browser. Parliamo di come si propagano le regole, di Box Model e dei metodi di layout moderni.

L'obiettivo è darti un modello mentale solido. Una volta che avrai capito come pensa il CSS, cercare la singola proprietà di cui hai bisogno su una documentazione diventerà naturale e immediato. Niente panico, andiamo per gradi.

Illustrazione di apertura della guida CSS stili e layout

1. Cos'è e come funziona il CSS

CSS sta per Cascading Style Sheets (Fogli di Stile a Cascata). Se HTML rappresenta lo scheletro e il contenuto di una pagina web, il CSS ne definisce la presentazione visiva: colori, font, dimensioni, spaziature e layout.

Il browser applica il CSS combinando il DOM (la struttura HTML) con il CSSOM (la struttura degli stili) per generare il "Render Tree", ovvero il disegno finale che vedi sullo schermo.

Anatomia di una regola CSS

Il CSS è composto da un insieme di regole. Ognuna segue una sintassi ben precisa:

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

Ad esempio, per fare in modo che tutti i paragrafi abbiano il testo di colore blu e una dimensione maggiore:

p {
  color: blue;
  font-size: 18px;
}
  • Selettore (p): indica al browser quale elemento HTML deve essere stilizzato.
  • Blocco di dichiarazione (tra parentesi graffe): contiene una o più dichiarazioni separate da un punto e virgola.
  • Proprietà (color, font-size): l'aspetto che desideri modificare.
  • Valore (blue, 18px): la specifica impostazione data alla proprietà.

2. Collegare il CSS all'HTML

Ci sono tre modi per applicare codice CSS a una pagina HTML. Ognuno ha scopi diversi, ma uno solo è considerato lo standard per la produzione.

1. Foglio di stile esterno (Raccomandato)

Si scrive il codice CSS in un file separato (ad esempio style.css) e lo si collega nell'<head> dell'HTML usando il tag <link>. È il metodo migliore perché separa completamente il contenuto dalla presentazione.

<link rel="stylesheet" href="style.css">

2. Stile interno (Tag style)

Le regole vengono inserite direttamente nell'<head> del documento HTML all'interno del tag <style>. È utile per test rapidi o per stili specifici di una singola pagina.

<style>
  body {
    background-color: #fafafa;
  }
</style>

3. Stile inline (Attributo style)

Si applicano le regole direttamente sul tag HTML desiderato tramite l'attributo style. Rende il codice HTML disordinato e difficile da mantenere, quindi va evitato quasi sempre (tranne per stili calcolati al volo con JavaScript).

<p style="color: red; font-weight: bold;">Testo rosso</p>

3. I Selettori Fondamentali

Per applicare uno stile, devi prima selezionare l'elemento corretto. Il CSS offre diversi tipi di selettori, a partire da quelli più semplici.

Selettore di tipo (o tag)

Seleziona tutti gli elementi che corrispondono a quel tag HTML specifico. Ad esempio, per stilizzare tutti i titoli di secondo livello:

h2 {
  color: #333;
}

Selettore di classe

Seleziona gli elementi che hanno un attributo class corrispondente. Si indica con un punto (.) seguito dal nome della classe. È il selettore più usato in assoluto perché è riutilizzabile.

/* Nel CSS */
.highlight {
  background-color: yellow;
}


<p class="highlight">Questo testo avrà lo sfondo giallo.</p>

Selettore di ID

Seleziona un elemento univoco con un determinato attributo id. Si indica con il cancelletto (#). Poiché l'ID deve essere unico nella pagina, questo selettore va usato con parsimonia per lo stile.

/* Nel CSS */
#main-navigation {
  background-color: #222;
}


<nav id="main-navigation">...</nav>

Selettori combinati e gruppi

Puoi applicare lo stesso stile a più selettori separandoli con una virgola:

h1, h2, h3 {
  font-family: sans-serif;
}

Oppure puoi selezionare elementi figli (selettore discendente) lasciando uno spazio tra i selettori. Ad esempio, per selezionare solo i link che si trovano dentro un menu:

.menu a {
  text-decoration: none;
}

4. La Cascata e la Specificità

Cosa succede se due regole diverse provano a colorare lo stesso paragrafo, una di rosso e una di verde? Chi vince? Qui entrano in gioco i due concetti chiave che danno il nome al CSS.

La Cascata

Il CSS legge il codice dall'alto verso il basso. A parità di importanza del selettore, l'ultima regola scritta sovrascrive quelle precedenti. Ad esempio, qui il testo sarà verde:

p { color: red; }
p { color: green; } /* Vince questa perché è scritta dopo */

La Specificità

Se i selettori sono diversi, il browser assegna ad ognuno un "punteggio" di importanza. I selettori più specifici battono quelli più generici, a prescindere dall'ordine in cui sono scritti.

Il calcolo semplificato della specificità segue una gerarchia:

  1. Stile Inline: ha il peso massimo (modifiche dirette sull'elemento).
  2. ID (es. #menu): molto specifico.
  3. Classi, attributi e pseudo-classi (es. .card, :hover): specificità media.
  4. Elementi e pseudo-elementi (es. div, p): specificità minima.

Considera questo esempio:

body p { color: blue; }    /* Specificità bassa: 2 tag */
.text-danger { color: red; } /* Specificità media: 1 classe. Vince questa! */

Il pericolo di !important

Aggiungere !important a un valore forza l'applicazione di quella regola, scavalcando qualsiasi specificità. È una cattiva pratica che rende il codice difficile da gestire. Usalo solo in casi estremi (es. per sovrascrivere stili provenienti da librerie esterne che non puoi modificare).

p { color: red !important; } /* Da usare con estrema cautela */

5. Il Box Model e box-sizing

Per il CSS, qualsiasi cosa presente sulla pagina è racchiusa dentro una scatola rettangolare. Capire come questa scatola calcola le sue dimensioni è fondamentale per non impazzire con i pixel.

Le 4 parti del Box Model

  • Content: l'area interna dove risiede il testo, l'immagine o altri elementi.
  • Padding: lo spazio vuoto intorno al contenuto, dentro il bordo. Eredita lo sfondo dell'elemento.
  • Border: il bordo che circonda il padding e il contenuto.
  • Margin: lo spazio vuoto esterno al bordo, usato per distanziare l'elemento dagli altri elementi adiacenti.
[ CONTENUTO / CONTENT ]
PADDING (Spazio interno)
BORDER & MARGIN (Bordo e Spazio esterno)

Il problema del dimensionamento predefinito

Di default, se assegni a un box una larghezza di 300px, un padding di 20px e un bordo di 2px, la larghezza totale visibile sarà di 344px (300 + 20 + 20 + 2 + 2). Questo rende i calcoli del layout frustranti.

La soluzione: box-sizing: border-box

Impostando box-sizing: border-box, dici al browser di includere padding e bordo all'interno della larghezza definita. Se chiedi 300px, l'elemento sarà largo esattamente 300px, riducendo lo spazio del contenuto se necessario.

È una pratica così comune che quasi tutti i progetti iniziano con questo "reset globale" inserito all'inizio del file CSS:

*, *::before, *::after {
  box-sizing: border-box;
}

6. Colori e Tipografia

Gran parte del lavoro di design si concentra sulla resa del testo e sulla scelta dei colori.

Definire i colori

Il CSS offre diversi formati per definire i colori:

  • Nomi letterali: red, blue, transparent (poco flessibili).
  • Esadecimale (HEX): es. #00a8ff. È il formato più diffuso nel web design.
  • RGB / RGBA: es. rgba(0, 168, 255, 0.5). La 'a' definisce l'opacità (da 0 completamente trasparente a 1 opaco).
  • HSL / HSLA: es. hsl(200, 100%, 50%) (Hue, Saturation, Lightness). Molto intuitivo per creare varianti dello stesso colore.

Tipografia essenziale

Le proprietà fondamentali per gestire il testo:

p {
  font-family: 'Inter', sans-serif; /* Sceglie il font */
  font-size: 1rem;                  /* Dimensione del testo */
  line-height: 1.6;                 /* Altezza della riga (leggibilità) */
  font-weight: 500;                 /* Peso del font (es. 400 normal, 700 bold) */
  color: #2c3e50;                   /* Colore del testo */
  text-align: justify;              /* Allineamento (left, center, right, justify) */
}

Unità di misura: px vs rem

Mentre i pixel (px) hanno una dimensione fissa e assoluta, l'unità rem è relativa alla dimensione del font radice del browser (solitamente 16px). Usare rem (es. 1.5rem = 24px) è fondamentale per l'accessibilità, poiché consente al testo di ingrandirsi se l'utente cambia le impostazioni del browser.

7. Layout Moderno: Flexbox

Flexbox è lo strumento ideale per allineare elementi lungo una singola dimensione (una riga o una colonna). È perfetto per menu, barre di navigazione, allineamenti di card e distribuzioni di spazi.

Flexbox funziona definendo un contenitore (flex container) e i suoi figli diretti (flex items).

.container {
  display: flex; /* Attiva Flexbox */
}

Le proprietà del contenitore più utilizzate

  • flex-direction: decide la direzione del flusso. Di default è row (orizzontale), ma può essere impostata a column (verticale).
  • justify-content: allinea gli elementi lungo l'asse principale (orizzontale se row). Valori comuni: flex-start, center, flex-end, space-between (distribuisce gli elementi alle estremità), space-around.
  • align-items: allinea gli elementi sull'asse secondario (verticale se row). Valori comuni: stretch (default, allunga gli elementi), center, flex-start, flex-end.
  • gap: definisce lo spazio minimo tra gli elementi figli, senza usare margini.
/* Esempio: una navbar con logo a sinistra e link a destra, centrati verticalmente */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

8. Layout Moderno: Grid

Mentre Flexbox gestisce i layout unidimensionali, CSS Grid è progettato per layout bidimensionali (righe e colonne contemporaneamente). È perfetto per griglie di card, gallerie di immagini o strutture di intere pagine.

Anche qui definiamo un contenitore grid:

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

Cosa significa 1fr?

L'unità fr (fractional unit) rappresenta una frazione dello spazio disponibile nel contenitore. Nel codice sopra, repeat(3, 1fr) crea tre colonne che si spartiscono lo spazio in parti esattamente uguali.

Griglie responsive senza media query

Uno dei superpoteri di Grid è la capacità di creare griglie che si adattano allo schermo automaticamente, spostando gli elementi a capo quando lo spazio diminuisce:

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

Questa singola riga dice al browser: "crea colonne larghe almeno 250px; se avanza spazio allungale equamente (1fr), se lo schermo si restringe e non c'è spazio per un'altra colonna da 250px, mandala a capo".

9. Posizionamento (Position)

Di default, gli elementi HTML seguono il flusso naturale del documento (vengono posizionati uno dopo l'altro nell'ordine in cui compaiono nel codice). La proprietà position permette di alterare questo flusso.

I 5 valori di position

  • static: il comportamento standard. L'elemento segue il flusso normale. Le proprietà top, right, bottom e left non hanno effetto.
  • relative: l'elemento viene posizionato relativamente alla sua posizione normale. Modificando top: 10px si sposterà verso il basso, ma lo spazio che occupava originariamente rimarrà vuoto.
  • absolute: l'elemento viene rimosso dal flusso naturale della pagina e posizionato in relazione al suo **primo antenato non statico** (solitamente impostato a position: relative). Gli altri elementi si comportano come se l'elemento absolute non esistesse.
  • fixed: l'elemento viene posizionato rispetto alla finestra del browser. Rimane bloccato nello stesso punto anche quando l'utente scorre la pagina (es. una navbar o un tasto "torna su").
  • sticky: un ibrido tra relative e fixed. L'elemento si comporta come relative finché non raggiunge una determinata soglia di scorrimento (es. top: 0), momento in cui "si incolla" diventando fisso.
/* Esempio classico: posizionare un badge sopra una card */
.card {
  position: relative; /* Contenitore di riferimento */
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px; /* Posizionato nell'angolo in alto a destra della card */
}

10. Responsive Design

Oggi la maggior parte degli utenti naviga da dispositivi mobili. Il responsive design è la tecnica che consente a una pagina di adattarsi in modo fluido a schermi di qualsiasi dimensione.

Il tag viewport

Perché il responsive design funzioni, l'HTML deve includere il meta tag viewport (che abbiamo visto nella guida HTML) nell'<head>. Senza questo tag, i dispositivi mobili proveranno a simulare uno schermo desktop, rimpicciolendo tutto.

Le Media Queries

Le media query ti permettono di applicare blocchi di codice CSS solo se lo schermo soddisfa determinate condizioni, ad esempio se è più stretto di una certa misura (breakpoint).

/* Stili predefiniti (approccio Mobile-First: per schermi piccoli) */
.sidebar {
  width: 100%;
}

/* Stili applicati solo su schermi larghi almeno 768px (Tablet / Desktop) */
@media (min-width: 768px) {
  .sidebar {
    width: 25%;
  }
}

L'approccio **Mobile-First** consiste nel progettare prima l'interfaccia per gli schermi piccoli (scrivendo le regole base fuori dalle media query) e poi aggiungere stili e colonne per schermi più grandi tramite `@media (min-width: ...)`. È lo standard moderno consigliato.

11. Variabili CSS

Le variabili CSS (chiamate ufficialmente Custom Properties) permettono di memorizzare valori (colori, spaziature, font) in un unico posto e riutilizzarli in tutto il foglio di stile. Questo migliora incredibilmente la manutenibilità.

Dichiarare e usare le variabili

Solitamente si dichiarano le variabili all'interno della pseudo-classe :root, in modo che siano accessibili in tutta la pagina. I nomi delle variabili devono iniziare con due trattini (--).

:root {
  --primary-color: #00a8ff;
  --secondary-color: #2f3640;
  --main-padding: 1rem;
}

/* Come usarle */
.button {
  background-color: var(--primary-color);
  padding: var(--main-padding);
}

.footer {
  background-color: var(--secondary-color);
  color: white;
}

Se in futuro deciderai di cambiare il colore primario del sito, ti basterà modificare una sola riga dentro :root e il cambiamento si propagherà ovunque.

12. Dove continuare dopo

Il CSS si impara provando, sbagliando e analizzando il comportamento del browser. Ora che hai acquisito i concetti fondamentali, ecco i passi successivi consigliati per migliorare:

  • DevTools del browser: impara a ispezionare gli stili in tempo reale, a modificare le regole al volo e a fare il debug dei layout Flexbox e Grid usando l'ispezione visiva del browser.
  • HTML Fondamentali: se non l'hai ancora fatto, assicurati di padroneggiare la struttura semantica degli elementi a cui applichi lo stile.
  • Accessibilità web di base: scopri come utilizzare i colori in modo da garantire un contrasto sufficiente e come preservare l'indicatore di focus per la navigazione da tastiera.
  • Tutti i tutorial: torna all'indice per esplorare altre guide pratiche e ampliare le tue competenze front-end.