Nel precedente articolo di questa rubrica abbiamo visto in dettaglio cos’è l’HTML e come funziona. In questo articolo, invece, entreremo nello specifico e parleremo del CSS, cercando di capire cos’è una un foglio di stile e come funziona il linguaggio con il quale viene “scritto”.
Se l’HTML rappresenta la strutturata di una pagina web, il CSS serve determinarne lo stile.
Indice rapido
Cos’è il CSS
Come abbiamo visto una pagina HTML non è altro che un documento di ipertesto scritto con un particolare linguaggio di formattazione, il linguaggio HTML, che sfrutta dei precisi marcatori, i tag. Tale linguaggio quindi è in grado di definire la struttura e il contenuto della pagina, e determinare la formattazione di tale contenuto.
Tuttavia, per determinare l’aspetto di ogni singolo elemento della pagina e del sito, è necessario un linguaggio più adatto, il linguaggio CSS. Il CSS è, oggi, il linguaggio standard per la stilizzazione di documenti HTML che svolge il compito di “informare” il browser sull’aspetto visivo dei tag presenti nel documento.
Collegando un documento HTML al CSS è possibile definire colori, dimensioni, sfondi e tutto ciò che riguarda l’aspetto visuale degli elementi presenti nella pagina, e quindi il design di un intero sito. Risulta chiaro che qualunque designer, che si dedichi alla progettazione di siti, deve conoscere il funzionamento dei fogli di stile e le possibilità offerte dal CSS.
Esempio
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
[...]
</html>Esempio di associazione del CSS ad un documento HTML. "rel" descrive la relazione tra il documento e il file collegato. "href" definisce la URL (il percorso) del foglio di stile. "type" identifica il tipo di dati del file.
Un altro importante vantaggio del CSS è quello di poter essere collegato a tutte le pagine di un sito web stilizzandole in maniera uniforme e coordinata. Questa operazione ha tre vantaggi:
- Mostrare documenti HTML all’utente con un design coordinato, facendole percepire come pagine di un unico prodotto digitale, il sito internet.
- Ridurre il peso di ogni singola pagina, potendo spostare tutte le istruzioni di stile in un unico file senza doverle ripetere su ogni pagina.
- Avere un maggior controllo dell’aspetto degli elementi utilizzati su più pagine, grazie alla possibilità di centralizzare in un unico documento le operazioni di modifica e revisione.
Dagli attributi di stile allo style sheet
Prima del CSS per personalizzare l’aspetto di un tag HTML si utilizzavano degli attributi, che venivano associati ad ogni singolo tag di formattazione.
Ad esempio
"Color" "size" "face" erano attributi associabili a tag HTML come "font". Esempio tratto da: HTML.it
<font color="blue">testo blu</font>
<br/>
ovvero:
<br/>
<font color="#0000FF">testo blu</font>
Ci si rese presto conto, però, che questo modo di procedere comportava diversi problemi. Pima di tutto, in questo modo, si era costretti a ripete gli attributi di stile per ogni tag in ogni pagina del sito e in secondo luogo, si verificarono numerosi problemi di incompatibilità tra i diversi browser in circolazione. Per risolvere tali problemi, nel 1996, il W3C decide di presentare la specifica di un nuovo linguaggio con lo scopo dichiarato di separare la struttura di un documento dalla sua formattazione, il CSS.
Come funziona il CSS
L’idea che sta alla base del CSS è quella affidare ogni aspetto di formattazione ad un nuovo linguaggio le cui istruzioni possono riferirsi ai singoli tag HTML della pagina mediante la scrittura di regole da associare ai tag o agli attributi di identificazione univoca (ID) e di classe (class). Grazie a questo sistema, un singolo elemento html può assumere un aspetto diverso in base al tag, alla classe o all’ID che gli viene associato.
Ovviamente, come l’HTML anche il CSS ha una sintassi precisa determinata dal W3C e risponde a logiche di funzionamento precise. CSS, infatti, sta per Cascading Style Sheets o “foglio di stile a cascata”. In particolare, a “Cascata” ci dice due cose sul funzionamento del CSS:
- Le regole che determinano l’aspetto di un elemento vengono richiamate singolarmente. Questo vuol dire che non importa dove viene scritta una regola CSS all’interno di un foglio, ciò che è scritto prima non ha precedenza o priorità rispetto a ciò che è scritto dopo e viceversa.
- Ne deriva che, più di una regola di stile potrebbe applicarsi a un particolare elemento HTML, quindi nasce il problema di determinare quale regola vince sull’altra. Nel CSS la priorità è “a cascata”: dalle regole più generali alle regole specifiche la regola più specifica viene scelta.
Ad esempio
Se all'interno del mio CSS scrivo una regola in cui tutti i tag HTML "p" (cioè tutti i paragrafi) devono essere rossi, il testo di tutti i paragrafi mi apparirà rosso. Ma se aggiungo un'altra regola in cui scrivo che tutti i tag a cui ho associata la classe "XY" devono essere blu, vedrò tutti i paragrafi verdi ad eccezione di quelli con classe "XY" che appariranno blu. La regola più specifica vince su quella generale.
A questo punto facciamo una precisazione: In questo articolo, non andremo nello specifico del codice ma ci limiteremo a spiegarne il funzionamento. Come per l’HTML, se volete imparare il linguaggio e scoprire i segreti del coding vi suggerisco di consultare uno dei miei riferimenti preferiti “HTML.it” e tenere in casa libri come: “HTML e CSS. Progettare e costruire siti web“, di Jon Duckett – edizioni Wiley. In questo link trovate la mia bibliografia di riferimento completa.
Detto questo, torniamo a vedere il principio di funzionamento del CSS. Come accennato, per determinare l’aspetto di un elemento bisogna definire delle regole CSS. Queste regole possono essere associate in generale ai tag html oppure a specifici tag con attributi “id” (preceduto da un “#”) o “class” (preceduto da un “.”).
Regole per i tag
Grazie ai fogli di stile CSS, posso andare a gestire l’aspetto di tutti i tag che utilizzo nelle pagine HTML collegate al foglio. In questo modo io determino in maniera centralizzata come il browser deve rappresentare un determinato tag in tutto il sito.
Ad esempio
Se io volessi che tutti i titoli di intestazione delle pagine web del mio sito abbiano le stesse caratteristiche (ad esempio fossero in blu), mi basta creare una regola CSS sul mio foglio di stile associata al tag che utilizzo per il titolo di testata (ovvero "h1").
h1 {color: blu;}In questo modo tutte le volte che utilizzerò il tag h1, il testo contenuto nel tag apparirà blu
Regole per gli ID
Se, invece, in diverse pagine del mio sito ho sempre un elemento con le stesse caratteristiche, posso determinare l’aspetto di tale elemento attraverso l’utilizzo di un attributo ID.
Ogni pagina può avere un solo tag con lo l’attributo ID dello stesso valore, questo rende l’ID un attributo univoco e viene utilizzato per gestire quegli elemini presenti una sola volta in ogni pagina (Ad esempio il footer o un intestazione)
Ad esempio
Se io volessi che tutti i titoli di intestazione delle pagine principali del mio sito abbiano le stesse caratteristiche (ad esempio fossero in blu), ma non i titoli delle pagine secondarie, potrei creare nel mio foglio di stile un ID CSS (identificabile grazie a "#"):
#testoblu {color: blu;}Per poi associarlo, attraverso l’attributo html “id”, solo ai tag “h1” delle pagine html che mi interessano.
<h1 id="testoblu">Titolo pagina blu</h1>Regole per le classi
Se infine io volessi attribuire una caratteristica a più elementi di una stessa pagina, senza riscrivere tutte le volte le singole caratteristiche, mi basterà creare una classe CSS ed associarla ai tag HTML che voglio vengano rappresentate dal browser con tali caratteristiche.
Ad esempio
Per associare il colore blu a diversi elementi, è sufficiente creare una classe (utilizzando "." prima del nome della classe), con la regola "color" che ha come attributo colore il valore "blue".
.testoblu {color: blu;}e andare ad associare questa classe a tutti i tag html che vogliamo visualizzare come testo blu
<h2 class="testoblu">Titolo blu</p>
<p>Ovvero</p>
<p class="testoblu">Il mio testo blu</p>Conclusione
Il CSS rappresenta uno strumento fondamentale per la progettazione e la gestione dell’aspetto visivo delle pagine web. Grazie alla sua capacità di separare la struttura dal design, permette di creare siti web esteticamente coerenti e facilmente gestibili.
La possibilità di centralizzare le regole di stile in un unico file non solo semplifica il processo di sviluppo, ma migliora anche l’efficienza e la manutenzione del sito. Per chiunque desideri intraprendere la carriera di web designer, una solida conoscenza del CSS è imprescindibile, poiché consente di trasformare semplici documenti HTML in esperienze utente coinvolgenti e visivamente accattivanti.
