# Collegare CSS nei documenti HTML: una guida con esempi
Il linguaggio dei fogli di stile a cascata CSS è comunemente usato per formattare HTML in modo appropriato. In questo modo vengono definiti attributi come il layout, il colore e la forma dei singoli elementi HTML. Le istruzioni CSS esistono indipendentemente da HTML e devono essere integrate in un documento elettronico.
## Come collegare CSS a HTML: quali metodi esistono?
È generalmente possibile collegare [CSS](https://www.ionos.it/digitalguide/siti-web/web-design/cose-css/) a HTML tramite dei **fogli di stile interni o esterni**. Con dei fogli di stile interni, le istruzioni CSS vengono localizzate nei documenti HTML. È quindi possibile integrare CSS **all’inizio dei file HTML** o posizionarlo direttamente nel codice sorgente. Una buona [comprensione di base di HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/imparare-lhtml-lampio-tutorial-per-principianti/) e della sua sintassi è sicuramente un vantaggio se scegli di utilizzare questo metodo.
Il metodo più comune e pulito per sviluppare un sito web è tuttavia attraverso l’utilizzo dei fogli di stile CSS esterni. CSS viene integrato collegando il documento HTML a un file CSS esterno. Di seguito riportiamo i tre metodi possibili:
- Stile inline, ovvero posizionato direttamente nel codice sorgente
- Posizionato all’inizio di un documento HTML
- Inserito in un file CSS esterno
## Includere CSS: stile inline
Con questo metodo, le istruzioni di stile sono incorporate direttamente nel codice sorgente utilizzando un tag `style`. Le proprietà desiderate sono assegnate solo a un [elemento HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/elemento-html/), di modo tale che siano possibili design diversi in tutto il documento HTML. Nell’esempio qui riportato, l’intestazione `h1` deve essere visualizzata in blu e con un carattere avente una dimensione di 14 punti:
```html
Questo è un titolo
```
Con questo tipo di integrazione, molti vantaggi di CSS vanno persi. Tra questi vi è l’opzione di definire un singolo comando da applicare, ad esempio, a tutti gli elementi `h1` nel documento HTML. In alcuni casi, ciò comporta anche uno sforzo maggiore per quanto riguarda il mantenimento poiché è richiesto un intervento diretto sul codice HTML.
## Aggiungere CSS all’inizio di HTML
Tramite questo metodo è possibile includere CSS nell’intestazione del documento HTML. Il tag `style` diventa dunque parte dell’elemento `head` e viene applicato all’intero file. Le [istruzioni di stile CSS](https://www.ionos.it/digitalguide/siti-web/web-design/come-imparare-il-css-una-guida-semplice/) sono ancora contenute nel documento stesso, ma nettamente separate dal codice HTML. Nell’esempio riportato di seguito, viene applicato lo stesso comando dell’esempio precedente. Questa volta, tuttavia, tutte le intestazioni `h1` del file dovrebbero essere formattate secondo l’informazione data.
```html
Questo è un titolo
Questo è un paragrafo.
hash_574bf2bec58eaea2a01f9f55b89b3ad5f0d7970a
```
## Integrare CSS tramite un file esterno
Questa è possibilmente il metodo migliore per collegare CSS nei documenti HTML. Infatti, un sito web consiste spesso di tante pagine ed è quindi opportuno salvare le istruzioni di design in un file separato. Ciò permette una separazione netta e pulita tra il contenuto e il design e aiuta a semplificare il mantenimento. Il file esportato è semplicemente collegato al documento HTML. Bisogna salvare il foglio di stile esterno con l’estensione .css e utilizzare un tag `link` per includerlo nel file HTML. Nel seguente esempio, il file CSS viene chiamato “stylesheet.css”.
```html
Questo è un titolo
Questo è un paragrafo.
hash_574bf2bec58eaea2a01f9f55b89b3ad5f0d7970a
```
L’attributo `rel` definisce il tipo di relazione logica mentre `href` si riferisce al file CSS da incorporare. Nota che l’elemento link può assumere altri attributi. Con la proprietà `media="print"` specifichi, ad esempio, che il foglio di stile viene utilizzato solo nella visualizzazione di stampa. Il foglio di stile esterno non contiene alcun [tag HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-html/), ma solo il rispettivo selettore e le parentesi graffe contenenti le dichiarazioni, come dimostrato nel seguente esempio:
```css
h1 {
color: blue;
font-size:14px;
}
```
## Le funzionalità CSS più comuni e recenti
Oltre ai metodi classici per collegare CSS in HTML, negli ultimi anni sono state introdotte numerose nuove funzionalità che rendono la progettazione delle pagine web ancora più flessibile. Con selettori moderni come `:has()`, puoi selezionare gli elementi genitori in base ai loro figli, mentre le **query container** permettono ai singoli componenti di adattarsi al contenitore, indipendentemente dalla larghezza della finestra. Queste e altre innovazioni permettono di creare design più modulari, dinamici e intuitivi, senza dover ricorrere a soluzioni complesse o a JavaScript.
### Pseudoclasse CSS `:has()`
`:has()` è un **selettore genitore** che permette di applicare stili specifici in base a determinate condizioni. Ad esempio, puoi fare in modo che un campo venga evidenziato in rosso se l’input non è valido e in verde se è valido:
```css
.form-group:has(input:invalid) {
border: 2px solid red;
}
.form-group:has(input:valid) {
border: 2px solid green;
}
```
### Query container
Le query container permettono di applicare regole CSS non solo in base alla dimensione dell’intera finestra del browser (come nel caso delle [media query CSS](https://www.ionos.it/digitalguide/siti-web/web-design/media-query-css/)), ma anche **alle dimensioni del container circostante**.
In questo modo, ogni modulo o componente può adattarsi autonomamente allo spazio disponibile nel proprio elemento genitore, consentendo così un [web design responsive](https://www.ionos.it/digitalguide/siti-web/web-design/cose-un-design-responsive/) **modulare e realmente flessibile**, indipendente dalla larghezza della finestra. Ad esempio, puoi fare in modo che le schede con immagine e testo vengano **affiancate** non appena il loro container è sufficientemente largo.
Se il container è più stretto di un valore stabilito, in questo esempio 400 pixel, rimane attiva la visualizzazione predefinita.
```css
@container (min-width: 400px) {
.card { flex-direction: row; }
}
```
### Nidificazione CSS
L’annidamento CSS permette di **inserire selettori all’interno di altri selettori**, in modo simile a quanto già avviene in SCSS o [LESS CSS](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tutorial-css-less/).
In questo modo, il codice rimane più leggibile, perché gli stili correlati restano raccolti nello stesso blocco, evitando di ripetere lunghe catene di selettori. In questo esempio, tutti i pulsanti condividono lo stesso stile di base e, a seconda della classe aggiuntiva (`primary` o `secondary`), assumono un aspetto diverso:
```css
button {
padding: 0.5rem 1rem;
border: none;
&.primary {
background: blue;
color: white;
}
&.secondary {
background: gray;
color: black;
}
}
```
### Nuove funzioni per il colore
Con le nuove funzioni CSS come `color-mix()` o `light-dark()`, puoi combinare dinamicamente i colori direttamente nel foglio di stile o scegliere automaticamente le varianti in base alla luminosità. Questo permette di creare transizioni cromatiche, temi o adattamenti per la modalità scura, senza dover calcolare in anticipo valori di colore fissi.
In questo modo, il CSS risulta più flessibile, poiché i colori non vengono più definiti solo in modo statico, ma possono essere **calcolati e adattati dinamicamente**. Nell’esempio seguente, il colore di sfondo di tutti gli elementi con la classe `.btn` viene impostato con la funzione CSS `color-mix()` su un rapporto 50:50 tra rosso e blu, ottenendo così una tonalità viola.
```css
.btn {
background: color-mix(in srgb, red 50%, blue);
}
```
### Scroll Snap
Scroll Snap è una funzione CSS che permette di far sì che gli elementi si **fermino automaticamente in posizioni specifiche** durante lo scorrimento. È utile, ad esempio, per creare gallerie di immagini, caroselli o sezioni di pagina che si bloccano esattamente nel punto desiderato durante lo scorrimento.
In questo modo, la navigazione risulta fluida e intuitiva. Nell’esempio seguente, il contenitore principale `.slider` scorre **orizzontalmente** (`x`) e imposta il comportamento di scorrimento come **obbligatorio** (`mandatory`). Ogni elemento figlio `.slide` si allinea in modo che, durante lo scorrimento, si “blocchi” **all’inizio del contenitore** (`start`).
```css
.slider {
scroll-snap-type: x mandatory;
}
.slide {
scroll-snap-align: start;
}
```
This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/web-design/come-collegare-css-nei-documenti-html/](https://www.ionos.it/digitalguide/siti-web/web-design/come-collegare-css-nei-documenti-html/) for AI/LLM consumption.