Il lin­guag­gio dei fogli di stile a cascata CSS è co­mu­ne­men­te usato per for­mat­ta­re HTML in modo ap­pro­pria­to. In questo modo vengono definiti attributi come il layout, il colore e la forma dei singoli elementi HTML. Le istru­zio­ni CSS esistono in­di­pen­den­te­men­te da HTML e devono essere integrate in un documento elet­tro­ni­co.

Web Hosting
Diventa il n°1 della rete con il provider di hosting n°1 in Europa
  • Di­spo­ni­bi­li­tà garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • As­si­sten­za 24/7 in lingua italiana

Come collegare CSS a HTML: quali metodi esistono?

È ge­ne­ral­men­te possibile collegare CSS a HTML tramite dei fogli di stile interni o esterni. Con dei fogli di stile interni, le istru­zio­ni CSS vengono lo­ca­liz­za­te nei documenti HTML. È quindi possibile integrare CSS all’inizio dei file HTML o po­si­zio­nar­lo di­ret­ta­men­te nel codice sorgente. Una buona com­pren­sio­ne di base di HTML e della sua sintassi è si­cu­ra­men­te un vantaggio se scegli di uti­liz­za­re questo metodo.

Il metodo più comune e pulito per svi­lup­pa­re un sito web è tuttavia at­tra­ver­so l’utilizzo dei fogli di stile CSS esterni. CSS viene integrato col­le­gan­do il documento HTML a un file CSS esterno. Di seguito ri­por­tia­mo i tre metodi possibili:

  • Stile inline, ovvero po­si­zio­na­to di­ret­ta­men­te nel codice sorgente
  • Po­si­zio­na­to 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 cer­ti­fi­ca­to SSL inclusi

Includere CSS: stile inline

Con questo metodo, le istru­zio­ni di stile sono in­cor­po­ra­te di­ret­ta­men­te nel codice sorgente uti­liz­zan­do un tag style. Le proprietà de­si­de­ra­te 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’in­te­sta­zio­ne h1 deve essere vi­sua­liz­za­ta in blu e con un carattere avente una di­men­sio­ne di 14 punti:

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

Con questo tipo di in­te­gra­zio­ne, 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 man­te­ni­men­to poiché è richiesto un in­ter­ven­to diretto sul codice HTML.

Ag­giun­ge­re CSS all’inizio di HTML

Tramite questo metodo è possibile includere CSS nell’in­te­sta­zio­ne del documento HTML. Il tag style diventa dunque parte dell’elemento head e viene applicato all’intero file. Le istru­zio­ni di stile CSS sono ancora contenute nel documento stesso, ma net­ta­men­te separate dal codice HTML. Nell’esempio riportato di seguito, viene applicato lo stesso comando dell’esempio pre­ce­den­te. Questa volta, tuttavia, tutte le in­te­sta­zio­ni h1 del file do­vreb­be­ro essere for­mat­ta­te secondo l’in­for­ma­zio­ne 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 è pos­si­bil­men­te il metodo migliore per collegare CSS nei documenti HTML. Infatti, un sito web consiste spesso di tante pagine ed è quindi opportuno salvare le istru­zio­ni di design in un file separato. Ciò permette una se­pa­ra­zio­ne netta e pulita tra il contenuto e il design e aiuta a sem­pli­fi­ca­re il man­te­ni­men­to. Il file esportato è sem­pli­ce­men­te collegato al documento HTML. Bisogna salvare il foglio di stile esterno con l’esten­sio­ne .css e uti­liz­za­re un tag link per in­clu­der­lo nel file HTML. Nel seguente esempio, il file CSS viene chiamato “sty­le­sheet.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 in­cor­po­ra­re. Nota che l’elemento link può assumere altri attributi. Con la proprietà media="print" spe­ci­fi­chi, ad esempio, che il foglio di stile viene uti­liz­za­to solo nella vi­sua­liz­za­zio­ne di stampa. Il foglio di stile esterno non contiene alcun tag HTML, ma solo il ri­spet­ti­vo selettore e le parentesi graffe con­te­nen­ti le di­chia­ra­zio­ni, come di­mo­stra­to nel seguente esempio:

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

Le fun­zio­na­li­tà CSS più comuni e recenti

Oltre ai metodi classici per collegare CSS in HTML, negli ultimi anni sono state in­tro­dot­te numerose nuove fun­zio­na­li­tà che rendono la pro­get­ta­zio­ne delle pagine web ancora più fles­si­bi­le. Con selettori moderni come :has(), puoi se­le­zio­na­re gli elementi genitori in base ai loro figli, mentre le query container per­met­to­no ai singoli com­po­nen­ti di adattarsi al con­te­ni­to­re, in­di­pen­den­te­men­te dalla larghezza della finestra. Queste e altre in­no­va­zio­ni per­met­to­no di creare design più modulari, dinamici e intuitivi, senza dover ricorrere a soluzioni complesse o a Ja­va­Script.

Pseu­do­clas­se CSS :has()

:has() è un selettore genitore che permette di applicare stili specifici in base a de­ter­mi­na­te con­di­zio­ni. Ad esempio, puoi fare in modo che un campo venga evi­den­zia­to 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 per­met­to­no di applicare regole CSS non solo in base alla di­men­sio­ne dell’intera finestra del browser (come nel caso delle media query CSS), ma anche alle di­men­sio­ni del container cir­co­stan­te.

In questo modo, ogni modulo o com­po­nen­te può adattarsi au­to­no­ma­men­te allo spazio di­spo­ni­bi­le nel proprio elemento genitore, con­sen­ten­do così un web design re­spon­si­ve modulare e realmente fles­si­bi­le, in­di­pen­den­te dalla larghezza della finestra. Ad esempio, puoi fare in modo che le schede con immagine e testo vengano af­fian­ca­te non appena il loro container è suf­fi­cien­te­men­te largo.

Se il container è più stretto di un valore stabilito, in questo esempio 400 pixel, rimane attiva la vi­sua­liz­za­zio­ne pre­de­fi­ni­ta.

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

Ni­di­fi­ca­zio­ne CSS

L’an­ni­da­men­to 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 con­di­vi­do­no lo stesso stile di base e, a seconda della classe ag­giun­ti­va (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 di­na­mi­ca­men­te i colori di­ret­ta­men­te nel foglio di stile o scegliere au­to­ma­ti­ca­men­te le varianti in base alla lu­mi­no­si­tà. Questo permette di creare tran­si­zio­ni cro­ma­ti­che, temi o adat­ta­men­ti per la modalità scura, senza dover calcolare in anticipo valori di colore fissi.

In questo modo, il CSS risulta più fles­si­bi­le, poiché i colori non vengono più definiti solo in modo statico, ma possono essere calcolati e adattati di­na­mi­ca­men­te. 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 au­to­ma­ti­ca­men­te in posizioni spe­ci­fi­che durante lo scor­ri­men­to. È utile, ad esempio, per creare gallerie di immagini, caroselli o sezioni di pagina che si bloccano esat­ta­men­te nel punto de­si­de­ra­to durante lo scor­ri­men­to.

In questo modo, la na­vi­ga­zio­ne risulta fluida e intuitiva. Nell’esempio seguente, il con­te­ni­to­re prin­ci­pa­le .slider scorre oriz­zon­tal­men­te (x) e imposta il com­por­ta­men­to di scor­ri­men­to come ob­bli­ga­to­rio (mandatory). Ogni elemento figlio .slide si allinea in modo che, durante lo scor­ri­men­to, si “blocchi” all’inizio del con­te­ni­to­re (start).

.slider {
    scroll-snap-type: x mandatory;
}
.slide {
    scroll-snap-align: start;
}
css
Vai al menu prin­ci­pa­le