Nella precedente lezione abbiamo visto che lo scopo dei CSS è quello di separare la formattazione dalla struttura del documento: se la seconda è demandata ai tag HTML, la prima è di esclusiva competenza dei fogli di stile.
Abbiamo anche detto che CSS è un linguaggio nuovo e distinto rispetto a CSS… ma a questo punto una prima domanda (assolutamente leggittima) potrebbe essere: in che modo vengono "collegate" la pagina HTML ed il suo foglio di stile?
Le soluzioni possibili sono due. Il codice CSS, infatti, può essere interno o esterno al documento HTML. Vediamo separatamente le due casistiche.
Fogli di stile interni
Questa possibilità prevede che il codice CSS sia scritto direttamente all’interno del documento HTML. Per farlo è possibile adottare due tecniche differenti:
Applicare uno stile inline
Si dice in linea l’utilizzo delle proprietà di stile direttamente all’interno del tag HTML che si desidera formattare. Così facendo le varie proprietà vengono scritte all’interno dell’attributo style il quale può essere applicato ad ogni tag HTML della pagina. Vediamo un esempio:
<p style="color: #FF0000;">Testo rosso</p>Nel nostro esempio abbiamo applicato il colore rosso ad un paragrafo di testo.
Questa tecnica non è consigliata in quanto non realizza completamente l’auspicata separazione di struttura e formattazione. Il suo utilizzo, seppur non del tutto deprecabile, dovrebbe essere limitato a singoli casi specifici e non certo utilizzato quale tecnica abituale di web design!
Fogli di stile incorporati
All’interno del documento HTML possono essere definiti dei veri e propri fogli di stile. Questi consistono in un insieme di istruzioni CSS (riguardanti più elementi della pagina) che vengono racchiuse all’interno dei tag <style> e </style>. Normalmente queste istruzioni vengono inserite nell’intestazione del documento HTML (tra <head> e </head>) ma nulla vieta che siano inserite anche all’interno del body. Vediamo un esempio:
<html>
<head>
<title>CSS in linea</title>
<style type="text/css">
p { color: #FF0000; }
</style>
</head>
<body>
<p>Testo rosso</p>
</body>
</html>Il risultato che otterremo con questo codice è lo stesso, ma naturalmente sussistono una serie di differenze logiche e pratiche tra l’implementazione inline e quella attraverso un foglio di stile: assegnando uno stile ad un unico elemento in una pagina si otterrà quello stile solo per quello specifico elemento, come se lo si trattasse in stile HTML classico; assegnando invece uno stile nell’intestazione della pagina ad un tag, tutti gli elementi dello stesso tipo di quella pagina assumeranno lo stesso stile.
Fogli di stile esterni
Come detto è possibile definire anche esternamente un foglio di stile. Così facendo si realizza quella perfetta separazione tra struttura e formattazione che era negli intenti dei creatori dei CSS. In questo senso possiamo dire che questa soluzione rappresenta la tecnica implementativa "ideale" per i CSS.
Per creare un foglio di stile esterno è sufficiente inserire tutte le istruzioni CSS all’interno di un semplice file di testo che dovrà poi essere salvato con estensione .css, ad esempio style.css, come di convenzione fanno la maggior parte dei software per la gestione dei CSS e la maggior parte dei Webmaster. Nulla vieta, tuttavia, di utilizzare altri nomi. Ciò che conta è l’estensione del file.
Una volta creato il file CSS esterno sarà sufficiente richiamarlo nell’header della pagina attraverso il tag link, come nell’esempio che segue:
<html>
<head>
<title>CSS in linea</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Testo rosso</p>
</body>
</html>Volendo analizzare il tag link col quale abbiamo importato il nostro foglio di stile CSS:
- l’attributo rel indica la relazione tra il documento HTML ed il file linkato;
- l’attributo type definisce il tipo di file (nel nostro caso text/css);
- l’attributo href, infine, fa riferimento al nome ed al percorso del file CSS da richiamare all’interno della pagina.
Il codice contenuto all’interno del file style.css del nostro esempio sarà il seguente:
p { color: #FF0000; }e l’effetto che si otterrà sarà identico a quello degli esempi precedenti, con la differenza che con i fogli di stile interni sarà necessario ripetere la stilizzazione pagina per pagina (se non elemento per elemento se si utilizza la tecnica inline) mentre con i fogli di stile esterni lo stesso stile potrà essere utilizzato su tutti i documenti consentendo modifiche molto più veloci e su scala globale intervenendo su un unico file (il file .css appunto).
Conclusioni
Si noti che le diverse tecniche (stile inline, foglio di stile incorporato ed esterno) non sono tra lo incompatibili. All’interno di uno stesso documento HTML, quindi, nulla vieta di utilizzare le diverse tecniche. E nel caso di conflitti? Se cioè per lo stesso elemento venissero definiti stili differenti nel foglio di stile e poi mediante una stilizzazione inline? In questo caso, normalmente, "vince" la formattazione in linea (salvo casi particolari che vedremo più avanti).
