Per poter utilizzare il CSS esistono fondamentalmente tre sistemi, adatti alle varie esigenze:
- in linea, ossia posti all’interno del tag HTML da influenzare;
- incorporati al documento HTML, quindi una zona del foglio HTML marcata come CSS, posta generalmente in cima al documento;
- esterni, cioè un file con estenzione .css separato dal codice HTML e richiamato tramite un apposito link;
Di questi tre sistemi io prediligo - nel limite del possibile (e ovviamente a seconda dei casi) - esclusivamente il terzo (per questioni di praticità di scrittura, di aggiornamento e per un sacco di altre cose che ci si rende conto solo quando lo si usa). In fin dei conti il CSS è nato per dare quella completa astrazione al layout della pagina HTML senza per questo andare a toccare il codice stesso, quindi viene da se che l’uso degli altri due sistemi dovrebbe trovare scarso utilizzo (anche se non vi nascondo ad oggi si trovano in giro siti che nemmeno sanno cosa sia il CSS, ma questa è tutta un’altra storia).
I Fogli di stile in linea
Questa soluzione è utile quando si intende limitare la modifica del comportamento grafico ad un singolo tag del codice HTML, lasciando inalterate tutte le altre proprieta’ della pagina. Per esempio:
Testo sottolineato
<font style=""text-decoration:" underline="">Testo sottolineato</font>I Fogli di stile incorporati
I fogli di stile incorporati nel documento hanno il medesimo compito del CSS in linea, modificare il comportamento del tag. La differenza sta nel fatto che si possono definire delle classi o dei blocchi di codice attribuibili solo a determinati elementi marcati con un certo ID.
Nel primo caso, tutti i tag (a patto che le proprietà utilizzate nel CSS siano valide e accomunabili tra loro nei diversi ambiti a cui la classe fa riferimento) cui il valore dell’attributo class="" sia uguale vengono modificati contemporaneamente. Nel secondo caso, viene modificato esclusivamente il tag il cui valore dell’attributo ID coincida con quello specificato nel blocco CSS. Viene da se che dovendo essere l’ID univoco, le modifiche verranno applicate esclusivamente ad un tag (fatta eccezione se non si stanno commettendo degli errori).
Qualche esempio:
<style type=""text/css""> FONT {text-decoration: underline} </style>In questo caso tutto il testo della pagina verra’ sottolineato.
<style type=""text/css""> FONT.Sottolineato {text-decoration: underline} </style>In questo caso solo il testo a cui sarà stato associato per il tag FONT la classe Sottolineato verrà sottolineato.
<style type="text/css"> #Test {text-decoration: underline} </style>In questo caso, invece, supponendo che all’interno della pagina vi sia un elemento HTML la cui proprietà ID sia stata impostata su Test, e ammesso che questo elemento sia (nel nostro esempio) un tag DIV o SPAN che solitamente contengono testo, il testo di quell’elemento verrà sottolineato.
I fogli di stile esterni
Considerato che il CSS applicato ad una pagina di un sito web, spesso e volentieri è comune a tutte le pagine, onde evitare di avere tonnellate di codice che ripete sempre le stesse informazioni, è possibile racchiudere il CSS in un documento esterno.
Il vantaggio indiscutibile è la facilità di mantenumento di un sito web. Cambiare il font ad una pagina con un approccio tradizionale richiederebbe la modifica di tutte le pagine del sito (si pensi a siti di grandi dimensioni); mentre adottando un foglio di stile esterno sarebbe sufficente cambiare una o al massimo poche righe di codice ed in un solo file, con conseguente risparmio di tempo.
Ecco la sintassi per collegare la pagina al file esterno, da porsi anch’essa tra i tag:
<style type="text/css">@import "module/style.css";</style>La sintassi da usare nel file esterno è identica a quella degli stili incorporati, con la differenza che deve contenere il solo codice di stile, senza i tag <style></style>.