Come collegare il CSS all'HTML: link, style, @import e percorsi corretti
Collega un foglio di stile con l'elemento link, oppure usa style, stili inline o @import. Prova dal vivo percorsi relativi e assoluti e segui una checklist quando il CSS non si carica.
Come collegare il CSS all'HTML
Per collegare un file CSS a una pagina HTML, metti <link rel="stylesheet" href="styles.css"> dentro l'head. L'href è un percorso dal file HTML al file CSS, quindi un file in una cartella css richiede href="css/styles.css". Puoi anche scrivere CSS in un elemento style, in un attributo style, oppure includere file con @import.
Quattro modi per aggiungere CSS a una pagina
Metodo
Dove va
Ideale per
<link rel="stylesheet">
Nell'head
Quasi tutto: un file condiviso da molte pagine
Elemento <style>
Nell'head
Pagine piccole, critical CSS, demo
Attributo style="..."
Su un singolo elemento
Valori occasionali impostati dal codice
@import url(...)
In cima a un file CSS
Dividere il CSS in layer o file
Quasi ogni caso di pagina senza stile dipende dal percorso o dagli attributi dell'elemento link. Questa guida mostra ogni modo di aggiungere CSS, include un verificatore di percorsi che calcola esattamente a quale URL punta il tuo href, e si chiude con una checklist per quando gli stili continuano a non comparire.
Inserisci l'indirizzo della tua pagina HTML, come appare nella barra del browser.
Inserisci l'href che hai usato nell'elemento link.
Il verificatore mostra l'URL completo che il browser richiederà, calcolato nel tuo browser con le regole URL standard.
Apri quell'URL in una nuova scheda. Se non mostra il tuo CSS, il percorso è sbagliato.
L'attributo type="text/css" è facoltativo. Il CSS è l'unico linguaggio di fogli di stile usato dai browser.
Metti i link ai fogli di stile nell'head. I link nel body sono ammessi ma possono causare un flash di contenuto senza stile.
Aggiungi un attributo media come media="print" per applicare un foglio di stile solo quando quella condizione è soddisfatta.
L'ordine conta. Quando due regole hanno la stessa specificità, vince quella caricata dopo, quindi collega il tuo CSS dopo qualsiasi framework.
Domande frequenti
Perché il mio file CSS non si collega al mio HTML?
Controlla prima il percorso: apri gli strumenti per sviluppatori del browser, guarda la scheda Network e trova la richiesta del CSS. Un 404 significa che l'href punta nel posto sbagliato. Verifica anche che rel="stylesheet" sia scritto correttamente, che i nomi dei file abbiano le stesse maiuscole e minuscole, e di aver salvato il file.
Qual è la differenza tra un percorso relativo e uno assoluto?
Un percorso relativo come css/site.css viene risolto a partire dalla cartella della pagina corrente. Un percorso che inizia con / viene risolto dalla radice del sito, e un URL completo che inizia con https:// punta a un indirizzo esatto. I percorsi dalla radice non funzionano quando apri il file direttamente dal disco.
Dovrei usare @import o link?
Preferisci link. Ogni @import viene scoperto solo dopo che il file che lo contiene è stato scaricato, quindi gli import concatenati si caricano uno dopo l'altro. @import è utile per l'ordinamento con layer() o dentro uno strumento di build che comunque unisce i file.
Come salgo di una cartella nell'href?
Usa ../ per ogni livello. Una pagina in /blog/post.html con il CSS in /css/site.css usa href="../css/site.css", oppure il percorso dalla radice href="/css/site.css" quando il sito gira su un server.
Dove deve andare @import?
In cima al foglio di stile, prima di qualsiasi altra regola. Solo le istruzioni @charset e @layer possono precederlo. Un @import messo dopo regole di stile viene ignorato.
Come il browser risolve un href
Il browser parte dall'URL della pagina stessa, toglie il nome del file e applica l'href alla cartella che resta. ../ sale di una cartella, ./ resta nella stessa, e una barra iniziale riparte dalla radice del sito.
Quando apri una pagina con un doppio clic, la radice è il tuo disco, non il tuo progetto. Per questo /css/site.css funziona su un server ma fallisce da un indirizzo file://, mentre un percorso relativo funziona in entrambi i casi.
Stili inline ed elementi style
Un elemento style tiene il CSS nella pagina, il che fa risparmiare una richiesta ed è comodo per il piccolo blocco di critical CSS che dà stile alla prima schermata. Non può essere messo in cache separatamente e viene ripetuto su ogni pagina.
Un attributo style si applica a un solo elemento e prevale sulle regole dei fogli di stile a meno che non usino !important. Usalo per i valori calcolati dal tuo codice, non per il design normale, che diventerebbe impossibile da cambiare su tutto il sito.
L'elemento link
Una pagina con un foglio di stile collegato
Il link sta nell'head. Il suo href è relativo a questo file HTML, quindi styles.css deve trovarsi in una cartella css accanto a esso.
L'elemento style e gli stili inline
CSS incorporato e inline insieme
L'elemento style colora ogni p. L'attributo style sul secondo paragrafo prevale solo per quell'elemento.
@import dentro un foglio di stile
Gli import vengono per primi. Possono includere una media query, una condizione supports() o un cascade layer.
Il CSS non si carica? Segui questa lista
Perché gli stili non si applicano, e come verificarlo
Sintomo
Causa probabile
Soluzione
404 per il CSS nella scheda Network
Percorso o cartella sbagliati
Usa il verificatore di percorsi qui sopra; prova un percorso dalla radice su un server
Nessuna richiesta per il CSS
Errore di battitura in rel o link fuori dall'HTML
Scrivi esattamente rel="stylesheet"; metti il link nell'head
Funziona in locale, non online
Le maiuscole e minuscole del nome del file sono diverse
Continuano a comparire i vecchi stili
Cache del browser
Ricarica forzata, o aggiungi una versione come styles.css?v=2
Alcune regole ignorate
Sovrascritte da regole successive o più specifiche
Ispeziona l'elemento; controlla ordine e specificità
@import non fa nulla
Viene dopo altre regole
Sposta ogni @import in cima al file
Bloccato nella console
Servito con il content type sbagliato
Il server deve inviare text/css per i file .css
Verificatore di percorsi
Indirizzo della tua pagina HTML
href nel tuo elemento link
Il browser richiede:
Questo indirizzo di pagina non è un URL completo. Fallo iniziare con https:// o file:///
Questo è un file sul tuo disco. I percorsi che iniziano con / puntano alla radice dell'unità, non al tuo progetto.