Perché i fogli di stile?
Se si creano pagine Web in maniera "tradizionale", le indicazioni grafiche sono inserite nel codice HTML della pagina. Ovvero, ogni volta che si desidera far apparire un testo in rosso bisogna scrivere <font color="red">. Per mostrare una tabella con bordi spessi si scrive <table border="2">.
Con questo metodo e con un sito statico (dove ogni articolo ha la propria pagina HTML specifica), modificare l’impaginazione di tutto il sito diventa un incubo: è necessario aprire uno per uno i file HTML, cercare la porzione del codice HTML che va modificata, ed effettuare le modifiche una dopo l’altra (per esempio sostituire <font color="red"> con <b> se si decide che i caratteri che prima erano in rosso ora devono essere in grassetto).
Come già si sa, SPIP migliora molto la situazione: non è più necessario modificare centinaia di file HTML, ma solo una manciata di modelli; e l’impaginazione viene aggiornata automaticamente in tutto il sito. Tuttavia, il problema non è risolto del tutto. Per esempio, ipotizziamo di aver deciso di utilizzare un certo blu pastello su molti elementi del sito, al fine di dare un’identità grafica al nostro sito: i link, gli inserti, alcuni elementi di navigazione... sono visualizzati in blu pastello. Il giorno in cui vogliamo sostituire il blu pastello con un verde pallido dobbiamo modificare tutte le parti del modello in cui appare il blu pastello per sostituirlo con il verde pallido. Ciò può risultare demoralizzante: non è facile in queste condizioni cambiare rapidamente la resa delle pagine, anche solo per fare degli esperimenti.
La soluzione è utilizzare i fogli di stile. Un foglio di stile è un file in cui si definisce un insieme di proprietà grafiche, e dove esse devono essere applicate. Notiamo due vantaggi fondamentali dei fogli di stile:
- il foglio di stile è un file unico e centralizzato, che è possibile applicare a qualsiasi file HTML (e modello di SPIP) desiderato;
- le proprietà grafiche sono definite una sola volta nel foglio di stile, indipendentemente dal numero di ricorrenze di queste proprietà all’interno dell’HTML.
In pratica
Il foglio di stile, nel momento in cui si applica a un file HTML (che può essere un modello di SPIP), deve essere dichiarato nel tag <head> del file HTML - ai lati del titolo e di altri campi <meta>. Nella maniera seguente:
<head>
...
<link rel="stylesheet" type="text/css" href="miei_stili.css">
</head>In questo esempio il file miei_stili.css contiene le proprietà grafiche che si vogliono applicare alla pagina HTML (in tutto il tutorial si presume che miei_stili.css è il nome dato al file). Questo file ha l’estensione "css". In effetti, CSS [1] è il nome del linguaggio utilizzato per i fogli di stile, allo stesso modo in cui HTML è il nome del linguaggio utilizzato per creare le pagine Web.
Nota: un foglio di stile può essere applicato sia a una pagina HTML classica ("statica") che a un modello di SPIP. Ciò significa che tutti i suggerimenti CSS valevoli nell’HTML classico potranno essere utilizzabili anche nei modelli del proprio sito...
Se avete letto i paragrafi precedenti con attenzione, sarete forse meditabondi: sì, è necessario apprendere un nuovo linguaggio per utilizzare i fogli di stile (SPIP non c’entra nulla!). Infatti, i CSS non utilizzano la sintassi HTML. Tuttavia, questo linguaggio è molto semplice, e pochi esempi sono sufficienti per avere buone prospettive di successo...