Articolo originale: External CSS Stylesheets – How to Link CSS to HTML and Import into Head

Avere i fogli di stile CSS in un file esterno viene considerata una buona pratica. Ma come si può collegare il CSS al file HTML?

Il collegamento a un file CSS esterno è una parte importante del boilerplate di ogni pagina HTML. In questo articolo impareremo come farlo.

Come Collegare un File CSS a un File HTML

È possibile collegare il tuo file CSS al tuo file HTML aggiungendo l'elemento link dentro l'elemento head del documento HTML, in questo modo:

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
    
    </body>
</html>

L'elemento link ha diversi utilizzi, ed è importante specificare gli attributi corretti così che tu possa usarlo per importare un foglio di stile CSS esterno. Ora vediamo alcuni attributi importanti.

L'attributo rel

Il primo dei due attributi indispensabili è rel. Questo attributo viene utilizzato per indicare al browser la relazione con il file importato.

Si scriverà rel="stylesheet" per comunicare al browser che si sta importando un foglio di stile.

L'attributo href

Il secondo attributo indispensabile è href, che specifica il file da importare.

Una situazione comune è che il file CSS e il file HTML si trovino nella stessa cartella. In questo caso puoi scrivere href="style.css".

Se il file CSS e il file HTML sono in cartelle differenti, è necessario scrivere il percorso corretto che deve andare dal file HTML al file CSS.

Per esempio, una situazione comune è che il file CSS si trovi in una cartella sorella del file HTML, come in questo caso:

project --- index.html
            css ---------- style.css

In questo caso è necessario scrivere un percorso come "css/styles.css".

L'attributo type

<link rel="stylesheet" href="style.css" type="text/css">

Si utilizza l'attributo type per definire il tipo di contenuto che si sta collegando. Per un foglio di stile è text/css. Ma siccome css è l'unico linguaggio per fogli di stile utilizzato nel web, non solo è opzionale, ma è addirittura una buona pratica non includerlo.

L'attributo media

<link rel="stylesheet" href="style.css" media="screen and (max-width: 600px)">

L'attributo media non è visibile nell'esempio. È un attributo opzionale che si può usare per specificare quando importare un determinato foglio di stile. Il suo valore deve essere un tipo di media / media query.

Questo può essere utile nel caso si vogliano separare gli stili per dispositivi differenti e dimensioni dello schermo in file diversi. È necessario importare ogni file CSS con il proprio elemento link.

Puoi consultare questi articoli (o altre fonti) sulle media query per saperne di più su ciò che è possibile scrivere come valore di attributo:

Conclusione

In questo articolo abbiamo imparato come aggiungere un foglio di stile esterno a una pagina web utilizzando l'elemento link e gli attributi href e rel.

Hai anche appreso che è possibile importare più fogli di stile e utilizzare l'attributo media per determinare quando ciascuno di essi deve essere applicato.

Divertiti a creare pagine web!