I fogli Stile (CSS)

1. Introduzione

L’acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata) e designa un linguaggio di stile per i documenti web. I CSS istruiscono un browser o un altro programma utente su come il documento debba essere presentato all’utente, per esempio definendone i font, i colori, le immagini di sfondo, il layout, il posizionamento delle colonne o di altri elementi sulla pagina, etc.

La storia dei CSS procede su binari paralleli rispetto a quelli di HTML, di cui vuole essere l’ideale complemento.

HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento.

Per questo obiettivo, ovvero arricchire l’aspetto visuale e la presentazione di una pagina, lo strumento designato sono appunto i CSS. L’ideale perseguito da anni si può sintetizzare con una nota espressione: separare il contenuto dalla presentazione.

Prima di entrare nei dettagli del linguaggio CSS, è necessario soffermarsi su alcuni concetti chiave legati ad HTML. Si tratta di argomenti propedeutici per una migliore comprensione del meccanismo di funzionamento dei CSS. Inizieremo con la classificazione degli elementi HTML, per poi spiegare la configurazione della struttura ad albero di un documento.

Elementi blocco (block) ed elementi in linea (inline)

Osserviamo una pagina HTML tentando di non pensare al contenuto ma solo alla sua struttura e mettendo in atto una sorta di processo di astrazione.

Gli elementi blocco sono box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento. Possiamo verificarlo inserendo in una pagina HTML queste due righe di codice:

<h1>Titolo</h1>
<p>Paragrafo</p>

Le parole “titolo” e “paragrafo” appariranno su due righe diverse, perché <h1> e <p> sono elementi blocco.

Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline (oltre che, ovviamente, il loro stesso contenuto, essenzialmente testo). Come si può notare, quando sono inseriti nel documento non danno origine ad una nuova riga.

Accanto a queste due fondamentali tipologie di elementi, il modello di formattazione dei CSS prevede altre due categorie: quella degli elementi lista e quella degli elementi connessi alle tabelle.

Tutti gli elementi HTML, in sintesi, hanno una loro modalità di presentazione predefinita e corrispondente alle tipologie appena viste. Tramite i CSS possiamo modificare tale modalità attraverso la proprietà display. Grazie a quest’ultima, per fare solo un esempio, possiamo fare in modo che un titolo h1 (elemento blocco) venga mostrato come un elemento in linea; oppure far sì che un elemento a (inline) sia reso come un elemento blocco.

Elementi rimpiazzati e non rimpiazzati

Un’altra distinzione da ricordare è quella tra elementi rimpiazzati ed elementi non rimpiazzati. I primi sono elementi di cui uno user agent (il motore di un browser) conosce solo le dimensioni intrinseche. Ovvero, quelli in cui altezza e larghezza sono definite dall’elemento stesso e non da ciò che lo circonda.

L’esempio più tipico di elemento rimpiazzato è <img> (un’immagine). Altri elementi rimpiazzati sono: <input>, <textarea>, <select> e <object>. Tutti gli altri elementi sono in genere considerati non rimpiazzati.

La distinzione è importante perché per alcune proprietà è diverso il trattamento tra l’una e l’altra categoria, mentre per altre il supporto è solo per la prima, ma non per la seconda.

Struttura ad albero di un documento

Altro concetto fondamentale da assimilare per una corretta applicazione dei CSS è quello della struttura ad albero di un documento. Il meccanismo fondamentale dei CSS è infatti l’ereditarietà. Esso fa sì che molte proprietà impostate per un elemento siano automaticamente ereditate dai suoi discendenti. Sapersi districare nella struttura ad albero significa padroneggiare bene questo meccanismo e sfruttare al meglio la potenza del linguaggio. Tutti i concetti che spiegheremo qui di seguito sono definiti nel cosiddetto Document Object Model (DOM), lo standard fissato dal W3C per la rappresentazione dei documenti strutturati.

Presentiamo subito un frammento di codice HTML:

<html>
<head>
<title>Struttura del documento</title>
</head>
<body>
<h1>Titolo</h1>
<div>
<p>Primo <a href="pagina.htm">paragrafo</a>.</p>
</div>
<p>Secondo <em>paragrafo</em>.</p>
</body>
</html>

Il documento è una perfetta forma di gerarchia ordinata in cui tutti gli elementi hanno tra di loro una relazione del tipo genitore-figlio (parent-child in inglese). Ogni elemento è genitore e/o figlio di un altro.

Un elemento si dice genitore (parent) quando contiene altri elementi. Si dice figlio (child) quando è racchiuso in un altro elemento. In base a queste semplici indicazioni possiamo analizzare il nostro documento.

Ad esempio, <body> è figlio di <html>, ma è anche genitore di <h1>, <div> e <p>. Quest’ultimo è a sua volta genitore di un elemento <em>.

Si potrebbe concludere che anche <body> sia in qualche modo genitore di <em>. Non è esattamente così. Introduciamo ora un’altra distinzione, mutuata anch’essa dal linguaggio degli alberi genealogici, quella tra antenato (ingl: ancestor) e discendente (ingl: descandant).

La relazione parent-child è valida solo se tra un elemento e l’altro si scende di un livello. Esattamente come in un albero familiare si indica la relazione tra padre e figlio. Pertanto possiamo dire che <head> è figlio di <html>, che <a> è figlio di <p>, etc. Tra <div> e <a>, invece, si scende di due livelli: diciamo allora che <div> è un antenato di <a> e che questo è rispetto al primo un discendente.

L’albero del documento può essere letto non solo in senso verticale, ma anche orizzontale. In tal senso, gli elementi che sono posti sullo stesso livello, ovvero quelli che hanno lo stesso genitore, si dicono fratelli (ingl: siblings). Nel nostro esempio, h1, div e p sono fratelli rispetto all’elemento body.

Infine, c’è un solo elemento che racchiude tutti e non è racchiuso: <html>. Continuando con la metafora familiare potremmo dire che è il capostipite, ma in termini tecnici si dice che esso è l’elemento radice (ingl: root).

2. Come è fatto un CSS

Vediamo gli elementi costitutivi di un foglio di stile CSS. Osserviamo questa porzione di codice:

body {
background: white;
color: black;
}
/* Stili per i titoli h1 */
h1 {
color: red;
font: 36px Helvetica, Arial, sans-serif;
}
/* Colore del testo delle liste */
li {color: green;}
/* Colore dei titoli h1 per la stampa */
@media print {
h1 {color: black;}
}

Nel frammento sono presenti le tre tipologie di dichiarazioni che è possibile inserire in un CSS:

• regole;
• commenti;
• direttive @-rules.

Un foglio di stile non è altro che un insieme di regole accompagnate, volendo, da qualche nota di commento e da una o più @-rule. Dal momento che commenti e @-rule sono elementi opzionali e facoltativi, andiamo innanzitutto a spiegare cos’è e com’è fatta una regola, ovvero l’elemento fondamentale di un CSS.

L’illustrazione mostra la tipica struttura di una regola CSS. Essa è composta da due blocchi principali:

• il selettore;
• il blocco delle dichiarazioni.

Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi <h1>: lo sfondo sarà rosso, il colore del testo bianco.

Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe, la prima di apertura e la seconda di chiusura. Al suo interno possono trovare posto più dichiarazioni. Una dichiarazione è composta da una coppia:

• proprietà;
• valore.

La proprietà definisce un aspetto dell’elemento/selettore da modificare (margini, colore di sfondo, larghezza, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Le dichiarazioni vanno invece separate con un punto e virgola. Non è obbligatorio, ma è buona norma mettere il punto e virgola anche dopo l’ultima dichiarazione del blocco.

Una limitazione fondamentale da rispettare è questa: per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori.

Nelle definizione delle regole è possibile fare uso di proprietà singole e proprietà a sintassi abbreviata . Con questa espressione traduciamo il termine inglese shorthand properties, reso spesso, alla lettera, con il termine scorciatoie .

Le proprietà singole sono la maggior parte. Con esse impostiamo, per un dato elemento o selettore, un singolo aspetto: il colore, la dimensione del testo, il font da utilizzare, etc.

Con le shorthand properties è possibile invece definire con una sola dichiarazione un insieme di proprietà. Chiariamo con un esempio.

Ogni elemento presenta sui suoi quattro lati un certo margine rispetto a quelli adiacenti. È possibile definire per ciascuno di essi un valore usando quattro proprietà singole separate:

• margin-top
• margin-right
• margin-bottom
• margin-left

La regola sarebbe questa:

div {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}

Lo stesso risultato si può ottenere usando la proprietà a sintassi abbreviata margin:

div {margin: 10px 5px 10px 5px;}

Nel frammento di codice visto aal'inizio le parti racchiuse tra i segni /* e */, rappresentano commenti al codice.

/* Stili per i titoli h1 */
/* Colore del testo delle liste */
/* Colore dei titoli h1 per la stampa */

I commenti non sono interpretati dal browser. Sono utili nei CSS, come nei linguaggi di programmazione, per aggiungere annotazioni esplicative di vario tipo a beneficio di chi scrive e consulta il codice.

Le @-rules

Il terzo tipo di dichiarazione che è possibile inserire in un CSS è rappresentato dalla cosiddette direttive @-rules. Il nome deriva dal fatto che questo particolare tipo di istruzione è contrassegnato nella sua definizione dal simbolo/prefisso @ (at):

@media print {
h1 {color: black;}
}

Basti per il momento questa nota sulla definizione sintattica.

3. Valori e unità di misura nei CSS

Una proprietà CSS può essere impostata con l’assegnazione di specifici valori. In questa lezione vedremo quali sono i tipi di valore e le unità di misura con cui è possibile definire le proprietà. Prima di tutto, però, è opportuno spiegare due fondamentali regole sintattiche.

1. I valori di una proprietà non vanno mai messi tra virgolette. Le uniche eccezioni riguardano i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola. Un esempio:

/* Valori espressi per la proprietà content
con una stringa di testo */
content: "Viva i CSS";
/* Definizione del font Times New Roman */
p {font-family: "Times New Roman", Georgia, serif;}

2. Quando si usano valori numerici con unità di misura, non bisogna lasciare spazio tra numero e sigla dell’unità. È corretto quindi scrivere 15px oppure 15em. È invece sbagliato usare 15 px o 15 em. In questi casi la regola sarà ignorata o mal interpretata

Tipi di valore

Nei CSS i valori possono essere espressi da:

numeri

possono essere definiti come numeri interi (1, 23, 45, etc.) o in virgola mobile (1.2, 3.45, 4.90, etc.)
• unità di misura
• percentuali
• codici per la definizione dei colori
• URI
• parole chiave (keywords)
• stringhe di testo

/* Altezza di linea con un numero */
p {line-height: 1.2;}
/* Larghezza con unità di misura */
div {width: 300px;}
/* Larghezza in percentuale */
div {width: 60%;}
/* Colore con codice esadecimale */
body {background-color: #2795b6;}
/* URL per un'immagine di sfondo */
body {background-image: url(sfondo.jpg);}
/* Ripetizione dello sfondo con una keyword */
body {background-repeat: no-repeat;}
/* Stringa di testo */
content: "Viva i CSS";

Unità di misura per le dimensioni

Questa è la lista delle unità di misura usate per definire dimensioni, spazi o distanze. Nella pratica comune solo alcune di esse sono realmente usate. Le elenchiamo comunque tutte per completezza.

Percentuale

Un valore espresso in percentuale è da considerare sempre relativo rispetto ad un altro valore, in genere quello espresso per l’elemento parente. Si esprime con un valore numerico seguito (senza spazi) dal segno di percentuale: 60% è pertanto corretto, 60 % no.

Colori

Sui diversi modi per esprimere il valore di un colore si vedano gli aprofindimenti

Stringhe

Alcune proprietà dei CSS possono avere come valore una stringa di testo da inserire come contenuto aggiunto nel documento. I valori espressi da stringhe vanno sempre racchiusi tra virgolette. Le proprietà in questione sono due: content e quotes.

Valori URI

Si tratta di URL che puntano a documenti esterni (in genere immagini, come negli sfondi). Possono essere URL assoluti o relativi. In questo caso il percorso fa sempre riferimento alla posizione del foglio di stile e non del documento HTML.

La definizione dell’indirizzo è sempre introdotta dalla parola chiave url e va inserita tra parentesi tonde, con o senza virgolette. Queste possono essere singole o doppie. Un esempio:

background-image: url(sfondo.jpg);
background-image: url('sfondo.jpg');
background-image: url("sfondo.jpg");

4. Come inserire i fogli di stile CSS in un documento HTML

Vari sono i modi per inserire i fogli di stile CSS in un documento. Per capire il meccanismo è necessario chiarire preliminarmente la fondamentale distinzione tra fogli esterni e interni.

CSS esterni e interni

È esterno un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo modificabili anche con un editor di testo ai quali si assegna l’estensione .css.

Un foglio di stile si dice invece interno quando il suo codice è compreso in quello del documento. A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea.

Fogli di stile collegati

Per caricare un foglio di stile esterno in un documento esistono due possibilità. La prima è quella che fa uso dell’elemento HTML <link>. La dichiarazione va sempre collocata all’interno della sezione <head> del documento HTML:

<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
<body>
[...]
</html>

L’elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione:

Usare @import per caricare un CSS esterno

Un altro modo per caricare CSS esterni è usare la direttiva @import all’interno dell’elemento <style>:

<html>
<head>
<style>
@import url(stile.css);
</style>
</head>
<body>
[...]
</html>

Il CSS va collegato definendo un URL assoluto o relativo da racchiudere tra parentesi tonde (ma vedremo che altri modi sono accettati) e che la dichiarazione deve chiudersi con un punto e virgola. Questa modalità di inserimento di CSS esterni è comunque ormai in disuso. Il metodo da prediligere è quello basato sull’elemento link.

Fogli incorporati CSS

I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite il tag <style>. Anche in questo caso la dichiarazione va posta all’interno della sezione <head>:

<html>
<head>
<style type="text/css">
body {background: white;}
p {color: black;}
[...]
</style>
</head>
<body>
[...]
</html>

Come si vede, la parte di codice che ci interessa inizia con l’apertura del tag <style>. Esso può avere due attributi:

1. type (opzionale);
2. media (opzionale).

Per entrambi gli attributi valgono le osservazioni viste in precedenza. Seguono le regole del CSS e la chiusura di </style>.

CSS in linea

L’ultimo modo per formattare un elemento con i CSS consiste nell’uso dell’attributo HTML style. Esso fa parte della collezione di attributi HTML definiti globali: si tratta di quegli attributi applicabili a tutti gli elementi. La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente:

<elemento style="regole_di_stile">

Se, ad esempio, si vuole formattare un titolo h1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo:

<h1 style="color: red; background: black;">...</h1>

Le cose da osservare nel codice sono due. Come valore di style si possono dichiarare più regole di stile. Esse vanno separate dal punto e virgola. I due punti si usano invece per introdurre il valore della proprietà da impostare. Esattamente come si fa con i CSS esterni e incorporati.

Consigli sui fogli di stile CSS

A questo punto è giusto chiedersi: quando usare l’una o l’altra soluzione? Il punto di partenza nella risposta deve essere questo: i risultati nella formattazione del documento non cambiano. Una cosa è però facilmente intuibile: l’uso estensivo di fogli in linea rischia di compromettere uno dei principali vantaggi dei CSS, ovvero avere pagine più leggere e facili da gestire. Intervenire nei meandri di una pagina per andare a modificare uno stile e ripetere l’operazione per quante sono le pagine del nostro sito può diventare davvero frustrante. Del resto, il loro uso è considerato deprecato anche dal W3C. Nelle più moderne pratiche di sviluppo, l’uso di CSS in linea è quasi sempre limitato a regole inserite dinamicamente tramite Javascript.

Dunque, usare sempre fogli di stili esterni. Ricorrere a quelli incorporati per particolari esigenze di formattazione su elementi specifici di una certa pagina. Rifuggire fin quando è possibile dall’uso di CSS in linea.

5. L’attributo media e i tipi di media

Nella pagina precedente abbiamo accennato all'attributo HTML media. Grazie ad esso siamo potenzialmente in grado di impostare un foglio di stile per ogni supporto su cui la nostra pagina verrà visualizzata. Una possibilità davvero interessante e che va sempre più acquistando importanza con l’ampliarsi dei dispositivi di fruizione delle pagine HTML e CSS.

Se prima c’era unicamente un browser, oggi ci sono tablet, smartphone, schermi televisivi, console per i videogiochi. Per non parlare dei software usati dai disabili come i browser vocali. Ciascuno di questi supporti presenta caratteristiche diverse in termini di memoria, ampiezza dello schermo e funzionalità. Riuscire ad adattare uno stile unico a tutti è praticamente impossibile, oltre che controproducente. La soluzione ideale sta quindi nella creazione di fogli di stile ad hoc.

Sintassi

L’attributo media può accompagnare sia l’elemento <link> sia l’elemento <style>. Ecco due esempi di sintassi:

<link href="print.css" media="print" rel="stylesheet">
<style media="screen">
regole CSS...
</style>

Per sfruttare a fondo questa opzione è fondamentale conoscere i diversi valori possibili per l’attributo:

Il valore di default è all, usato automaticamente in mancanza di una dichiarazione esplicita (ricordiamo infatti che media è un attributo opzionale).

È possibile usare più di un valore, ma i nomi della lista vanno separati da una virgola:

<link rel="stylesheet" media="print, tv, aural" href="print.css">

L’uso più tipico di questa funzionalità consiste nel collegare al documento vari fogli di stile adatti a ciascun supporto. Lo user agent che visualizzerà la pagina sarà in grado, se conforme agli standard, di caricare quello giusto:

<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="print.css">

Evoluzione e scenari d’uso

Nelle pratiche di sviluppo più comuni, le potenzialità offerte dall'attributo media e dalla vastità di dispositivi che supporta si riducono notevolmente. Di fatto, ove l’attributo sia utilizzato, i valori oggi sfruttati sono solo all, screen e print. E in effetti, un’applicazione utilissima è proprio quella che prevede l’implementazione di un foglio di stile ad hoc per la stampa. Ciò non significa che questo attributo abbia perso senso, anzi. Il suo uso è attualmente legato soprattutto al contesto delle media query, il meccanismo principe per l’attuazione del cosiddetto responsive design con cui possiamo identificare i dispositivi in base alle loro caratteristiche e funzionalità. Per approfondire l’uso dell’attributo media nelle media query rimandiamo ad approfondimenti specifici.

6. CSS Guida pratica

Scarica la guida pratica sui CSS

Clicca qui