# Tutorial CSS: introduzione ai fogli di stile a cascata

I CSS servono a definire l’aspetto e la grafica delle pagine web. Con i fogli di stile a cascata separi il design dai contenuti e garantisci così una struttura chiara e flessibile. In questo tutorial scoprirai come usare i CSS per controllare in modo mirato il layout, i colori e la tipografia del tuo sito.

## Separazione di contenuto e presentazione

In combinazione con [HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/imparare-lhtml-lampio-tutorial-per-principianti/), il [CSS](https://www.ionos.it/digitalguide/siti-web/web-design/cose-css/) serve alla separazione di contenuto e presentazione.

L’**Hypertext Markup Language (HTML)** interviene per arricchire documenti di testo con informazioni che sono necessarie per la strutturazione semantica degli elementi di testo. Il linguaggio di markup crea quindi la base di qualsiasi sito web: il codice HTML. Quest’ultimo offre la descrizione degli [elementi HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/elemento-html/) che vanno a comporre un documento (ad esempio, `<body>`, `<header>`, `<footer>`) e di come devono essere interpretate le informazioni (come titolo `<h1>` o paragrafo `<p>`).

In origine anche il linguaggio HTML offriva istruzioni per l’allestimento degli elementi che compongono il progetto, ma nell’attuale [HTML5](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml5/) risultano superate e sarebbe meglio evitarle. Per gestire le direttive riguardanti la rappresentazione stilistica in maniera separata si utilizza invece il linguaggio dei fogli di stile **CSS (Cascading Style Sheets)**.

## Cos’è CSS?

Come è il caso di HTML, anche il CSS viene scritto sotto forma di testo. Ciò può avvenire direttamente su un documento HTML, inline per ogni documento oppure una volta sola per tutti i documenti scrivendo all’interno del tag `<head>`. Di norma, però, i web designer integrano i documenti CSS separatamente per progettare siti web. Il risultato è un **codice sorgente chiaro** in cui le istruzioni di progettazione vengono evitate tramite rinvii a fogli di stile separati. Meno ripetizioni ci sono, più leggero sarà il [codice sorgente](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/codice-sorgente-cosa-si-nasconde-dietro-a-un-sito-web/).

Nel caso in cui fosse necessario adattare il design, si lavora direttamente sui file CSS, evitando, in questo modo, di scandagliare e riadattare ogni singolo documento HTML. Essendo un cosiddetto “living standard”, ovvero uno standard vivente, il CSS viene regolarmente sviluppato dal [World Wide Web Consortium (W3C)](https://www.w3.org/Style/CSS/ "Aggiornamenti riguardanti lo sviluppo del CSS sul sito web del W3C").

## Struttura di base: la sintassi del CSS

Il compito principale del CSS è di definire il design di un sito web: a questo scopo vengono assegnati determinati valori agli elementi HTML con l’aiuto delle proprietà del linguaggio di stile. La **struttura di base di una direttiva** corrisponde al seguente schema:

```css
selettore { dichiarazione }
```

Il **selettore** altro non è che una rappresentazione dell’elemento HTML al quale fa riferimento l’istruzione. La dichiarazione consiste di una **combinazione tra proprietà e valore** che viene annotata tra due parentesi graffe. Ogni dichiarazione finisce con un punto e virgola:

```css
elemento HTML { proprietà: valore; }
```

Secondo questo schema è possibile, ad esempio, applicare un determinato colore all’intestazione, ad esempio rosso:

```css
h2 { color: red; }
```

I web designer hanno la possibilità di applicare una singola proprietà al selettore oppure di definire ampi blocchi di dichiarazioni che contengano regole dettagliate. Per una questione di leggibilità si è affermata una scrittura in cui tutte le proprietà di un blocco di dichiarazioni vengono annotate una sotto all’altra:

```css
selettore {
proprietà1: valore;
proprietà2: valore;
proprietà3: valore;
}
```

Nella pratica un blocco di dichiarazioni simili potrebbe apparire come segue:

```css
h2 {
color: #ff0000;
font-family: Helvetica, sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
}
```

Un blocco di dichiarazioni può servire a specificare più selettori alla volta: in tal caso basterà separarli con una virgola prima della dichiarazione:

```css
selettore1, selettore2 { dichiarazione }
```

## Selettori CSS

Il CSS supporta diversi [selettori](https://www.w3.org/TR/css3-selectors/#selectors "Panoramica di tutti i selettori CSS sul sito web del W3C") in grado di assegnare istruzioni di stile personalizzate. Tuttavia, per chi si approccia al CSS per la prima volta, basterà che prenda confidenza con i selettori di **tipo**, **classe**, **ID** e quelli **universali**. Tieni presente che i CSS **distinguono tra maiuscole e minuscole**, quindi la scrittura in maiuscolo o minuscolo ha un ruolo determinante.

<table>
  <thead>
    <tr>
      <th><strong>Tipo di selettore</strong></th>
      <th><strong>Scrittura CSS</strong></th>
      <th><strong>Descrizione</strong></th>
      <th><strong>Specificità</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Selettore di tipo</td>
      <td>elemento HTML (ad esempio `h2`)</td>
      <td>Il selettore corrisponde al nome dell’elemento al quale fa riferimento. Lo stile viene applicato su tutti gli elementi HTML dello stesso tipo.</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Selettore di classi</td>
      <td>`.esempio`</td>
      <td>Il selettore di classi si rivolge a tutti gli elementi di una classe specifica e si scrive con un punto (`.`) e un nome personalizzabile: `.esempio`. Le classi vengono applicate agli elementi HTML tramite l’attributo `class` (`class="esempio"`).</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Selettore ID</td>
      <td>`#esempio`</td>
      <td>Il selettore ID si rivolge a un unico elemento con un ID specifico. L’integrazione nel codice sorgente HTML avviene grazie all’attributo `id` (`id="esempio"`).</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Selettore universale</td>
      <td>`*`</td>
      <td>Il selettore universale asterisco (`*`) si rivolge a tutti gli elementi HTML di un documento.</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

N.B. Quando più regole si applicano allo stesso elemento, la specificità di un selettore determina quale regola viene applicata. Ogni tipo di selettore ha un valore specifico che contribuisce al calcolo della specificità.

### Selettore di tipo

L’applicazione di diversi selettori CSS risulta più chiara utilizzando esempi concreti. Il codice seguente illustra il selettore `h2` con la dichiarazione:

```css
h2 {
color: #305796;
font-family: Helvetica, sans-serif;
}
```

L’applicazione di stile è relativa a tutti gli elementi HTML del tipo `h2`.

### Selettore di classe

In alternativa, l’applicazione dello stile può avvenire tramite un selettore di classe. Questo permette ai web designer di munire gli elementi HTML delle stesse istruzioni, indipendentemente dal gruppo di appartenenza.

```css
.content {
color: #ff0000;
font-family: Helvetica, sans-serif;
}
```

L’applicazione fa riferimento a tutti gli elementi HTML ai quali è stata applicata la classe `.content`. Questa assegnazione avviene secondo il seguente schema nel codice HTML:

```html
<p class="special-text">Esempio di testo</p>
```

N.B. In HTML i nomi delle classi vengono scritti senza punto.

### Selettore ID

Se un’istruzione dovesse far riferimento esclusivamente a un singolo elemento all’interno del codice sorgente HTML, allora si adatta bene il selettore ID. Il seguente esempio mostra l’applicazione dello stile di una barra di navigazione:

```css
#navigation {
font-family: Helvetica, sans-serif;
background-color: #8ad8d4;
border: 2px solid #448278;
}
```

L’assegnazione di uno stile avviene nel codice sorgente HTML senza l’hashtag:

```html
<div id="navigation">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="contatti.htm">Contatti</a></li>
</ul>
</div>
```

Il vantaggio dei selettori ID è che a prima vista appare subito evidente quali sezioni del codice sorgente sono **campi che ricorrono una volta sola**.

### Selettore universale

Se un’istruzione dovesse riferirsi a tutti gli elementi di un documento HTML, allora interverrebbe l’asterisco (`*`):

```css
* {
font-family: Helvetica, sans-serif;
}
```

In questo modo tutti gli elementi di testo verranno rappresentati sul browser con il font Helvetica.

## Integrare il CSS in HTML

Per permettere che un browser possa prendere in considerazione applicazioni di stile CSS, le istruzioni devono essere collegate al codice sorgente HTML. A questo scopo esistono tre possibilità:

- L’integrazione diretta della dichiarazione CSS nei tag HTML
- L’assegnazione CSS all’interno del tag head HTML
- Il rinvio a un foglio di stile separato

L’ultima soluzione proposta rappresenta la scorciatoia ideale: nella pratica i fogli di stile vengono aggiunti come file di testo esterni e successivamente collegati al progetto.

### Dichiarazione CSS all’interno dei tag HTML

Se una dichiarazione CSS definisce lo stile di una singola parte del codice sorgente, allora le istruzioni di stile possono venire direttamente applicate sul tag dell’elemento HTML grazie all’attributo `style`. In questo caso si parla di **inline-style**, o anche stile in linea.

```html
<h2 style="color: red;">Sottotitolo</h2>
```

Questo metodo ha i vantaggi che **non è necessario** configurare un **foglio di stile apposito**, che il selettore sparisce e che una tale istruzione ha una priorità elevata (valore 1000). Solamente nel momento in cui deve essere applicato un blocco di dichiarazioni, allora questo metodo di stile risulta poco chiaro e ridondante.

### Assegnazione del CSS nell’head HTML

Se un’istruzione di stile che si trova all’interno di un documento HTML è valida più volte per lo stesso elemento, come ad esempio per tutti gli `h2` del sito web, la dichiarazione CSS integrata nel tag HTML diventa inefficiente. Piuttosto risulta più conveniente definire le relative regole una volta sola all’interno dell’head HTML del documento grazie all’[elemento style](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-style-html/):

```html

<html lang="it">
<head>
<style>
h2 {
color: #ff0000;
font-family: 'Helvetica Neue', sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<h2>Sottotitolo1</h2>
[…]
<h2>Sottotitolo2</h2>
[…]
</body>
</html>
```

Il blocco di dichiarazioni all’interno dell’elemento `style` viene applicato automaticamente su tutti gli elementi `h2` che seguono. Se l’elemento `h2` deve essere applicato con le stesse istruzioni qui definite anche ad altre pagine dello stesso progetto online, puoi definire semplicemente l’istruzione dal file CSS centrale.

### Rimando a un foglio di stile separato

Se le istruzioni di stile vengono definite in un foglio di stile separato, allora quest’ultimo va collegato al documento HTML di base. Questo avviene utilizzando l’elemento HTML `<link>`.

```html
<link rel="stylesheet" href="esempio.css">
```

L’elemento `link` contiene gli attributi obbligatori `rel` e `href` e può essere completato idealmente con gli attributi `type` e `media`.

<table>
  <thead>
    <tr>
      <th><strong>Attributi dell’elemento `link`</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`rel`</td>
      <td>L’attributo `rel` definisce il tipo di relazione dell’elemento. Il valore `stylesheet` comunica che va collegato un foglio di stile.</td>
    </tr>
    <tr>
      <td>`href`</td>
      <td>L’attributo `href` incorpora il file che dovrà essere integrato come foglio di stile.</td>
    </tr>
    <tr>
      <td>`type`</td>
      <td>L’attributo ottimale `type` descrive i tipi di media del file da incorporare nel caso di CSS `text/css`.</td>
    </tr>
    <tr>
      <td>`media`</td>
      <td>Con l’attributo `media` si ha la possibilità di determinare che i fogli di stile incorporati vengano applicati solamente a un media specifico in uscita. Ciò permette di realizzare diversi fogli di stile a seconda del dispositivo finale. Possibili valori sono ad esempio `screen` o `print`.</td>
    </tr>
  </tbody>
</table>

## I colori CSS

Come accennato nel capitolo introduttivo, le **assegnazioni cromatiche tramite CSS** sono possibili utilizzando i nomi dei colori in inglese. In realtà tali istruzioni di stile si trovano molto raramente, perché solitamente viene applicato il [modello RGB](https://www.ionos.it/digitalguide/siti-web/web-design/colori-rgb/): esso offre infatti decisamente più sfumature e permette quindi a chi gestisce un sito web di configurare impostazioni cromatiche dettagliate. I codici corrispondenti possono essere rintracciati con l’aiuto di un **selettore colore**, offerto, ad esempio, da Google sotto forma di Quick Answer.

[![Immagine: Selettore colore nel motore di ricerca Google](https://www.ionos.it/digitalguide/fileadmin/_processed_/4/b/csm_screenshot-google-color-picker_4a1cfeccc6.webp "Selettore colore nel motore di ricerca Google")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/screenshot-google-color-picker.jpg) Con un selettore colore puoi visualizzare comodamente i valori cromatici. Nel modello RGB le quantità di colore vengono definite attraverso **valori decimali tra 0 e 255**. Mentre un valore di 0 significa che un colore non ha alcuna quota del colore primario in questione, al contrario, il valore 255 indica il valore massimo della quota.

A partire dalla versione CSS3 i valori RGB possono essere ampliati di un valore, il cosiddetto **canale alfa** (a): questo, infatti, descrive il **grado di trasparenza/opacità** di un colore utilizzando valori da 0 a 1 (ad esempio 0.8). I colori RGB vengono quindi definiti in CSS come segue:

```css
rgba(valore di rosso, valore di giallo, valore di blu, opacità/trasparenza)
```

In questo modo, per il colore primario blu, i seguenti valori RGBA danno come risultato una **trasparenza** del 50 %.

```css
rgba(0, 0, 255, 0.5)
```

N.B. Puoi indicare i valori RGB anche in formato esadecimale. Lo schema di base di un codice colore esadecimale consiste in un hashtag (#) seguito da sei cifre esadecimali che, in coppie di due, rappresentano ciascun colore dello spazio colore RGB (rosso, verde, blu).

## Le proprietà CSS più importanti

Con il CSS hai a disposizione molte proprietà con le quali è possibile definire istruzioni per gli elementi HTML. Ogni proprietà accetta un **blocco di valori stabilito** nella specificazione. Per garantire chiarezza, le proprietà CSS vengono raggruppate in campi di applicazione. Qui ci concentriamo sulle proprietà più importanti.

### Aspetto grafico del testo

L’aspetto grafico del testo appartiene alle caratteristiche fondamentali di un sito web. Il CSS ti offre diverse possibilità di **formattare gli elementi di testo di una pagina HTML**.

#### `font-family`

Se per gli elementi di testo di una pagina web deve essere definito un determinato **tipo di carattere (font)**, si utilizza la proprietà CSS `font-family`. Questa ti consente di creare un cosiddetto stack di caratteri (font stack). Si tratta di un elenco prioritario di font adatti. Gli stack di caratteri sono strutturati in modo che per primo venga indicato il tipo di carattere desiderato e, a seguire, un elenco di alternative di visualizzazione adatte:

```css
.content {
font-family: Georgia, Garamond, serif;
}
```

L’esempio mostra un’istruzione nel file CSS.

Il **font prioritario** definito è Georgia, come **font alternativo** abbiamo Garamond. Così facendo il browser avrà il compito di rappresentare il testo con Garamond nel momento in cui il font prioritario Georgia non sia installato sul sistema.

Consiglio Si consiglia, come meccanismo di fallback, di definire una famiglia di caratteri generica. Si tratta di un nome segnaposto generico per un gruppo di caratteri simili.

#### `font-style`

La proprietà CSS `font-style` si riferisce allo stile di scrittura di un paragrafo di testo e ti offre la possibilità di definire l’inclinazione del testo in base a uno dei tre valori seguenti:

<table>
  <thead>
    <tr>
      <th><strong>Valori di inclinazione del testo</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`normal`</td>
      <td>Scrittura normale (impostazione standard)</td>
    </tr>
    <tr>
      <td>`italic`</td>
      <td>Corsivo</td>
    </tr>
    <tr>
      <td>`oblique`</td>
      <td>Testo inclinato (anche se il font non ha una variante corsiva)</td>
    </tr>
  </tbody>
</table>

Il seguente esempio mostra un’istruzione per lo stile di font in corsivo:

```css
.special-content {
font-family: Arial;
font-style: italic;
}
```

#### `font-variant`

La proprietà CSS `font-variant` interviene per definire **varianti di scrittura**.

<table>
  <thead>
    <tr>
      <th><strong>Valori di varianti di scrittura</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`normal`</td>
      <td>Variante di scrittura normale (impostazione standard)</td>
    </tr>
    <tr>
      <td>`small-caps`</td>
      <td>Maiuscoletto (testo in maiuscolo all’altezza delle minuscole) per lettere minuscole</td>
    </tr>
    <tr>
      <td>`all-small-caps`</td>
      <td>Maiuscoletto per lettere minuscole e maiuscole</td>
    </tr>
  </tbody>
</table>

Il seguente esempio determina una variante di scrittura `small-caps`:

```css
.content {
font-family: Arial;
font-variant: small-caps;
}
```

#### `font-size`

Con la proprietà CSS `font-size` viene definita la **dimensione** degli elementi di testo. Ciò può avvenire sia con valori assoluti oppure relativamente agli elementi circostanti. Viene indicata l’altezza dei caratteri, ovvero il **corpo del carattere**. I web designer avranno a disposizione vari metodi di scrittura e unità di misura.

#### Unità di misura assolute

Le **unità di misura assolute** si orientano secondo misure di lunghezza fisiche. Sullo schermo i browser tramutano tutte queste unità in pixel riportando una risoluzione di 96 dpi. Oltre che per i `px`, le unità di misura assolute non giocano alcun ruolo fondamentale nel mondo del web design: il loro vero senso è tutt’al più per la pubblicazione su carta.

<table>
  <thead>
    <tr>
      <th><strong>Unità</strong></th>
      <th><strong>Scrittura CSS</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pixel</td>
      <td>`px`</td>
      <td>L’unità di misura px corrisponde alla dimensione di un elemento in pixel. I pixel vengono rappresentati sui display in relazione alla densità di punti (ad esempio “dots per inch”, dpi). Come valore indicativo per la scala ci si orienta sul principio seguente: 1 pixel CSS corrisponde a 1/96 di un pollice. L’utente può cambiare l’attribuzione stabilita in unità px zoomando direttamente nel browser.</td>
    </tr>
    <tr>
      <td>Centimetro</td>
      <td>`cm`</td>
      <td>Dimensione in centimetri</td>
    </tr>
    <tr>
      <td>Millimetro</td>
      <td>`mm`</td>
      <td>Dimensione in millimetri</td>
    </tr>
    <tr>
      <td>Pollice</td>
      <td>`in`</td>
      <td>Dimensione in pollici (1 in = 2,54 cm)</td>
    </tr>
    <tr>
      <td>Punto</td>
      <td>`pt`</td>
      <td>Dimensione in punti (1 pt corrisponde a 1/72 di 1 pollice)</td>
    </tr>
    <tr>
      <td>Pica</td>
      <td>`pc`</td>
      <td>Dimensione in Pica (1 Pica corrisponde a 12 punti)</td>
    </tr>
  </tbody>
</table>

Inoltre, è possibile definire la dimensione del carattere tramite **parole chiave assolute**:

<table>
  <thead>
    <tr>
      <th><strong>Parola chiave</strong></th>
      <th><strong>Descrizione</strong></th>
      <th><strong>Esempio</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`xx-small`</td>
      <td>minuscolo</td>
      <td>9 px</td>
    </tr>
    <tr>
      <td>`x-small`</td>
      <td>molto piccolo</td>
      <td>10 px</td>
    </tr>
    <tr>
      <td>`small`</td>
      <td>piccolo</td>
      <td>13 px</td>
    </tr>
    <tr>
      <td>`medium`</td>
      <td>medio (dimensione del carattere predefinita del browser)</td>
      <td>16 px</td>
    </tr>
    <tr>
      <td>`large`</td>
      <td>grande</td>
      <td>19 px</td>
    </tr>
    <tr>
      <td>`x-large`</td>
      <td>molto grande</td>
      <td>24 px</td>
    </tr>
    <tr>
      <td>`xx-large`</td>
      <td>enorme</td>
      <td>32 px</td>
    </tr>
  </tbody>
</table>

#### Unità di misura relative

Per quanto riguarda le **unità di misura relative**, si tratta di indicazioni che si riferiscono alla dimensione del carattere e che vengono determinate a seconda di una dimensione prestabilita. Gli elementi HTML ereditano la loro dimensione del font dagli elementi genitore. Inoltre, un riferimento per la dimensione relativa del font può essere un **valore tecnico indicativo**, come la dimensione del display di un dispositivo o un valore standard sul browser.

<table>
  <thead>
    <tr>
      <th><strong>Unità</strong></th>
      <th><strong>Scrittura CSS</strong></th>
      <th><strong>Descrizion</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Percentuale</td>
      <td>`%`</td>
      <td>L’unità di misura `%` indica la dimensione del font in proporzione percentuale alla dimensione del font ereditata.</td>
    </tr>
    <tr>
      <td>em (altezza del font)</td>
      <td>`em`</td>
      <td>Anche l’unità di misura `em` è in relazione all’elemento genitore. `1 em` corrisponde al 100 % della dimensione del font ereditata. Se non è stata definita nessuna dimensione per l’elemento genitore, allora verrà adottata la dimensione standard del dispositivo.</td>
    </tr>
    <tr>
      <td>Altezza x</td>
      <td>`ex`</td>
      <td>Il valore di riferimento per l’unità di misura `ex` è l’altezza della lettera minuscola x del font scelto. Se per un font non è stata definita nessuna altezza, allora vale il principio: `1 ex` = `0.5 em`.</td>
    </tr>
    <tr>
      <td>Root-em</td>
      <td>`rem`</td>
      <td>L’unità di misura `rem` fa riferimento all’elemento radice di un documento (ad esempio l’elemento HTML). 1 rem corrisponde al 100% della dimensione del font che è stata stabilita per l’elemento radice.</td>
    </tr>
    <tr>
      <td>Larghezza viewport</td>
      <td>`vw`</td>
      <td>L’unità di misura `vw` si orienta alla larghezza del viewport, ovvero il campo visivo, di un dispositivo utilizzato per la riproduzione. In questo caso vale: `1 vw` = 1% della larghezza del viewport.</td>
    </tr>
    <tr>
      <td>Altezza viewport</td>
      <td>`vh`</td>
      <td>L’unità di misura `vh` si orienta secondo l’altezza di un dispositivo rappresentante. In questo caso vale: `1 vh` = 1% dell’altezza del viewport.</td>
    </tr>
  </tbody>
</table>

La dimensione del carattere può essere definita anche tramite **parole chiave relative**. Come riferimento vale la dimensione del carattere predefinita del browser.

<table>
  <thead>
    <tr>
      <th><strong>Valore relativo</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`smaller`</td>
      <td>L’elemento attuale viene rappresentato più piccolo rispetto all’elemento genitore.</td>
    </tr>
    <tr>
      <td>`larger`</td>
      <td>L’elemento attuale viene rappresentato più grande rispetto all’elemento genitore.</td>
    </tr>
  </tbody>
</table>

Per assicurare una rappresentazione ottimale della dimensione del font su diversi dispositivi è raccomandabile **utilizzare unità di misura relative** come `em` oppure `%`.

Lo schema di base della formattazione della dimensione del font tramite CSS corrisponde al seguente esempio di codice:

```css
.content {
font-size: 19em;
}
```

#### `line-height`

La proprietà CSS `line-height` viene utilizzata per definire l’**altezza delle righe** di un paragrafo di testo. Valgono le stesse unità di misura di `font-size`, anche se le indicazioni di percentuale `font-size` si riferiscono ai relativi testi. In alternativa è possibile indicare l’elemento `line-height` in cifre senza unità di misura. Ulteriori valori possibili sono `normal` (impostazione standard) e `inherit` (corrispondente all’elemento genitore).

Ad esempio, una `line-height` di 1.5 corrisponde a un’altezza di riga del 150% della relativa altezza di font oppure a `1.5 em`.

```css
.content {
line-height: 1.5;
}
```

#### `font-weight`

La proprietà CSS `font-weight` definisce lo **spessore del tratto** di un elemento di testo. I web designer lo utilizzano per rappresentare parti testuali in grassetto. I valori sono indicabili in termini assoluti o relativi rispetto all’elemento genitore.

<table>
  <thead>
    <tr>
      <th><strong>Valori assoluti per la proprietà font-weight</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1-1000</td>
      <td>Valori numerici da 1 (extra sottile) a 1000 (extra grassetto)</td>
    </tr>
    <tr>
      <td>`normal`</td>
      <td>Spessore del tratto normale (corrisponde al valore 400)</td>
    </tr>
    <tr>
      <td>`bold`</td>
      <td>Grassetto (corrisponde al valore 700)</td>
    </tr>
  </tbody>
</table>

Le cifre hanno rilevanza solamente nei [font web](https://www.ionos.it/digitalguide/siti-web/web-design/come-la-scelta-del-font-giusto-puo-rivelarsi-essenziale/), per cui di norma bastano solamente **due differenti spessori del tratto**: `normal` e `bold`.

```css
.content {
font-weight: normal;
}
.content {
font-weight: bold;
}
```

I **valori relativi** della proprietà CSS `font-weight` definiscono il peso del carattere di un elemento di testo in relazione allo spessore del tratto ereditato dell’elemento genitore.

<table>
  <thead>
    <tr>
      <th><strong>Valori relativi per la proprietà font-weight</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`bolder`</td>
      <td>Grassetto maggiore rispetto all’elemento genitore</td>
    </tr>
    <tr>
      <td>`lighter`</td>
      <td>Più leggero rispetto all’elemento genitore</td>
    </tr>
  </tbody>
</table>

### Formattazione del testo

Accanto alla formattazione dell’aspetto grafico carattere, il CSS mette a disposizione diverse **proprietà per la formattazione testuale**. Queste permettono di applicare impostazioni riguardanti l’allineamento del testo e la distanza tra caratteri e parole oppure di decorare elementi di testo.

#### `text-align`

La proprietà CSS `text-align` serve a **posizionare elementi di testo e inline**, questi ultimi sono quegli elementi contenuti all’interno del flusso testuale, come possono essere immagini o pulsanti. I valori usuali sono:

- `left` (allineamento a sinistra)
- `right` (allineamento a destra)
- `center` (centrato)
- `justify` (giustificato)
- `inherit`(come l’elemento genitore).

Il codice seguente porta a un allineamento centrale dell’esempio testuale:

```css
.content {
text-align: center;
}
```

Esistono, inoltre, valori relativi alla proprietà `text-align` per la definizione dell’**allineamento testuale in relazione alla direzione di un testo** (`direction`).

<table>
  <thead>
    <tr>
      <th><strong>Valori per l’allineamento testuale relativo</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`start`</td>
      <td>Il testo viene posizionato sul lato in cui inizia. Per una direzione da sinistra a destra `{ direction: ltr; }` il valore corrisponde al valore `left`. Invece per una direzione da destra a sinistra `{ direction: rtl; }` il valore corrisponde al valore `right`.</td>
    </tr>
    <tr>
      <td>`end`</td>
      <td>Il testo viene posizionato sul lato in cui finisce.</td>
    </tr>
  </tbody>
</table>

Il valore `start` è considerato il valore standard.

Tutti i browser in uso posizionano l’**ultima riga dell’allineamento giustificato** automaticamente a sinistra. Se però questo risultato non è desiderato, può venire formattato separatamente grazie alla proprietà CSS `text-align-last`. I possibili valori corrispondono a quelli della proprietà `text-align`.

#### `hyphens`

In aggiunta, il CSS offre la possibilità di **dividere automaticamente le sillabe** con l’aiuto della proprietà `hyphens`. Il linguaggio di stile mette a disposizione i seguenti valori per la proprietà in questione:

<table>
  <thead>
    <tr>
      <th><strong>Valori per la proprietà `hyphens`</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`manual`</td>
      <td>Divisone manuale delle sillabe: i trattini vengono presi in considerazione durante la separazione delle sillabe (valore standard).</td>
    </tr>
    <tr>
      <td>`none`</td>
      <td>Nessuna divisone delle sillabe: i trattini non vengono presi in considerazione durante la separazione delle sillabe. L’interruzione di riga avviene esclusivamente con uno spazio.</td>
    </tr>
    <tr>
      <td>`auto`</td>
      <td>Divisione automatica delle sillabe: la divisione delle parole avviene secondo le regole della lingua definita nell’attributo HTML `lang`.</td>
    </tr>
    <tr>
      <td>`inherit`</td>
      <td>Le impostazioni corrispondono a quelle dell’elemento genitore.</td>
    </tr>
  </tbody>
</table>

#### `word-spacing`

La proprietà CSS `word-spacing` regola la **distanza tra le parole** all’interno di un elemento testuale; in questo modo i gestori delle pagine web hanno la possibilità di definire le distanze che intercorrono tra le parole definendo indicazioni delle dimensioni. A questo scopo sono a disposizione le unità di misura rappresentate nella proprietà `font-size`, esclusa l’indicazione della percentuale. In aggiunta sono disponibili anche i valori `normal` (impostazione standard) e `inherit` (corrispondente all’elemento genitore).

L’esempio di codice che segue definisce una distanza tra le parole di `2 em`, che va ad aggiungersi alla distanza predefinita.

```css
.content {
word-spacing: 2em;
}
```

#### `letter-spacing`

Se non è la distanza tra le parole a dover essere definita, bensì quella tra le lettere, allora entra in gioco la proprietà CSS `letter-spacing`. Anche in questo caso si può disporre dei valori `normal` e `inherit`, sempre escludendo il valore percentuale.

L’esempio di codice che segue mostra una parte di testo in cui una parola viene messa in evidenza da una distanza tra le lettere di `1 em`.

```css
.special-content {
letter-spacing: 1em;
}
```

#### `text-indent`

Con la proprietà CSS `text-indent` hai la possibilità di **indentare** esclusivamente la prima riga di un paragrafo, ovvero assegnarle un **rientro sinistro**. I valori possibili sono positivi e negativi, come anche indicazioni di percentuale in relazione alla larghezza del **blocco di testo** in questione.

L’esempio di codice seguente definisce un’indentatura del 5% della prima riga. La classe viene assegnata nel codice sorgente HTML tramite elementi `span`:

```css
.content {
text-indent: 5%;
}
```

Per definire un capoverso, viene applicato un valore negativo alla proprietà `text-indent`.

#### `text-decoration`

La proprietà CSS `text-decoration` ti offre la possibilità di decorare gli elementi di testo ad esempio con sottolineature. I valori possibili sono:

<table>
  <thead>
    <tr>
      <th><strong>Valori per la proprietà `text-decoration`</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`none`</td>
      <td>Nessuna decorazione testuale.</td>
    </tr>
    <tr>
      <td>`underline`</td>
      <td>Viene sottolineata ogni riga del paragrafo contrassegnato.</td>
    </tr>
    <tr>
      <td>`overline`</td>
      <td>Sopra a ogni riga del paragrafo contrassegnato viene rappresentata una linea.</td>
    </tr>
    <tr>
      <td>`line-through`</td>
      <td>Viene tracciata una linea sulla parte centrale del testo di ogni riga del paragrafo contrassegnato, con effetto di testo barrato.</td>
    </tr>
    <tr>
      <td>`inherit`</td>
      <td>La decorazione testuale corrisponde a quella dell’elemento genitore.</td>
    </tr>
  </tbody>
</table>

L’esempio di codice che segue definisce le sottolineature per gruppi di parole scelti all’interno del paragrafo.

```css
.content-underline {
text-decoration: underline;
}
```

#### `text-transform`

La proprietà `text-transform` permette di attuare **trasformazioni usando il CSS**. In questo modo è possibile rappresentare parti testuali in maiuscolo o minuscolo senza dover adattare anche la base testuale. La proprietà consente le seguenti trasformazioni:

<table>
  <thead>
    <tr>
      <th><strong>Valori per la proprietà `text-transform`</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`capitalize`</td>
      <td>La prima lettera di ogni parola è in maiuscolo.</td>
    </tr>
    <tr>
      <td>`uppercase`</td>
      <td>L’intero paragrafo è in maiuscolo.</td>
    </tr>
    <tr>
      <td>`lowercase`</td>
      <td>L’intero paragrafo è in minuscolo.</td>
    </tr>
    <tr>
      <td>`none`</td>
      <td>Non avviene alcuna trasformazione.</td>
    </tr>
    <tr>
      <td>`inherit`</td>
      <td>La trasformazione è conforme allo stato dell’elemento genitore.</td>
    </tr>
  </tbody>
</table>

Se le lettere iniziali di un paragrafo devono essere riprodotte indipendentemente dal testo di origine e con lettere maiuscole, allora la seguente formattazione sarà l’ideale:

```css
.content {
text-transform: capitalize;
}
```

### Colori del font e dello sfondo

Nella scelta dei colori del font e dello sfondo i web designer di norma attingono ai codici colore in scrittura decimale o esadecimale precedentemente spiegati. Ci sono tutta una serie di proprietà che usano questi codici colore.

#### `color`

La proprietà CSS `color` è utile per la **formattazione del colore del font**. I valori usuali sono indicazioni cromatiche in forma di valori RGB, codici HEX o indici HSL. Oltre a ciò, i valori `transparent` e `opacity` riescono a rappresentare gli elementi trasparenti. L’esempio di codice che segue mostra la formattazione cromatica sulla base di un codice colore HEX:

```css
.content {
font-family: Arial;
font-size: 5em;
color: #d82451;
}
```

#### `background-color`

La proprietà CSS `background-color` entra in azione quando a un elemento va attribuito un **colore di sfondo**. I possibili valori corrispondono agli stessi della proprietà `color`.

L’esempio di codice che segue mostra una **formattazione del colore di font e sfondo**:

```css
.content {
font-family: Arial;
font-size: 5em;
color: #d82451;
background-color: #24d8ab;
}
```

La formattazione indica al browser che tutti gli elementi di testo della classe `content` vanno rappresentati in rosso magenta (`#d82451`) e il loro sfondo in turchese (`#24d8ab`).

#### `background-image`

In alternativa a un colore si può decidere di caricare una **grafica come sfondo**. Per fare questo i web designer sfruttano la proprietà `background-image`, che nel valore contiene il percorso relativo alla grafica selezionata:

```css
.content {
background-image:
url (percorso al file di immagine);
}
```

Invece di `background-image` o di `background-color` è possibile anche adoperare la dicitura più breve `background`.

Oltre a ciò, il CSS offre la possibilità di definire come sfondo dei **gradienti di colori**:

<table>
  <thead>
    <tr>
      <th><strong>Gradienti di colore CSS</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`linear-gradient()`</td>
      <td>La funzione crea un gradiente di colori lineare.</td>
    </tr>
    <tr>
      <td>`radial-gradient()`</td>
      <td>La funzione crea un gradiente di colori radiale.</td>
    </tr>
    <tr>
      <td>`repeating-linear-gradient()`</td>
      <td>La funzione crea un gradiente di colori lineare che si ripete.</td>
    </tr>
    <tr>
      <td>`repeating-radial-gradient()`</td>
      <td>La funzione crea un gradiente di colori radiale che si ripete.</td>
    </tr>
  </tbody>
</table>

Nella nostra introduzione al CSS ci limitiamo a utilizzare la funzione `linear-gradient()` come esempio. Se a un elemento va apposto uno sfondo con gradiente di colore lineare, allora si utilizza la funzione `linear-gradient()` come valore per la proprietà `background`, la quale necessita di **almeno due indicazioni di colore**. La modalità di scrittura con la quale vengono definiti i colori non è rilevante.

```css
.content {
width: 400px;
height: 400px;
background: linear-gradient( green, yellow );
}
```

### Bordi

Il CSS ti permette anche di applicare un bordo agli elementi HTML. È particolarmente consigliato per i cosiddetti “**elementi a livello di blocco**”, come i titoli, i paragrafi, i [contenitori div](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/html-div/) o le [tabelle HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tabella-html/), che appaiono all’interno dell’elemento `body`. Senza che sia necessaria un’ulteriore formattazione, questi elementi di contenuto vanno a prolungarsi su tutta la larghezza possibile e si posizionano seguendo uno sotto l’altro.

Gli elementi di blocco non vanno confusi con gli **elementi inline** come `<b>`, `<i>`, `<a>` o `<span>`. Questi elementi sono presenti esclusivamente all’interno degli elementi di blocco. La larghezza di un elemento inline viene determinata solamente dal suo contenuto.

Se un bordo deve incorniciare un intero elemento di blocco o inline, allora ci si serve della proprietà `borders`. In alternativa puoi definire l’impostazione del bordo per ogni singolo lato dell’elemento.

<table>
  <thead>
    <tr>
      <th><strong>Proprietà per i bordi</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`border`</td>
      <td>Definisce le impostazioni dei bordi per tutti i lati dell’elemento.</td>
    </tr>
    <tr>
      <td>`border-top`</td>
      <td>Definisce le impostazioni del bordo in alto.</td>
    </tr>
    <tr>
      <td>`border-right`</td>
      <td>Definisce le impostazioni del bordo a destra.</td>
    </tr>
    <tr>
      <td>`border-bottom`</td>
      <td>Definisce le impostazioni del bordo in basso.</td>
    </tr>
    <tr>
      <td>`border-left`</td>
      <td>Definisce le impostazioni del bordo a sinistra.</td>
    </tr>
  </tbody>
</table>

Sia la proprietà `border` che le proprietà specifiche per i singoli bordi possono essere ulteriormente specificate. I valori corrispettivi vengono separati da uno spazio e annotati secondo il seguente schema dopo la proprietà:

```css
.content {
border: style width color;
}
.content {
border: solid 4px #ff0000;
}
```

Inoltre la proprietà `border-radius` offre la possibilità di arrotondare gli **spigoli del bordo**.

#### Tipologia di bordo

Con la scelta della tipologia di bordo definisci un bordo decorativo per l’elemento di blocco o inline in questione. Alcune tipologie sono effettivamente visibili solo quando viene indicata una dimensione del bordo adeguata.

<table>
  <thead>
    <tr>
      <th><strong>Possibili valori per la tipologia di bordo</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`none`</td>
      <td>Nessun bordo</td>
    </tr>
    <tr>
      <td>`hidden`</td>
      <td>Non mostra il bordo e lo nasconde anche nelle celle adiacenti.</td>
    </tr>
    <tr>
      <td>`dotted`</td>
      <td>Definisce un bordo puntato.</td>
    </tr>
    <tr>
      <td>`dashed`</td>
      <td>Definisce un bordo a trattini.</td>
    </tr>
    <tr>
      <td>`solid`</td>
      <td>Definisce un bordo con linea continua.</td>
    </tr>
    <tr>
      <td>`double`</td>
      <td>Definisce un bordo doppio.</td>
    </tr>
    <tr>
      <td>`groove, ridge, inset, outset`</td>
      <td>Con questi valori è possibile realizzare diversi effetti 3D.</td>
    </tr>
  </tbody>
</table>

La seguente grafica mette a confronto le **tipologie di bordo CSS**:

[![Immagine: I tipi di bordo CSS](https://www.ionos.it/digitalguide/fileadmin/_processed_/e/d/csm_css-border-types_50ce263eda.webp "I tipi di bordo CSS")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-border-types.jpg) Esistono diversi tipi di bordo CSS con un aspetto diverso. L’**indicazione della tipologia di bordo è obbligatoria**, quindi se non viene inserita il browser non la rappresenterà, anche se sono presenti valori per lo spessore o i colori dei bordi.

#### Spessore del bordo

Lo spessore del bordo definisce lo spessore della linea che intercorre lungo il bordo.

<table>
  <thead>
    <tr>
      <th><strong>Possibili valori per lo spessore del bordo</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Indicazione della lunghezza</td>
      <td>L’indicazione dello spessore del bordo avviene con l’aiuto delle unità di misura presenti in `font-size`. Lo spessore del bordo non può venire indicato in valori percentuali.</td>
    </tr>
    <tr>
      <td>`thin`</td>
      <td>Sottile</td>
    </tr>
    <tr>
      <td>`medium`</td>
      <td>Medio/forte</td>
    </tr>
    <tr>
      <td>`thick`</td>
      <td>Forte</td>
    </tr>
  </tbody>
</table>

#### Colore del bordo

Le impostazioni di colore per la proprietà `border-color` corrispondono a quelle delle proprietà `color` e `background-color`.

<table>
  <thead>
    <tr>
      <th><strong>Possibili valori per il colore del bordo</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Indicazioni di colore</td>
      <td>Indicazioni di colore per il bordo possono essere inserite sia sotto forma di parole chiave , di valori HEX e anche RGB o HSL.</td>
    </tr>
    <tr>
      <td>`transparent`</td>
      <td>Definisce il bordo rendendolo trasparente.</td>
    </tr>
  </tbody>
</table>

Il seguente esempio di codice combina la proprietà `border` con le formattazioni dei colori del font e dello sfondo. Il blocco di regole viene definito all’interno del file CSS per la classe `bordo`:

```css
.bordo {
font-family: Arial;
font-size: 5em;
color: #d82451;
background-color: #24d8ab;
border: 10px ridge #d82451;
}
```

#### `border-radius`

La proprietà `border-radius` permette di arrotondare gli **spigoli di un bordo** sia a cerchio che a ellisse. Un qualsiasi sfondo verrà quindi tagliato lungo la curva definita; ciò funziona anche se l’elemento non ha un bordo. Infine, con `border-radius` è possibile anche inserire facilmente forme geometriche.

I valori possibili per la proprietà `border` hanno fino a quattro indicazioni di dimensione che stanno ognuna per un angolo del bordo. L’assegnazione può avvenire a scelta tramite uno, due, tre o quattro valori.

<table>
  <thead>
    <tr>
      <th><strong>Valori per la proprietà border-radius</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Un valore</td>
      <td>Vale per tutti e quattro gli angoli.</td>
    </tr>
    <tr>
      <td>Due valori</td>
      <td>Il primo valore definisce gli angoli in alto a sinistra e in basso a destra. Il secondo valore definisce gli angoli in alto a destra e in basso a sinistra.</td>
    </tr>
    <tr>
      <td>Tre valori</td>
      <td>Il primo valore definisce l’angolo in alto a sinistra. Il secondo valore definisce gli angoli in alto a destra e in basso a sinistra. Il terzo valore definisce gli angoli in basso a destra.</td>
    </tr>
    <tr>
      <td>Quattro valori</td>
      <td>Ogni angolo viene definito da un valore proprio. Vale la successione in senso orario: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra.</td>
    </tr>
  </tbody>
</table>

I singoli valori per il **raggio del bordo** sono separati da spazi e annotati dopo la proprietà `border-radius`. In questo modo la dichiarazione risulta nel seguente schema (i valori numerici sono esempi):

```css
border-radius: 4em 2em 3em 1em;
```

La proprietà `border-radius` può essere definita all’interno della stessa regola della proprietà `border` o, in alternativa, in classi separate.

Il blocco di regole seguente definisce un bordo con un `border-radius` di 2 em:

```css
.bordo {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
}
```

[![Immagine: Bordo con spigoli arrotondati](https://www.ionos.it/digitalguide/fileadmin/_processed_/6/4/csm_css-rounded-corners_d1e1f17f8c.webp "Bordo con spigoli arrotondati")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-rounded-corners.jpg) Un valore di 2em porta ad angoli arrotondati in modo uniforme. In alternativa è possibile definire **differenti valori per ogni singolo angolo**:

```css
.bordo {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em 1em 3em 4em;
}
```

[![Immagine: Bordo con spigoli arrotondati: per ogni spigolo è stato definito un valore differente](https://www.ionos.it/digitalguide/fileadmin/_processed_/e/5/csm_css-various-rounded-corners_a18bfed27a.webp "Bordo con spigoli arrotondati: per ogni spigolo è stato definito un valore differente")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-various-rounded-corners.jpg) Per ogni angolo può essere definito un valore diverso. In entrambi i casi gli angoli del bordo vengono arrotondati. Può però venire applicato un arrotondamento a ellisse, per cui per ogni angolo vengono richiesti due valori. La dichiarazione di un bordo arrotondato ellitticamente può avere fino a otto valori:

```css
border-radius: 1em 4em 1em 4em / 4em 1em 4em 1em;
```

I valori precedenti alla barra obliqua (*/*) definiscono il raggio sul semiasse orizzontale dell’ellisse, i valori dopo la barra obliqua, invece, il raggio sul semiasse verticale.

```css
.bordo {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 1em 4em / 4em 1em;
}
```

[![Immagine: Bordo con spigoli arrotondati ellitticamente](https://www.ionos.it/digitalguide/fileadmin/_processed_/2/f/csm_css-elliptically-rounded-edges_e0d03d1182.webp "Bordo con spigoli arrotondati ellitticamente")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-elliptically-rounded-edges.jpg) Gli angoli possono essere arrotondati anche ellitticamente. Un eventuale sfondo viene tagliato automaticamente lungo la curva.

```css
.bordo {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
background-color: #24d8ab;
}
```

[![Immagine: Bordo con spigoli arrotondati e sfondo colorato](https://www.ionos.it/digitalguide/fileadmin/_processed_/7/3/csm_css-rounded-corners-background_927c19dc84.webp "Bordo con spigoli arrotondati e sfondo colorato")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-rounded-corners-background.jpg) Lo sfondo viene adattato automaticamente ai bordi. Questo vale sia per i colori sia per le immagini di sfondo, ma non per gli elementi di testo.

[![Immagine: Gli elementi di testo non si adattano automaticamente agli angoli arrotondati del bordo](https://www.ionos.it/digitalguide/fileadmin/_processed_/0/7/csm_css-rounded-corners-text_6b0678c2dd.webp "Gli elementi di testo non si adattano automaticamente agli angoli arrotondati del bordo")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-rounded-corners-text.jpg) Gli elementi di testo devono essere allineati separatamente. ### Posizionamento

La proprietà CSS `position` serve a rimuovere un box dal flusso degli elementi e a posizionarla in un punto del sito web a scelta. Altri box, che siano interni al flusso o che siano anch’essi posizionati, non hanno alcuna influenza sulla posizione di un box che viene formattato con questa modalità.

La proprietà `position` ha diversi valori, che possono essere specificati più precisamente tramite le proprietà `left`, `right`, `top` e `bottom` e i relativi valori come unità di misura:

<table>
  <thead>
    <tr>
      <th><strong>Valori della proprietà position</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`absolute`</td>
      <td>Posiziona il box in modo relativo rispetto all’elemento più vicino con `position`.</td>
    </tr>
    <tr>
      <td>`relative`</td>
      <td>Posiziona il box in modo relativo rispetto alla sua posizione normale.</td>
    </tr>
    <tr>
      <td>`fixed`</td>
      <td>Posiziona il box in modo relativo rispetto alla finestra del browser e lo mantiene fisso durante lo scorrimento.</td>
    </tr>
    <tr>
      <td>`static`</td>
      <td>Il box adotta la sua posizione naturale nel flusso di testo. Se si sceglie la dichiarazione `position: static`, le indicazioni di posizione non valgono. Il valore `static` è standard per la proprietà `position`.</td>
    </tr>
    <tr>
      <td>`sticky`</td>
      <td>Posiziona il box come un elemento con `position: relative` finché si trova all’interno del viewport. Se però rischia di uscire dall’area visibile, esce dal flusso degli elementi e rimane “incollato” durante lo scorrimento. Il valore `sticky` può essere considerato come una combinazione di `relative` e `fixed`.</td>
    </tr>
  </tbody>
</table>

#### Posizionamento assoluto

Con `position: absolute` il box viene rimosso dal flusso degli elementi e **posizionato nel punto definito dalle proprietà riportate di seguito**. I valori sono in relazione all’elemento antenato più vicino di livello superiore, anch’esso specificato tramite la proprietà `position`. Se un tale elemento non esiste, come punto di riferimento viene usato l’elemento radice `<html>`. I box con la dichiarazione `position: absolute` non influiscono sulla posizione degli altri elementi e li sovrappongono oppure vengono sovrapposti da questi.

Le seguenti regole contengono indicazioni assolute di posizionamento dei box CSS `.rosso`, `.blu` e `.verde` all’interno dell’elemento genitore `background`.

```css
.background {
height: 500px;
width: 500px;
border: solid grey
}
.rosso {
height: 150px;
width: 150px;
background-color: rgba(255,0,0,0.5);
position: absolute;
top: 100px;
left: 100px;
}
.blu {
height: 150px;
width: 150px;
background-color: rgba(0,0,255,0.5);
position: absolute;
top: 150px;
left: 150px;
}
.verde {
height: 150px;
width: 150px;
background-color: rgba(0,255,0,0.5);
position: absolute;
top: 200px;
left: 200px;
}
```

I content box `.rosso`, `.blu` e `.verde` sono stati formattati come superfici semitrasparenti con le misure 150 px x 150 px. Il content box `background` con le misure 500 px x 500 px è incorniciato da un bordo grigio.

Le indicazioni di impaginazione sono integrate tramite classi nel codice HTML.

```html
<div class="background">
<p class="rosso"> </p>
<p class="blu"> </p>
<p class="verde"> </p>
</div>
```

La visualizzazione sul browser mostra i differenti posizionamenti dei box all’interno dell’elemento `<div>`. Gli elementi vengono spostati di 50 px in basso a destra. L’applicazione del colore trasparente evidenzia la possibilità di una sovrapposizione usando il posizionamento assoluto.

[![Immagine: Posizionamento assoluto di box CSS](https://www.ionos.it/digitalguide/fileadmin/_processed_/b/2/csm_css-position-absolute_9d1ed0e3c7.webp "Posizionamento assoluto di box CSS")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-position-absolute.jpg) Tre box CSS trasparenti con diverso posizionamento assoluto. #### Posizionamento relativo

Con il posizionamento relativo, il box **rimane integrato nel flusso naturale degli elementi**, ma può essere spostato tramite indicazioni di posizionamento. Il box viene quindi allineato rispetto a se stesso. Gli elementi precedenti e successivi nel flusso si comportano come se il box non fosse stato spostato.

Per allineare un box partendo dalla sua posizione nel flusso degli elementi, il relativo set di regole viene ampliato con la dichiarazione `position: relative` e con le indicazioni di posizione desiderate.

Il seguente blocco di codice lo dimostra prendendo come esempio il box blu:

```css
.blu {
height: 150px;
width: 150px;
background-color: rgba(0,0,255,0.5);
position: relative;
left: 50px;
}
```

L’istruzione di stile `position: relative` con l’indicazione di posizione `left: 50px` comporta, nella visualizzazione del browser, uno spostamento del box blu di 50 px verso sinistra.

[![Immagine: Posizionamento relativo che prescinde dal naturale flusso di elementi](https://www.ionos.it/digitalguide/fileadmin/_processed_/6/8/csm_css-position-relative_9c6bf62d8b.webp "Posizionamento relativo che prescinde dal naturale flusso di elementi")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-position-relative.jpg) Con il posizionamento relativo il box blu viene spostato. Il posizionamento relativo può venire applicato anche a elementi con il float.

#### Box CSS fissi

L’impostazione di box fissi avviene, come già per il posizionamento assoluto, a prescindere dal flusso di elementi. Tutte le indicazioni di posizionamento sono in relazione al campo visivo dell’utente finale. Un box fissato in questo modo appare sempre nella stessa posizione sullo schermo, anche quando un utente scorre la pagina web. In questo modo è possibile fissare nel campo visivo **elementi di navigazione** come menu o pulsanti di blocco (ad esempio “Torna all’inizio della pagina”).

## Il box model CSS

Il box model CSS descrive come i browser visualizzano e posizionano gli elementi HTML come superfici rettangolari (“box”). Ogni sito web consiste essenzialmente in un’interazione di questi box, la cui disposizione è determinata dal cosiddetto flusso degli elementi: per impostazione predefinita, gli elementi vengono posizionati da sinistra a destra e dall’alto verso il basso.

Il CSS distingue in questo caso tra due diversi tipi di contenitori:

- I **box a blocco** (`div`, `p`) che occupano per impostazione predefinita l’intera larghezza del loro elemento genitore e iniziano sempre in una nuova riga.
- I **box inline** (`span`, `b`, `i`) che vengono visualizzati nel flusso del testo e si adattano al contenuto.

Nelle seguenti grafiche è possibile vedere il **flusso di elementi di box a blocco e inline**:

[![Immagine: Tre box a blocco nel flusso di elementi del CSS](https://www.ionos.it/digitalguide/fileadmin/_processed_/3/e/csm_css-three-blocks_07c38c340f.webp "Tre box a blocco nel flusso di elementi del CSS")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-three-blocks.jpg) Flusso degli elementi CSS: i box a blocco vengono visualizzati ciascuno in una nuova riga. I box a blocco strutturano il layout, mentre i box inline sono responsabili del testo e degli elementi inline. I contenitori vuoti come `<div>` servono spesso solo per il raggruppamento e la formattazione tramite CSS.

<table>
  <thead>
    <tr>
      <th><strong>Livelli dei box model</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Area del contenuto (content box)</td>
      <td>La superficie la cui estensione viene definita dalla dimensione del testo o dalla misura di una grafica. Negli elementi di blocco l’altezza e la larghezza possono essere definiti dalle proprietà `height` e `width`. Per quanto riguarda gli elementi inline questo tipo di formattazione non è disponibile.</td>
    </tr>
    <tr>
      <td>Padding (padding box)</td>
      <td>Il padding box (dall’inglese padding = imbottitura) definisce la distanza tra content box e border box.</td>
    </tr>
    <tr>
      <td>Bordo (border box)</td>
      <td>Il border box definisce il bordo.</td>
    </tr>
    <tr>
      <td>Margine (margin box)</td>
      <td>Il margin box definisce la distanza tra l’elemento attuale e il suo elemento genitore o gli elementi adiacenti. La proprietà `margin` può presentare anche valori negativi.</td>
    </tr>
  </tbody>
</table>

Se tutti i quattro angoli di un box devono essere formattati contemporaneamente, allora vengono attivate le proprietà `padding`, `border` e `margin`.

<table>
  <thead>
    <tr>
      <th></th>
      <th><strong>Margine interno</strong></th>
      <th><strong>Bordi</strong></th>
      <th><strong>Margine esterno</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>In alto</td>
      <td>`padding-top`</td>
      <td>`border-top`</td>
      <td>`margin-top`</td>
    </tr>
    <tr>
      <td>In basso</td>
      <td>`padding-bottom`</td>
      <td>`border-bottom`</td>
      <td>`margin-bottom`</td>
    </tr>
    <tr>
      <td>A sinistra</td>
      <td>`padding-left`</td>
      <td>`border-left`</td>
      <td>`margin-left`</td>
    </tr>
    <tr>
      <td>A destra</td>
      <td>`padding-right`</td>
      <td>`border-right`</td>
      <td>`margin-right`</td>
    </tr>
  </tbody>
</table>

I possibili valori per le proprietà di cui sopra sono indicazioni di dimensione come `inherit`, il quale corrisponde all’elemento genitore. I margini esterni sono inoltre definibili grazie al valore `auto`.

La grafica seguente illustra in maniera schematica la **struttura di un box CSS**:

[![Immagine: CSS box model in inglese](https://www.ionos.it/digitalguide/fileadmin/_processed_/5/3/csm_css-box-model_dc7a85cd37.webp "CSS box model in inglese")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model.jpg) Rappresentazione schematica del CSS box model. ### Il CSS box model in azione

Per capire come funziona il CSS box model basta aggiungere a un content box i vari livelli passo per passo. Il punto di partenza è una breve porzione di testo la quale, ad esempio, va formattata tramite il **selettore di classe**:

```html
<p class="content">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>
```

Il blocco di regole seguente decide le dimensioni per il content box: 150px x 150px. Ulteriori formattazioni definiscono il font di colore nero su sfondo grigio. In più, l’allineamento del testo va giustificato:

```css
.content {
height: 150px;
width: 150px;
color: #000000;
text-align: justify;
background-color: #808080;
}
```

Se applichiamo le indicazioni di impaginazione alla porzione di testo, sul browser avremo questa visualizzazione:

[![Immagine: Un content box senza padding, border e margin posizionato in alto a sinistra](https://www.ionos.it/digitalguide/fileadmin/_processed_/1/f/csm_css-box-model-standard_edb38fb300.webp "Un content box senza padding, border e margin posizionato in alto a sinistra")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model-standard.jpg) Se un content box viene definito senza padding, border e margin, appare in alto a sinistra nella finestra del browser. La porzione di testo appare in conformità del flusso di elementi nell’angolo in alto a sinistra del suo elemento genitore. Il testo e il colore di sfondo cominciano senza margine nella parte sinistra della finestra del browser e coprono l’intera superficie disponibile. Lo sfondo si chiude direttamente con il corpo del testo.

Una simile impaginazione è brutta a vedersi e appesantisce la lettura. La proprietà `padding` permette quindi ai web designer di definire un margine interno per distanziare gli elementi di testo da elementi di impaginazione adiacenti.

```css
.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
}
```

Aggiunta al blocco di regole, la dichiarazione `padding: 10px;` porta alla seguente variazione di visualizzazione sul front end:

[![Immagine: Content box con padding](https://www.ionos.it/digitalguide/fileadmin/_processed_/f/2/csm_css-box-model-padding_b788425ee7.webp "Content box con padding")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model-padding.jpg) Il padding definisce la spaziatura interna. Il browser aggiunge a tutti e quattro i lati del **content box** un margine interno di 10px. Come ulteriore elemento di design è possibile utilizzare un bordo.

```css
.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
border: 5px solid #d82451;
}
```

Nel codice di esempio viene utilizzata la proprietà `border` per aggiungere all’elemento un **bordo** continuo rosso bordeaux.

[![Immagine: Content box con valori definiti di padding e border](https://www.ionos.it/digitalguide/fileadmin/_processed_/4/4/csm_css-box-model-border_d3bfe42d12.webp "Content box con valori definiti di padding e border")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model-border.jpg) Il box racchiude il content e il padding box. Tramite il valore del padding, il bordo si distanzia dal contenuto.

Conforme al naturale flusso di elementi, il box formattato in questa maniera si posiziona senza distanza all’angolo in alto a sinistra dell’elemento genitore. La proprietà `margin` fa in modo che il design di un sito web venga reso più piacevole alla vista con l’aiuto di un **margine esterno**.

A questo scopo viene aggiunta la corrispettiva dichiarazione alla regola già esistente:

```css
.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
border: 5px solid #d82451;
margin: 40px;
}
```

Sul browser un simile margine esterno di 40px viene reso come segue:

[![Immagine: Un content box con padding, border e margin](https://www.ionos.it/digitalguide/fileadmin/_processed_/d/8/csm_css-box-model-margin_793102d75a.webp "Un content box con padding, border e margin")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model-margin.jpg) La proprietà margin impone una distanza esterna tra il border box e l’elemento genitore. In alternativa alle indicazioni delle dimensioni, alla proprietà `margin` può essere applicato il valore `auto`. In questo caso il box si orienta automaticamente in orizzontale al centro dell’elemento genitore. Il valore `auto` non prevede l’allineamento in verticale.

N.B. Lo spazio richiesto da un box CSS si può determinare sommando i valori di tutti i componenti rilevanti del box.

### Formattazione del box con `float`

Se per quanto riguarda il box da formattare si tratta di un box a blocco, allora i box che seguono finiranno automaticamente nella riga successiva, conformemente al flusso di elementi.

Nella pratica, l’interruzione di riga automatica in seguito a un box a blocco non è sempre desiderata e può essere perciò impedita tramite la proprietà `float`: questa, infatti, libera i box a blocco dal normale flusso e li posiziona in un punto specifico.

<table>
  <thead>
    <tr>
      <th>Valori per la proprietà `float`</th>
      <th>Descrizione</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`none`</td>
      <td>Non avviene alcuno spostamento dell’elemento. Il valore `float: none;` è lo standard di un box CSS.</td>
    </tr>
    <tr>
      <td>`left`</td>
      <td>Il box a blocco si allinea nell’angolo a sinistra dell’elemento genitore.</td>
    </tr>
    <tr>
      <td>`right`</td>
      <td>Il box a blocco si allinea nell’angolo a destra dell’elemento genitore.</td>
    </tr>
    <tr>
      <td>`inherit`</td>
      <td>Il valore float corrisponde a quello dell’elemento genitore.</td>
    </tr>
  </tbody>
</table>

Il box con formattazione `float` si chiamerà **Float**.

Se diversi Float si incontrano verranno allineati nell’ordine in cui appaiono nel codice sorgente HTML, da sinistra a destra (`float: left`) o da destra a sinistra (`float: right`).

Il seguente esempio di codice mostra una regola contenente la proprietà `float`:

```html
.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 20px;
border: 5px solid #d82451;
margin: 40px;
float: left;
}
```

Se viene applicato a due elementi HTML, questi vengono **rimossi dal flusso degli elementi** e disposti affiancati, allineati a sinistra:

```html
<p class="content">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>
<p class="content">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
```

[![Immagine: Due box a blocco allineati a sinistra come Float](https://www.ionos.it/digitalguide/fileadmin/_processed_/4/3/csm_css-box-model-float_72901a12c7.webp "Due box a blocco allineati a sinistra come Float")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2025/css-box-model-float.jpg) Con la proprietà `float` è possibile visualizzare i box a blocco uno accanto all’altro senza andare a capo. La distanza che intercorre tra i due elementi è data dal fatto che viene aggiunto il margine esterno di ogni box. Senza Float, i margini esterni degli elementi vicini non risulterebbero.

## Web design responsive con CSS

Per creare un [web design responsive](https://www.ionos.it/digitalguide/siti-web/web-design/cose-un-design-responsive/) con CSS, il linguaggio dei fogli di stile offre due moderne tecniche di layout: [flexbox](https://www.ionos.it/digitalguide/siti-web/creare-siti/css-flexbox/) e [grid](https://www.ionos.it/digitalguide/siti-web/creare-siti/css-grid/). Entrambi i sistemi adattano dinamicamente i contenuti a diverse dimensioni dello schermo. In combinazione con le [media query CSS](https://www.ionos.it/digitalguide/siti-web/web-design/media-query-css/), i layout possono essere adattati in modo mirato anche a diversi dispositivi e larghezze dello schermo.

### Flexbox

Con CSS flexbox (Flexible Box Layout) puoi **realizzare layout monodimensionali in modo particolarmente semplice**. Flexbox dispone i contenuti in orizzontale o in verticale ed è quindi adatto alla navigazione, alle gallerie o alle aree di contenuto modulari.

Un cosiddetto container flex è definito dalla proprietà `display: flex;`. Tutti gli elementi figli diretti diventano automaticamente flex item, la cui posizione, ordine e dimensione possono essere gestiti in modo flessibile.

<table>
  <thead>
    <tr>
      <th><strong>Proprietà</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`flex-direction`</td>
      <td>Definisce la direzione principale dei flex items. Il valore `row` si usa per l’allineamento orizzontale, il valore `column` per quello verticale. `row-reverse` e `column-reverse` allineano rispettivamente da destra a sinistra.</td>
    </tr>
    <tr>
      <td>`justify-content`</td>
      <td>Allinea i flex items lungo l’asse principale. Con `flex-start` l’allineamento avviene all’inizio, con `flex-end` alla fine dell’asse e con `center` al centro. Con `space-between`, `space-around` e `space-evenly` viene indicata la spaziatura degli elementi (uniforme senza spazio ai bordi, uguale spazio attorno a tutti gli elementi, uniforme tra tutti gli elementi).</td>
    </tr>
    <tr>
      <td>`align-items`</td>
      <td>Allinea i flex items lungo l’asse trasversale; i valori `flex-start`, `flex-end` e `center` funzionano come con `flex-direction`. Inoltre, con `baseline` si può ottenere un allineamento sulla linea di base e con `stretch` un allineamento che riempie il contenitore.</td>
    </tr>
    <tr>
      <td>`flex-wrap`</td>
      <td>Definisce se i flex items possono andare a capo su una nuova riga. Con `nowrap` (standard) tutti gli elementi restano su un’unica riga. Con `wrap` e `wrap-reverse` si verificano le interruzioni di riga (eventualmente in direzione inversa).</td>
    </tr>
    <tr>
      <td>`gap`</td>
      <td>Determina la distanza tra i flex items.</td>
    </tr>
  </tbody>
</table>

Un semplice esempio mostra la disposizione orizzontale degli elementi con spaziatura uniforme:

```css
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
```

Le regole vengono applicate al seguente HTML:

```html
<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
```

Inoltre, puoi gestire in modo indipendente anche il comportamento dei singoli flex items. Con la proprietà `flex` puoi ad esempio stabilire quanto un elemento, rispetto agli altri, possa **ingrandirsi o ridursi**. In questo caso, il valore 2 indica un raddoppio:

```css
.item1 {flex: 2; }
```

### Layout a griglia

Con un CSS grid i contenuti di una pagina web possono essere disposti in una **griglia bidimensionale**. Il sistema a griglia consente un controllo preciso di righe e colonne, permettendo di realizzare layout complessi in modo semplice e flessibile. Per creare una griglia, **si assegna a un elemento genitore la proprietà `display: grid;`**. Tutti gli elementi figli diretti di questo contenitore diventano automaticamente elementi della griglia. Successivamente, la griglia può essere personalizzata con un’ampia varietà di proprietà.

<table>
  <thead>
    <tr>
      <th><strong>Proprietà</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`grid-template-columns`</td>
      <td>Definisce la struttura delle colonne della griglia. L’unità più importante è `fr`: indica quante frazioni dello spazio disponibile vengono utilizzate. Con `auto` la suddivisione avviene automaticamente.</td>
    </tr>
    <tr>
      <td>`grid-template-rows`</td>
      <td>Definisce la struttura delle righe della griglia. I valori per `grid-template-rows` sono gli stessi di `grid-template-columns`.</td>
    </tr>
    <tr>
      <td>`gap`</td>
      <td>Determina la distanza tra gli elementi della griglia</td>
    </tr>
    <tr>
      <td>`justify-items`</td>
      <td>Definisce l’allineamento orizzontale degli elementi della griglia. `start` allinea a sinistra, `end` a destra e `center` al centro. Il valore predefinito `stretch` riempie la cella.</td>
    </tr>
    <tr>
      <td>`align-items`</td>
      <td>Imposta l’allineamento verticale degli elementi della griglia. L’allineamento avviene con gli stessi valori di `justify-items`.</td>
    </tr>
  </tbody>
</table>

Un esempio mostra la struttura di una griglia con tre colonne di uguale larghezza e due righe utilizzando valori `fr` uniformi:

```css
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
}
```

Ogni elemento della griglia può inoltre essere **posizionato in modo mirato**, per estendersi ad esempio su più colonne o righe. A questo scopo sono disponibili le proprietà `grid-column` e `grid-row`. Qui si indicano la riga iniziale (inclusa) e la riga finale (esclusa), separate da una barra (/). Nel seguente esempio, l’elemento si estende su due colonne e una riga.

```css
.item1 {
grid-column: 1 / 3; 
grid-row: 1; 
}
```

### Media query

Le media query consentono di **applicare regole CSS in base alle caratteristiche del dispositivo**. In questo modo, il layout può avere un aspetto diverso su smartphone, tablet e schermi desktop, senza dover utilizzare più file HTML. Con una media query puoi attivare o sovrascrivere in modo mirato gli stili non appena vengono soddisfatte determinate condizioni. L’applicazione più comune è l’adattamento a diverse larghezze del viewport, per cui sono necessari i seguenti valori:

<table>
  <thead>
    <tr>
      <th><strong>Proprietà/Sintassi</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`@media`</td>
      <td>Introduce una media query.</td>
    </tr>
    <tr>
      <td>`screen, print, all`</td>
      <td>Stabilisce per quale tipo di supporto si applicano le regole.</td>
    </tr>
    <tr>
      <td>`min-width`</td>
      <td>Attiva le regole CSS a partire da una determinata larghezza minima.</td>
    </tr>
    <tr>
      <td>`max-width`</td>
      <td>Attiva le regole CSS fino a una determinata larghezza massima.</td>
    </tr>
  </tbody>
</table>

Un esempio mostra come si possa utilizzare una media query per modificare il layout al di sotto di una determinata larghezza:

```css
/ *Layout standard per schermi più grandi* /
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/ *Adattamento per schermi più piccoli* /
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
```

Più condizioni si possono anche combinare, ad esempio per modificare i layout solo sui tablet in formato verticale:

```css
@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
body {
font-size: 1.1em;
}
}
```

## Variabili CSS

Le variabili CSS (chiamate anche custom properties) permettono di **salvare valori in modo centralizzato** e di riutilizzarli **più volte** nel foglio di stile. In questo modo puoi modificare colori, spaziature o dimensioni dei caratteri in un solo punto, senza dover adattare l’intero CSS. Il codice risulta così più chiaro, facile da mantenere e coerente.

Le variabili CSS vengono definite con un doppio trattino (`--`) e richiamate con la funzione `var()`.

<table>
  <thead>
    <tr>
      <th><strong>Sintassi</strong></th>
      <th><strong>Descrizione</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`--variablename`</td>
      <td>Definisce una variabile personalizzata.</td>
    </tr>
    <tr>
      <td>`var(--variablename)`</td>
      <td>Richiama il valore di una variabile definita.</td>
    </tr>
    <tr>
      <td>`:root`</td>
      <td>L’ambito di validità globale (corrisponde all’elemento HTML di livello più alto).</td>
    </tr>
  </tbody>
</table>

Un esempio mostra come le variabili vengono definite e utilizzate:

```css
:root {
--main-color: #ff4081;
--text-color: #333;
--padding: 10px;
}
button {
background-color: var(--main-color);
color: var(--text-color);
padding: var(--padding);
}
```

Qui vengono definite le variabili `--main-color`, `--text-color` e `--padding` in `:root`, quindi globalmente per tutta la pagina. Il pulsante usa queste variabili con `var()`, in modo che colore di sfondo, colore del testo e spaziatura **vengano adottati automaticamente dai valori delle variabili**.


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/web-design/come-imparare-il-css-una-guida-semplice/](https://www.ionos.it/digitalguide/siti-web/web-design/come-imparare-il-css-una-guida-semplice/) for AI/LLM consumption.