I fogli di stile

I fogli di stile, conosciuti a livello internazionale come CSS (Cascading Style Sheets) sono fogli che permettono di applicare stili e formattazioni alle pagine HTML senza i quali queste ultime rimarrebbero pagine poco attraenti esteticamente.

In questi fogli che riportano estensione .css vengono raccolte le regole che determinano la formattazione di tutte le pagine di un sito. Nei siti più piccoli normalmente ne viene creato uno solo, spesso denominato style.css; nei siti più strutturati non è raro trovarne più di uno, ciascuno che fa riferimento ad una sezione o una parte del sito web.
A volte, quando si fa uso di un framework come Bootstrap, si possono trovare altri fogli css che raccolgono le regole del framework in questione.

L’utilizzo dei fogli di stile non è l’unico metodo per applicare degli stili agli elementi HTML: è possibile infatti, seppur sconsigliato, indicare gli stili direttamente nei tag della pagina HTML (cosiddetto metodo inline) digitando style=” all’interno del tag dell’elemento che si vuole formattare e creando la regola. Deve essere chiaro che in questo modo la formattazione sarà valida solo per quel singolo elemento HTML.

Un altro metodo, anch’esso sconsigliato, è quello dei fogli di stile incorporati: le regole sono cioè inserite all’interno di un tag style direttamente nel foglio HTML nella sezione Head. In questo caso le regole saranno applicate solamente alla pagina in questione.

Il metodo consigliato e largamente utilizzato è quello indicato inizialmente, tramite fogli di stile esterni, collegati a ciascuna pagina HTML. In questo modo si ottengono i maggiori vantaggi potendo applicare le regole di formattazione direttamente a tutte le pagine di un sito.

 

Codice CSS

 

Pur essendo chiaro e semplice il concetto, non è sempre facile l’utilizzo e la gestione spesso contemporanea dei diversi modi di applicazione genera conflitti che vanno capiti e gestiti. Come abbiamo visto non è raro che gli stili provengano da fonti diverse (stili predefiniti dei browser, stili applicati inline ai tag HTML, stili
ricavati da fogli css esterni o incorporati) e in questo caso bisogna avere ben presenti le regole che vengono seguite per determinare quale regola deve prevalere.

Un altro concetto chiave dei Cascading Style Sheets riguarda l’ereditarietà. Una pagina HTML presenta infatti una struttura ad albero, con tag che vengono aperti all’interno di altri. Le regole definite dai fogli di stile vengono normalmente ereditate anche dagli elementi discendenti appartenenti allo stesso ramo dell’albero.
Anche se questo concetto è abbastanza semplice, nella pratica ci si scontra con il fatto che non tutte le proprietà possono essere ereditate; in tal caso sarà necessario impostare una regola a parte o forzare l’ereditarietà utilizzando il valore inherit richiedendo l’applicazione delle proprietà dell’elemento genitore.

A parte questi punti di attenzione i fogli di stile rappresentano un metodo molto efficace per formattare interi siti web impostando poche regole e con il grande vantaggio di riuscire a modificare la formattazione senza dover intervenire su tutti i tag delle pagine HTML.