Collegare un foglio di stile: <link> e l'attributo rel

L’HTML definisce la struttura e il significato dei contenuti, ma senza il CSS il web sarebbe solo testo nero su sfondo bianco. In questa lezione vedremo come “insegnare” al browser ad applicare stili grafici ai nostri documenti HTML.

Esistono tre modi per inserire del CSS in una pagina web. Nei progetti reali, il foglio di stile esterno è quasi sempre la scelta più manutenibile.

1. CSS inline

Il metodo più diretto, ma anche il più problematico, è usare l’attributo style direttamente sui tag HTML.

<p style="color: red; font-size: 18px;">Questo è un testo rosso.</p>

Perché evitarlo?

• Zero riusabilità: Se vuoi che tutti i paragrafi siano rossi, devi incollare quello stile su ogni singolo tag <p>.
• Manutenibilità impossibile: Cambiare il colore principale di un sito con 100 pagine richiederebbe modifiche su migliaia di righe.
• Rompe la separazione degli intenti: Mischia la presentazione (CSS) con la struttura (HTML).

2. CSS interno

Puoi racchiudere le tue regole CSS all’interno di un tag <style>, posizionato rigorosamente dentro l’elemento <head> del tuo documento.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>CSS Interno</title>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>Questo paragrafo sarà blu.</p>
</body>
</html>

Questo metodo separa un po’ meglio struttura e presentazione, ma funziona solo per quella singola pagina. Se il sito ha 10 pagine, dovrai duplicare il tag <style> in tutte e 10.

3. CSS esterno: il tag <link>

La soluzione più adatta alla maggior parte dei progetti è scrivere il CSS in un file separato (con estensione .css) e collegarlo all’HTML.

Ecco come appare il file style.css:

body {
  background-color: #f4f4f4;
  font-family: sans-serif;
}

h1 {
  color: #333;
}

Ed ecco come si collega nell’HTML, sempre all’interno della <head>:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>CSS Esterno</title>
  <!-- Colleghiamo il file CSS -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Titolo Principale</h1>
</body>
</html>

Anatomia del tag <link>

Il tag <link> (che è vuoto, cioè non ha un tag di chiusura) richiede due attributi fondamentali per funzionare con il CSS:

1. rel="stylesheet": Indica la relazione tra la pagina attuale e il file linkato. In questo caso, stiamo dicendo al browser “questo è un foglio di stile”. Se dimentichi questo attributo, il CSS non verrà caricato!
2. href="style.css": Indica il percorso (Hypertext Reference) in cui si trova il file CSS. Può essere un percorso relativo (es. css/main.css) o assoluto.

I vantaggi del CSS Esterno

1. Caching del browser: quando un utente visita la homepage, il browser può salvare il file style.css nella cache e riusarlo nelle pagine successive.
2. Manutenibilità: se vuoi cambiare il font di tutto il sito, modifichi una regola nel file .css invece di intervenire su ogni pagina HTML.
3. Codice più leggibile: i file HTML restano focalizzati sulla struttura semantica dei contenuti.