3.22
Come Inserire in un documento HTML un Foglio di Stile
Esistono diverse metodologie per incorporare i fogli di stile CSS in un documento. Per comprendere questo processo, è essenziale inizialmente chiarire la distinzione fondamentale tra fogli di stile esterni e quelli interni.
CSS Esterni e Interni
Un foglio di stile viene considerato esterno quando è definito in un file separato dal documento principale. Questi fogli di stile sono fondamentalmente documenti di testo semplici, che possono essere modificati anche tramite un software di editing di testo e sono generalmente contrassegnati dall’estensione .css.
In contrasto, un foglio di stile viene definito interno quando il suo codice è incluso direttamente nel documento HTML. A seconda se si sta lavorando con fogli di stile esterni o interni, ci sono variazioni nella sintassi e nei metodi di inserimento. Queste diverse approccio vengono comunemente denominati fogli di stile collegati, incorporati o inline.
Molti approcci consentono l’inserimento di fogli di stile CSS all’interno di un documento. Per cogliere questa dinamica, è fondamentale preliminarmente comprendere la distinzione chiave tra fogli esterni e quelli interni.
Collegare i Fogli di Stile
Per incorporare un foglio di stile esterno in un documento, due opzioni sono disponibili. La prima impiega l’elemento HTML <link>. Questa dichiarazione deve sempre essere inserita 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> include vari attributi, la cui importanza e funzione sono cruciali:
| 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 utilizzare è “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, ecc.) a cui applicare un particolare foglio di stile. È un attributo opzionale. Per i dettagli implementativi, fare riferimento alla lezione 6 della guida. |
Usare @import per Incorporare un CSS Esterno
Un’altra modalità per incorporare CSS esterni è l’uso della direttiva @import all’interno dell’elemento <style>:
<html>
<head>
<style>
@import url(stile.css);
</style>
</head>
<body>
[...]
</html>
Il collegamento del CSS richiede la definizione di un URL assoluto o relativo, racchiuso tra parentesi tonde (anche se altre opzioni sono accettate), e la dichiarazione deve essere terminata con un punto e virgola. Questo metodo di inserimento dei fogli di stile esterni è in gran parte obsoleto, e la preferenza dovrebbe essere data all’approccio basato sull’elemento <link>.
Fogli di Stile Incorporati
I fogli di stile incorporati sono quelli inseriti direttamente nel documento HTML attraverso il tag <style>. Anche in questo caso, la dichiarazione va posizionata all’interno della sezione <head>:
<html>
<head>
<style type="text/css">
body {background: white;}
p {color: black;}
[...]
</style>
</head>
<body>
[...]
</html>
Come si può notare, la parte di codice di interesse inizia con l’apertura del tag <style>. Questo tag può avere due attributi:
- type (opzionale)
- media (opzionale)
Per entrambi gli attributi, valgono le osservazioni precedentemente discusse. Le regole CSS seguono, e il tutto viene chiuso con </style>.
CSS In Linea
L’ultima modalità di formattazione degli elementi con CSS implica l’uso dell’attributo HTML “style.” Questo attributo fa parte della collezione di attributi globali definiti in HTML, ovvero quegli attributi che possono essere applicati a tutti gli elementi. La dichiarazione avviene direttamente all’interno dei singoli tag all’interno della pagina, dando vita ai fogli di stile in linea. La sintassi generica è la seguente:
<elemento style="regole_di_stile">
Per esempio, se si desidera formattare un titolo h1 in modo che abbia il testo di colore rosso e lo sfondo nero, si scriverà:
<h1 style="color: red; background: black;">...</h1>
Ci sono due considerazioni importanti nel codice da notare. In “style,” è possibile dichiarare più regole di stile separate da un punto e virgola. I due punti, invece, vengono utilizzati per introdurre il valore della proprietà da impostare, proprio come nei fogli di stile esterni e incorporati.
Suggerimenti per l’Utilizzo dei Fogli di Stile CSS
A questo punto, sorge la domanda: quando è opportuno optare per una soluzione piuttosto che l’altra? La risposta deve partire da questo presupposto fondamentale: i risultati riguardo alla formattazione del documento rimangono invariati. Tuttavia, è importante notare che l’ampio ricorso ai fogli di stile in linea potrebbe mettere a rischio uno dei principali vantaggi dei CSS, ovvero la creazione di pagine più leggere e gestibili. Intervenire direttamente all’interno del codice di ciascuna pagina per apportare modifiche di stile, e ripetere tale operazione per ciascuna pagina del sito, potrebbe diventare un compito estremamente frustrante. Inoltre, va sottolineato che l’uso di fogli di stile in linea è considerato obsoleto anche secondo le linee guida del W3C. Nelle pratiche di sviluppo più moderne, l’utilizzo di CSS in linea è generalmente limitato alle regole di stile inserite dinamicamente tramite Javascript.
Pertanto, la raccomandazione è quella di utilizzare sempre i fogli di stile esterni come pratica standard. Si dovrebbero considerare fogli di stile incorporati solo per esigenze specifiche di formattazione relative a elementi particolari all’interno di una pagina. È consigliabile evitare l’uso di CSS in linea per quanto possibile.