Vari sono i modi per inserire i fogli di stile CSS in un documento. Per capire il meccanismo è necessario chiarire preliminarmente la fondamentale distinzione tra fogli esterni e interni.
CSS esterni e interni
È esterno un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo modificabili anche con un editor di testo ai quali si assegna l'estensione .css.
Un foglio di stile si dice invece interno quando il suo codice è compreso in quello del documento. A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea.
Fogli di stile collegati
Per caricare un foglio di stile esterno in un documento esistono due possibilità. La prima è quella che fa uso dell'elemento HTML <link>. La dichiarazione va sempre collocata all'interno della sezione <head> del documento HTML:
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
<body>
[...]
</html>L'elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione:
| Attributo | Descrizione |
|---|---|
rel |
descrive il tipo di relazione tra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. |
href |
serve a definire l'URL assoluto o relativo del foglio di stile. È obbligatorio |
type |
identifica il tipo di dati da collegare. Per i CSS il valore da usare è text/css. L'attributo non è più obbligatorio a partire dalla versione 5 del linguaggio HTML. |
media |
con questo attributo si identifica il supporto (schermo, stampa, etc.) cui applicare un particolare foglio di stile. È un attributo opzionale. Per i dettagli implementativi si veda la lezione 6 della guida. |
Usare @import per caricare un CSS esterno
Un altro modo per caricare CSS esterni è usare la direttiva @import all'interno dell'elemento <style>:
<html>
<head>
<style>
@import url(stile.css);
</style>
</head>
<body>
[...]
</html>Il CSS va collegato definendo un URL assoluto o relativo da racchiudere tra parentesi tonde (ma vedremo che altri modi sono accettati) e che la dichiarazione deve chiudersi con un punto e virgola. Questa modalità di inserimento di CSS esterni è comunque ormai in disuso. Il metodo da prediligere è quello basato sull'elemento link.
Fogli incorporati CSS
I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite il tag <style>. Anche in questo caso la dichiarazione va posta all'interno della sezione <head>:
<html>
<head>
<style type="text/css">
body {background: white;}
p {color: black;}
[...]
</style>
</head>
<body>
[...]
</html>Come si vede, la parte di codice che ci interessa inizia con l'apertura del tag <style>. Esso può avere due attributi:
type(opzionale);media(opzionale).
Per entrambi gli attributi valgono le osservazioni viste in precedenza. Seguono le regole del CSS e la chiusura di </style>.
CSS in linea
L'ultimo modo per formattare un elemento con i CSS consiste nell'uso dell'attributo HTML style. Esso fa parte della collezione di attributi HTML definiti globali: si tratta di quegli attributi applicabili a tutti gli elementi. La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente:
<elemento style="regole_di_stile">Se, ad esempio, si vuole formattare un titolo h1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo:
<h1 style="color: red; background: black;">...</h1>Le cose da osservare nel codice sono due. Come valore di style si possono dichiarare più regole di stile. Esse vanno separate dal punto e virgola. I due punti si usano invece per introdurre il valore della proprietà da impostare. Esattamente come si fa con i CSS esterni e incorporati.
Consigli sui fogli di stile CSS
A questo punto è giusto chiedersi: quando usare l'una o l'altra soluzione? Il punto di partenza nella risposta deve essere questo: i risultati nella formattazione del documento non cambiano. Una cosa è però facilmente intuibile: l'uso estensivo di fogli in linea rischia di compromettere uno dei principali vantaggi dei CSS, ovvero avere pagine più leggere e facili da gestire. Intervenire nei meandri di una pagina per andare a modificare uno stile e ripetere l'operazione per quante sono le pagine del nostro sito può diventare davvero frustrante. Del resto, il loro uso è considerato deprecato anche dal W3C. Nelle più moderne pratiche di sviluppo, l'uso di CSS in linea è quasi sempre limitato a regole inserite dinamicamente tramite Javascript.
Dunque, usare sempre fogli di stili esterni. Ricorrere a quelli incorporati per particolari esigenze di formattazione su elementi specifici di una certa pagina. Rifuggire fin quando è possibile dall'uso di CSS in linea.