Guida CSS interattiva: CSS esterno

Q: Come collego un file CSS all'HTML?

Aggiungi dentro . href è un percorso relativo al file HTML, quindi css/styles.css punta a una cartella css accanto al file, e /styles.css parte dalla radice del sito.

Q: Perché il mio CSS esterno non funziona?

Le cause più comuni sono un percorso href sbagliato (controlla nella scheda Network se c'è un 404), un rel="stylesheet" mancante, tag scritti dentro il file .css, oppure una regola successiva che sovrascrive la tua. Un aggiornamento forzato esclude una vecchia copia in cache.

CSS esterno in una riga

Il CSS esterno è un file .css separato. Lo colleghi dall'<head> di ogni pagina che ne ha bisogno:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Il file contiene semplici regole CSS, senza tag HTML attorno:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

L'anteprima qui sotto non ha un secondo file da caricare, quindi mette lo stesso CSS in un elemento <style>. Questo è CSS interno, e viene reso esattamente come il file collegato:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

CSS interno: l'elemento style

Il CSS interno (detto anche CSS incorporato) è un elemento <style> dentro la pagina. Mettilo nell'<head> così gli stili sono noti prima che il body venga disegnato. Si applica a tutta la pagina, e le sue regole usano i selettori, cosa che gli attributi style inline non possono fare.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

Passa il mouse su un tag: :hover funziona qui perché è una vera regola. Il terzo modo, l'attributo style, è spiegato nella pagina sul CSS inline.

CSS interno o esterno

	Esterno (`<link>`)	Interno (`<style>`)
Dove	Un file `.css`	Dentro la pagina HTML
Ambito	Ogni pagina che lo collega	Una pagina
Cache	Scaricato una volta, riutilizzato tra le pagine	Inviato di nuovo con ogni pagina
Cambiare l'aspetto di un sito	Modifichi un file	Modifichi ogni pagina
Richiesta in più	Sì, una per file	No
Ideale per	Siti web veri	Demo, pagine singole, email HTML, CSS critico

La specificità è la stessa per entrambi: una regola in un elemento <style> e la stessa regola in un file collegato pesano esattamente uguale. In caso di parità, vince quella che viene dopo nel documento.

Ordine: vince il foglio di stile successivo

I fogli di stile vengono letti nell'ordine del documento, <link> e <style> allo stesso modo. Tra due regole con la stessa specificità, vince la successiva. I due blocchi <style> qui sotto fanno le veci di un file collegato seguito da una sovrascrittura a livello di pagina:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

Il pulsante mantiene il padding e il testo bianco della prima regola e prende solo lo sfondo dalla seconda. Ecco perché il foglio di stile del sito va dopo quello di un framework: prima fai il <link> alla libreria, poi al tuo.

Percorsi dei file in href

L'href di un <link> è un URL, risolto a partire dalla posizione del file HTML.

href	Carica
`styles.css`	Un file nella stessa cartella della pagina
`css/styles.css`	Una cartella `css` accanto alla pagina
`../styles.css`	Una cartella più in alto
`/styles.css`	Dalla radice del sito
`https://example.com/a.css`	Un URL completo su un altro server

In un sito le cui pagine stanno a profondità diverse, la forma relativa alla radice (/css/styles.css) fa funzionare lo stesso percorso su ogni pagina.

Fogli di stile per la stampa e altri media

Un attributo media limita un foglio di stile a determinate condizioni. Lo accettano sia <link> sia <style>:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

L'anteprima è uno schermo, quindi il banner si vede. In una pagina reale, il banner sparisce dalla stampa, e nei DevTools puoi vedere lo stesso effetto emulando il tipo di media print (pannello Rendering).

Errori comuni

Percorso sbagliato. Un errore di battitura in href non carica nulla, e la pagina appare senza stile. Apri i DevTools, scheda Network, e cerca un 404 sul file .css.
Dimenticare rel="stylesheet". Senza, <link href="styles.css"> non carica un foglio di stile.
HTML dentro il file .css. Un file .css contiene solo regole. I tag <style> al suo interno non sono CSS valido e rompono la regola accanto.
Mettere il tuo foglio di stile prima di quello del framework. A parità di specificità vince il file successivo, quindi collega il tuo CSS per ultimo.
Vedere una versione vecchia. I browser tengono in cache i fogli di stile. Fai un aggiornamento forzato, oppure aggiungi una versione all'URL (styles.css?v=2) quando pubblichi una modifica.

Domande frequenti

Cos'è il CSS esterno?

Il CSS esterno è un foglio di stile salvato in un proprio file .css e caricato con <link rel="stylesheet" href="styles.css"> nell'<head> della pagina. Ogni pagina che collega il file riceve gli stessi stili, e il browser tiene il file in cache tra una pagina e l'altra.

Cos'è il CSS interno?

Il CSS interno, detto anche CSS incorporato, è CSS scritto dentro un elemento <style> nel documento HTML stesso, di solito nell'<head>. Si applica solo a quella pagina.

Come collego un file CSS all'HTML?

Aggiungi <link rel="stylesheet" href="styles.css"> dentro <head>. href è un percorso relativo al file HTML, quindi css/styles.css punta a una cartella css accanto al file, e /styles.css parte dalla radice del sito.

Cosa è meglio, CSS interno o esterno?

Il CSS esterno per tutto ciò che ha più di una pagina: un solo file da modificare, e i browser lo scaricano una volta e lo riutilizzano. Il CSS interno va bene per una pagina singola, una demo o un piccolo blocco di stili critici che vuoi nella prima risposta.

Perché il mio CSS esterno non funziona?

Le cause più comuni sono un percorso href sbagliato (controlla nella scheda Network se c'è un 404), un rel="stylesheet" mancante, tag <style> scritti dentro il file .css, oppure una regola successiva che sovrascrive la tua. Un aggiornamento forzato esclude una vecchia copia in cache.

Concetti correlati