L’introduzione dei fogli di stile CSS (Cascading Style Sheets) rappresenta una delle più importanti evoluzioni nella gestione dei contenuti per il web. Grazie ai CSS è infatti possibile separare il template e l’impostazione grafica di una pagina dai contenuti veri e propri.
A seconda del livello di riutilizzabilità del codice CSS che si vuole raggiungere è possibile utilizzare i fogli di stile in tre diverse modalità. In questo post analizzeremo brevemente il contesto generale in cui muoversi per capire pregi e difetti dei tre modelli di sviluppo.
CSS in linea
E’ possibile utilizzare le potenzialità dei fogli di stile direttamente all’interno di un tag HTML. A questo risultato si arriva introducendo nel tag l’attributo “style” seguito dalle regole di stile da applicare. L’uso di CSS in linea è generalmente utilizzato per applicare effetti di formattazione limitati e per sua natura ha una limitata riutilizzabilità.
CSS interno
Un diverso approccio consiste nel definire tutte le regole del foglio di stile in una sezione separata del documento HTML. In questo contesto le regole di stile del documento vengono inserite nella sezione <head> e sono condivise a livello di documento, sono cioè pienamente riutilizzabili all’interno del medesimo file HTML.
CSS esterno
Una terza modalità consiste nel definire il foglio di stile in un documento esterno ed autonomo che viene poi richiamato all’interno della sezione <head> del file che ne farà uso. Questo modello rende massima la riutilizzabilità del codice CSS dal momento che più documenti HTML possono richiamare il medesimo foglio di stile. Per le stesse ragioni la modifica del foglio di stile CSS comporta una variazione grafica di tutte le pagine che lo richiamano semplificando in questo modo la manutenzione del progetto.