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.

Web Hosting
Diventa il n°1 della rete con il provider di hosting n°1 in Europa
  • Disponibilità garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • Assistenza 24/7 in lingua italiana

Come collegare CSS a HTML: quali metodi esistono?

È generalmente possibile collegare 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 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
Crea il tuo sito web
Scopri le nuovi funzioni IA di MyWebsite
  • Editor facile e intuitivo con supporto IA
  • Immagini e testi d'effetto in pochi secondi
  • Dominio, indirizzo e-mail e certificato SSL inclusi

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, 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:

<h1 style="color: blue; font-size: 14px;">Questo è un titolo</h1>
html

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 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.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue; font-size: 14px;}
</style>
</head>
<body>
<h1>Questo è un titolo</h1>
<p> Questo è un paragrafo.</p>
</body>
</html>
html

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”.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>Questo è un titolo</h1>
<p>Questo è un paragrafo.</p>
</body>
</html>
html

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, ma solo il rispettivo selettore e le parentesi graffe contenenti le dichiarazioni, come dimostrato nel seguente esempio:

h1 {
color: blue;
font-size:14px;
}
css

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:

.form-group:has(input:invalid) {
    border: 2px solid red;
}
.form-group:has(input:valid) {
    border: 2px solid green;
}
css

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), 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 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.

@container (min-width: 400px) {
    .card { flex-direction: row; }
}
css

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.

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:

button {
    padding: 0.5rem 1rem;
    border: none;
    &.primary {
        background: blue;
        color: white;
    }
    &.secondary {
        background: gray;
        color: black;
    }
}
css

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.

.btn {
    background: color-mix(in srgb, red 50%, blue);
}
css

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).

.slider {
    scroll-snap-type: x mandatory;
}
.slide {
    scroll-snap-align: start;
}
css
Vai al menu principale