I Fogli di stile sono la tecnologia di riferimento per la realizzazione dei layout e della formattazione delle pagine web, per chi fà web, come i webdesigner o i webmaster, conoscerli è fondamentale, non fosse per altro che rappresentano lo standard imposto dal W3C per realizzare la struttura delle pagine web.
Un layout web realizzato con i CSS anzichè con le classiche tabelle HTML è impronta di professionalità e qualità del sito, oltre ovviamente a tutta una serie di vantaggi come l'indicizzazione, l'accessibilità, la manutenibilità, la pulizia del codice, la velocità del sito stesso. La filosofia che sta dietro i fogli di stile nasce dall'esigenza di avere un "linguaggio" distinto dall'HTML per strutturare e formattare i siti web, mentre l'HTML dovrebbe essere usato esclusivamente come markup per i contenuti, una tabella HTML serve per presentare dei dati in forma tabellare e non per suddividere le sezioni di una pagina web, ecco perchè sempre più il W3C impone l'uso dei CSS come standard, per radicare anche la mentalità che il codice (di formattazione o di programmazione) deve essere tenuto separato dal contenuto della pagina web.
Non voglio però entrare nella storia e nel merito dei CSS, sarebbe un argomento ben troppo lungo che esula dal nostro scopo, voglio fornirvi invece un'articolo che racchiude e spieghi le quattro tecniche principali per inserire un foglio di stile all'interno delle pagine HTML, mostrando i vantaggi e gli svantaggi di ognuna di esse.
Le regole di stile dei CSS per il nostro sito web, possono essere scritte in un normalissimo file di testo con estensione .css e richiamato poi all'interno della pagina web, oppure inserito direttamente all'iiterno del codice della pagina, parleremo rispettivamente di fogli di stile esterni e fogli di stile interni. Fatta questa dovuta premessa, passiamo ad illustrare i 4 metodi per inserire un CSS nelle pagine Web.
1) Fogli di stile in linea
I CSS in linea rappresentano forse il modo più facile per applicare una regola di stile ad un tag HTML, infatti basta inserire la regola css all'interno di un qualsiasi tag HTML per vederla subito applicata a quell'elemento, ad esempio in questo modo:
<span style="font:Arial; font-size:medium; color:Red;">Hello Word!!!</span>
in questo esempio applichiamo un font Arial di dimensioni medie e colore rosso ad un semplice testo racchiuso nel tag span, niente di più facile.
Sebbene l'uso dei fogli di stile in linea sia semplice ed immediato il loro uso è fortemente sconsigliato, poichè non solo "sporcano" il codice della pagina, ma risultano poco uniformi e nel caso del cambio ad es. di un colore saremmo costretti a rivedere ogni singolo elemento html per tutte le pagine, per un sito di poche pagine ancora questo è possibile, ma per siti di grandi dimensioni capite bene che diventa un lavoro proibitivo. Il loro uso è da preferire solo in quei casi in cui dobbiamo modificare un singolo elemento o forzare una regola di stile presente su un foglio CSS esterno a cui non riusciamo ad accedere.
2) Fogli di stile incorporati
I CSS incorporati nella pagina rappresentano un passo in avanti rispetto ai CSS in linea, poichè tramite essi si definiscono una o più regole di stile all'interno di uno script css la cui valenza viene applicata all'intera pagina in cui si definiscono, come al solito facciamo un'esempio per capirci meglio:
<head>
...
<styletype="text/css" media="screen">
body {
font-family:"trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif;
background-color:White;
color:#666666;
font-size:.8em;
margin-top:0auto auto 0;
}
p {
padding: 1% 2% 1% 2;
}
</style>
</head>
<body>
...
</body>
Come vedete, per inserire le regole di stile in linea, ossia all'interno della pagina stessa, bisogna definirle nella sezione head, racchiuse in uno script di tipo CSS (l'attributo media indica l'output per cui verranno applicate, che può essere screen il video o print per la stampa). Le regole di stile definite in questo modo hanno valenza per tutta la pagina in cui sono inserite, quindi se definiamo una regola CSS per il tag paragrafo <p></p> questa verrà applicata a tutti i paragrafi presenti nella pagina. Anche questa tecnica porta gli svantaggi di quella precedente, nel caso di voler apportare una modifica, bisogna rivedere tutte le pagine del nostro sito, risulta utile invece quando si vuol definire esclusivamente una pagina o un componente diverso da tutti gli altri e focalizzare il foglio di stile all'interno della pagina stessa è un buon metodo per evitare una eccessiva frammentazione.
3) Fogli di stile esterni
I primi due metodi appartengono per così dire ai fogli di stile interni, per quelli esterni invece useremo un file con estensione css che andremo ad inserire all'interno del nostro progetto web (solitamente nell'Asset) e che poi referenzieremo dalle nostre pagine HTML, in questo modo:
</head>
...
<link rel="stylesheet" type="text/css" href="fogliodistile.css" media="screen" />
</head>
quindi nel file "fogliodistile.css" andremo a definire tutte le nostre regole di stile, per il layout, per la formattazione, per i colori, dichiareremo classi, selettori e quant'altro. In ogni singola pagina html includeremo il nostro file css semplicemente "linkandolo" nella sezione head del codice html. Questo è il metodo più comune ed usato per inserire i fogli di stile all'interno delle pagine html, ed offre molti vantaggi, innanzi tutto si ha una netta separazione tra il contenuto delle pagine e le regole di stile, inoltre le regole css definite nel file esterno hanno valenza su tutte le pagine che lo linkano, conseguentemente basterà apportare una modifica ad una regola presente nel foglio di stile esterno per vederla ripercuotere su tutto l'intero sito. Inoltre l'uso dei fogli di stile esterni incrementa anche la velocità di download delle pagine rispetto ai fogli di stile interni e conseguentemente la navigazione del sito, vi spiego il perchè, quando richiediamo una pagina web col browser (il client), facciamo un "download" della pagina e del codice in esso contenuto (quindi anche le regole CSS, interne o esterne che siano), quando passiamo a navigare la pagina successiva dello stesso sito, per i fogli di stile interni sarà necessario scaricare nuovamente tutto il codice, per quelli esterni invece no poichè saranno mantenuti nella cache del browser, allegerendo così il "peso" della pagina e migliorando la velocità di caricamento della pagina.
4) Fogli di stile "importati"
Infine c'è un quarto metodo per inserire i fogli di stile all'interno delle pagine di un sito, ma si tratta sempre di fogli di stile esterni, solo che con questo metodo saremo in grado d'inserire più fogli di stile esterni in un sol colpo, facendo uso e linkando un file CSS esterno che usi la direttiva @import per ogni altro foglio di stile esterno che si voglia inserire nelle pagine del sito. Quindi creiamo un file import.css ed al suo interno andremo a specificare quali file css vogliamo inserire, in questo modo:
@import "layout.css";
@import "format.css";
@import "default.css";
@import "menu.css";
dopodichè non dobbiamo far altro che linkare questo file nelle nostre pagine web, così come abbiamo fatto per i fogli di stile esterni visti al punto 3, in questo modo:
<link rel="stylesheet" type="text/css" href="import.css" media="screen" />
automaticamente inseriremo così tutti i fogli di stile esterni specificati nel file import.css. Attenzione, per come è illustrato nell'esempio, i vari fogli di stile assieme a quello import devono risiedere nelll stessa directory, diversamente ricordatevi di specificare i path corretti.
Questo metodo oltre a portarsi dietro tutti i vantaggi visti per i fogli di stile esterni, permette di specificare fogli di stile differenti, il che non è poco, pensate a siti di medie-grosse dimensioni, e tutto ad un tratto vi accorgete di dover inserire un secondo file css esterno, linkare nuovamente il secondo file su 2000 pagine sarebbe una vera seccatura. Inoltre a mio avviso tenere separati i fogli di stile del layout da quello degli stili per la formattazione o per l'home page ha un'enorme vantaggio, ovvero quello di modularizzare le regole e sapere subito dove andare a mettere le mani, senza perdersi in fogli di stile lunghi chilometri e chilometri.
Conclusioni
Un uso corretto dei CSS porta dei grandi benefici al sito ed alla sua manutenzione e rispetta gli standard del W3C, sapere come inserire i fogli di stile all'interno delle pagine HTML in modo corretto è il primo passo verso il raggiungimento di questo obbiettivo. Ricordatevi però che le regole di stile hanno una valenza simile a quella delle variabili locali e globali nella programmazione, ovvero, se definite ed inserite regole di stile diverse ed applicate agli stessi elementi html all'interno della stessa pagina, prevarrà per prima la regola css in linea, poi quella del css incorporato ed infine la regola definita nel foglio di stile esterno.
Chiunque voglia aggiungere qualcosa in merito all'argomento, porre una domanda o dare un suggerimento, può farlo attraverso i commenti.