eXceed Srl
27 Dicembre Web

Introduzione al CSS

Introduzione al linguaggio di markup CSS

Quando si parla dei fogli di stile CSS (acronimo di Cascading Style Sheets), in informatica ci si riferisce a quel linguaggio utilizzato per definire il layout grafico e stilistico di una pagina strutturata con i linguaggi di markup HTML, XML, XHTML, SVG, spesso, per non dire sempre, ampiamente utilizzati per la realizzazione di siti web e la realizzazione degli e-commerce.
CSS e le sue regole, sono regolamentati da W3C fin dal 1996.
I fogli di stile in CSS sono nati come innovazione necessaria per separare quella che è la formattazione delle pagine in HTML e dei suoi relativi contenuti in quello che è la parte grafico-artistica relativa ai layout degli stessi, sia per permetterne una più rapida esecuzione e sia per semplificarne la corretta manutenzione.


La storia del CSS

Per permettere una manutenzione migliore e più efficace per far si che i browser possono interpretare al meglio i TAG di markup relativi alla struttura HTML di un sito web nel 1993 nei laboratori di Netscape Navigator e di Internet Explorer si iniziarono a progettare TAG mirati per far si che i propri browser leggessero al meglio ed il prima possibile le pagine scritte in HTML, da lì iniziò quelle che venne definita la guerra dei browser.
Questi TAG proprietari erano l’unico modo per gli autori di definire la formattazione così l’uso di questi TAG non canonici diventò sempre più pressante e intensa, tuttavia questi TAG comportavano non pochi problemi, uno su tutti la lunghezza, specie se confrontata con una pagina che adotta il linguaggio CSS.
In secondo luogo il problema risiede nella mancata logica del codice XHTML, un codice, che non si attiene agli standard.

Il terzo problema era forse quello più importante, ovvero creare difficoltà nella lettura di determinati siti web contenenti quei TAG non canonici o proprietari da parte dei dispositivi mobili, specie durante l’epoca dell’avvento degli smartphone e di un repentino cambio di Aspect Ratio dal 4:3 al 16:9.
Un’ulteriore problematica si rifaceva a quei siti internet creati prima dell’avvento del web 2.0, ovvero tra i primi degli anni 90 e i primi degli anni 2000 durante quel periodo storico in cui l’architettura web nel buon 90% dei casi veniva strutturata tramite l’ampio uso di tabelle per realizzare quelle che era l’impaginazione dei layout.

Un altro modo per realizzare siti web sempre, a cavallo di quell’epoca, era quello di strutturare in maniera innovativi i siti web più affascinanti ed appetibili utilizzando le tecniche di animazioni e trasformazione pre HTML 5 e CSS introdotte da Adobe con il linguaggio Adobe Flash.
Tutti questi formati furono presso soppiantati dalle varie evoluzioni dei linguaggi di markup, grazie ad HTML 5 e CSS 3.


La struttura CSS

Fondamentalmente i modi per “iniettare” CSS all’interno di una preesistente struttura HTML sono due inline o su foglio di stile.
Nella sua variante inline gli attributi / regole CSS vengono inserite all’interno di quelli che sono i TAG principali di HTML forzandone stile e grafica.
Nel secondo caso vengono inserite tutte le regole su dei file separati richiamati all’interno dei TAG HTML tramite delle voci di richiamo note con il nome di classi.

Nel primo esempio troveremo il CSS inline:

<p style="text-align: center;">Testo centrato</p>

Nel secondo esempio troveremo quello che viene definito l’inserimento di CSS tramite foglio di stile.

File HTML

<html>
    <head>
       <link rel="stylesheet" href="fileCSS.css">
    </head>
    <body>
       <p class="centrato">Testo centrato</p>
    </body>
</html>

File CSS

.centrato {
    text-align: center;
}

In conclusione

Il Cascading Style Sheets ha rivoluzionato quello che è il modo di fare grafica all’interno dei siti web, e nonostante sia un linguaggio di markup facilmente integrabile con linguaggi di programmazione quale JavaScript o framework con esso cooperanti (jQuery e Angular) resta comunque un linguaggio di markup a supporto di HTML, XHTML, XML o SVG.
Come per gli altri nostri articoli riguardanti i linguaggi di markup che vi invitiamo a sfogliare vi ricordiamo e ci preme precisare, che anche questo articolo non vuole in alcun modo essere un tutorial ne un documento didattico in quanto, andrebbe certamente approfondito con nozioni in esso mancanti che ne amplierebbe abbondantemente quello che è uno dei linguaggi più importanti e utilizzati degli ultimi 30 anni.