Introduzione ai CSS

Una pagina web formata fondamentalmente da due elementi: i contenuti veri e propri e
la formattazione ovvero l'aspetto con cui i contenuti sono mostrati all'utente. Il linguaggio
HTML ha come scopo quello di gestire i contenuti, specificandone la struttura attraverso
tag diversi. Ogni tag (ad esempio <h1> o <p>) specifica un diverso ruolo dei contenuti che
contrassegna.
I browser che interpretano il codice HTML mostrano all'utente formattazioni predefinite per
ogni tag che incontrano: cos, ad esempio, i contenuti marcati con il tag <h1> avranno
carattere 18pt e i contenuti marcati da <p> avranno carattere 12pt. Tuttavia questa
formattazione completamente sotto il controllo dell'utente, che pu modificarla nelle
impostazioni del suo browser.
Per permettere agli autori di definire l'aspetto delle loro pagine, dal 1993 in poi Netscape
Navigator ed Internet Explorer presentarono tag proprietari, ovvero non aderenti agli
standard e non compatibili con i browser concorrenti. Un esempio di questi tag <font>.
Questi tag proprietari erano l'unico modo per gli autori di definire la formattazione e cos il
loro uso diventato massiccio. Tuttavia questi tag presentano vari problemi:
1. Il peso delle pagine. Se confrontata con una pagina che adotta il linguaggio CSS, una
pagina che non lo adotta in genere pi pesante (in termini di bit) in un rapporto che
spesso raggiunge il 200%. Inoltre le istruzioni CSS possono essere raccolte in un file
esterno che rimane memorizzato nella cache del browser, riducendo ulteriormente la
quantit di dati che i server devono trasmettere.
2. Mancanza di standardizzazione. Un codice non aderente agli standard, ridondante e
confuso comporta molto lavoro aggiuntivo per i browser, che devono cercare di
correggere ed interpretare (quando possibile) direttive arbitrarie.
3. Mancanza di compatibilit con i nuovi dispositivi quali palmari e smartphone. Le
pagine HTML sono progettate per schermi con risoluzione minima 800x600 pixel. I
palmari, che hanno una risoluzione inferiore ed una forma dello schermo ben diversa
dal rapporto 4:3 dei monitor per computer, si trovano quindi impossibilitati a
visualizzarle correttamente.
Unaltra questione lutilizzo di tabelle, ovvero del tag <table>, per realizzare
l'impaginazione (layout) delle pagine web. Questo viene considerato dai puristi come
inaccettabile in quanto le tabelle sono pensate per impaginare dati tabulari e non layout
web. In realt l'unico svantaggio serio di questo sistema l'incredibile peso delle pagine.
Tutti i problemi enunciati hanno unorigine comune: la mancata separazione tra struttura
e aspetto del contenuto.
Per esempio, si supponga che un autore usi per i titoli di pagina il tag <font> invece del tag
<h1>:
<font size=+3 face=Helvetica color=red> Titolo di pagina </font>

1
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015

Da un punto di vista strutturale il tag font non ha significato. Per esempio, a cosa pu
servire il tag font in un browser che utilizza la sintesi vocale? Se al posto degli elementi
font lautore usa gli elementi titoli, un browser di questo tipo pu utilizzare un certo stile
linguistico per leggere il testo. Con il tag font, invece, il browser non ha modo di sapere
che un testo presenta qualche differenza rispetto al resto del documento.
Per tentare di risolvere questa situazione, nel 1996 il W3C eman le specifiche CSS 1. I
CSS 1 erano un interessante sistema per separare contenuto da formattazione. La base di
questo linguaggio, infatti, consisteva nel fatto che il contenuto sarebbe stato sempre
definito dal codice HTML, mentre la formattazione si sarebbe trasferita su un codice
completamente separato, i CSS appunto. I richiami tra i due codici venivano effettuati
tramite due particolari attributi HTML: class e id. I CSS 1 sviluppavano un'idea semplice
ed efficace, ma nonostante le loro grandi potenzialit non ebbero successo a causa della
mancanza di browser in grado di supportarli.
Per includere nuove funzionalit e rendere i CSS un linguaggio ben supportato, nel 1998 il
W3C eman le specifiche CSS 2 e nel 2004 le specifiche CSS 2.1. I CSS 2 sono la
naturale evoluzione dei CSS 1 ed offrono potenti soluzioni per risolvere soprattutto il
problema descritto al punto 3, con la possibilit di creare fogli di stile separati per i
dispositivi portatili. Anche il problema al punto 2 ormai pienamente risolvibile, scrivendo
una pagina HTML esclusivamente indirizzata alla struttura e ai contenuti e manovrandola
poi esclusivamente con i CSS per impaginarla. Con la comparsa di Internet Explorer 5, di
Firefox e di Opera 7, i CSS 2 hanno potuto avvalersi di browser in grado di interpretarli e
sono quindi entrati a far parte del codice di molti siti web.
Attualmente i CSS sono alla versione 3 (CSS 3), tuttavia, siccome le specifiche sono
costituite da sezioni separate dette moduli, il loro avanzamento avviene in tempi differenti
(http://www.w3.org/TR/#tr_CSS).

Che cos un foglio di stile

Un foglio di stile costituito da un insieme di regole espresse con la seguente sintassi:

SELETTORE { BLOCCO DICHIARAZIONI }

Il selettore , nel caso pi semplice, un tag HTML e indica a quale elemento della pagina
saranno applicate le propriet contenute nel blocco dichiarazioni. Il blocco dichiarazioni
contiene pi dichiarazioni separate da punto e virgola:

{ dichiarazione1; dichiarazione2; ; dichiarazioneN; }

2
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015

Come potete osservare, anche lultima dichiarazione del blocco seguita da un punto e
virgola. Ciascuna dichiarazione esprime una caratteristica di formattazione nel seguente
modo:

attributo : valore

E possibile indicare pi valori per uno stesso attributo separati da spazio:

attributo : valore1 valore2 valoreN

Esempi
h1 {color: blue; background: yellow;}

Tutti gli elementi h1 della pagina HTML - i titoli di livello 1 - hanno colore blu e sfondo
giallo.
p {font-family: medium Helvetica; font-weight: bold;}

Tutti gli elementi p della pagina HTML - i paragrafi - hanno font Helvetica di dimensione
media e appaiono in grassetto.

Attribuire le regole di stile ad un documento HTML

Lattribuzione di regole di stile ad una pagina HTML pu avvenire mediante lutilizzo di:
CSS esterni;
CSS incorporati;
CSS inline.

CSS esterni
Le regole CSS vengono inserite in un file di testo che viene salvato con estensione .css.
stile1.css
h1 {color: blue; background: yellow;}
p {font-family: medium Helvetica; font-weight: bold;}

3
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015

Il foglio di stile viene collegato alla pagina HTML utilizzando il tag <link>, che deve essere
posizionato dentro al tag <head>, ma non dentro altri elementi come <title>.
pagina.html
<html>
<head>
<link rel=stylesheet type=text/css href=stile1.css media=all>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
</body>
</html>

CSS incorporati
Le regole CSS vengono inserite direttamente nella sezione head della pagina HTML
utilizzando il tag <style>.
pagina.html
<html>
<head>
<style type=text/css media=all>
h1 {color: blue; background: yellow;}
p {font-family: medium Helvetica; font-weight: bold;}
</style>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
</body>
</html>

Mediante il tag <style> possibile importare fogli di stile esterni, semplicemente usando la
direttiva @import. Si possono importare pi fogli di stile esterni con lunico vincolo che le
direttive import siano inserite prima di ogni altra regola CSS. Supponiamo di voler
collegare alla pagina HTML un foglio di stile esterno adatto per la stampa (print).

pagina.html
4
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015

<html>
<head>
<style type=text/css media=all>
@import url(stile2.css) print;
h1 {color: blue; background: yellow;}
p {font-family: medium Helvetica; font-weight: bold;}
</style>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
</body>
</html>

CSS inline
Le regole di stile possono essere applicate ad ogni elemento del body utilizzando
lattributo style. Questa soluzione , ove possibile, da evitare.
pagina.html
<html>
<head>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
<h1 style=color: blue; background: yellow;> Titolo 1 </h1>
<p style=font-family: medium Helvetica; font-weight: bold;>
contenuto del paragrafo
</p>
...............................................
</body>
</html>

Lattributo style si pu associare a tutti i tag che si trovano allinterno del body.

5
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015

 Raggruppamento di selettori
Con i CSS possibile attribuire le stesse regole di stile a selettori diversi nel seguente
modo:
selettore1, selettore2, , selettoreN { BLOCCO DICHIARAZIONI}

Esempio
h1, h2 {color: purple;}

La regola specificata applicata ai selettori h1 e h2.

Una stessa regola pu essere applicata a tutti gli elementi di un documento HTML
utilizzando il SELETTORE UNIVERSALE *.
* { BLOCCO DICHIARAZIONI}

Esempio
* {color: purple;}

Selettori CLASS e ID
I CSS permettono di marcare alcune parti del documento per applicare solo ad esse un
determinato stile, indipendentemente dallelemento (tag HTML) coinvolto. Per esempio,
per far apparire in grassetto alcune parti di un documento che riteniamo importanti,
possiamo marcarle con lattributo class.
pagina.html
<html>
<head>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
<h1> Titolo 1 </h1>
<p class=importante>
contenuto del paragrafo 1

6
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015

</p>
<p>
contenuto del paragrafo 2
</p>
<p class=importante>
contenuto del paragrafo 3
</p>
<h1 class=importante> Titolo 2 </h1>
...............................................
</body>
</html>

La regola di stile che permette di far apparire in grassetto il primo e il terzo paragrafo la
seguente:

p.importante {font-weight: bold;}

La regola di stile che permette di far apparire in grassetto il secondo titolo la seguente:

h1.importante {font-weight: bold;}

Tutte le regole seguenti applicano lo stile grassetto agli elementi marcati importante,
indipendentemente dallelemento HTML.
*.importante {font-weight: bold;}
oppure
.importante {font-weight: bold;}

Lattributo class pu avere multipli valori. Per esempio, supponiamo che un paragrafo non
sia solo importante ma anche urgente e lo si voglia far apparire in rosso.
pagina.html
<html>
<head>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
<h1> Titolo 1 </h1>

7
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015

<p class=importante urgente>

contenuto del paragrafo 1
</p>
<p>
contenuto del paragrafo 2
</p>
<p class=importante>
contenuto del paragrafo 3
</p>
<h1 class=importante> titolo 2 </h1>
...............................................
</body>
</html>

La regola di stile che permette di far apparire in grassetto e di colore rosso il primo
paragrafo la seguente:
p.importante.urgente {font-weight: bold; color: red;}

In modo analogo si possono marcare alcune parti di un documento con lattributo id.
Tuttavia, mentre lo stesso valore di class pu essere applicato a pi di un elemento, i
valori di id non possono essere ripetuti e non nemmeno possibile attribuire loro
valori multipli. Anche la sintassi diversa: si usa il simbolo cancelletto (#) invece del
punto. Ad esempio, supponiamo di voler attribuire ai paragrafi di un documento un diverso
colore.
pagina.html
<html>
<head>
<title> Titolo della pagina </title>
</head>
<body>
...............................................
<h1> Titolo 1 </h1>
<p id=primo-paragrafo>
contenuto del paragrafo 1
</p>
<p id=secondo-paragrafo>
contenuto del paragrafo 2
</p>
<p id=terzo-paragrafo>
contenuto del paragrafo 3
</p>
...............................................

8
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015

</body>
</html>

La regole di stile da applicare sono:

p#primo-paragrafo {color: red;}
p#secondo-paragrafo {color: blue;}
p#terzo-paragrafo {color: green;}

Fogli di stile multipli

I fogli di stile vengono detti a cascata (cascade) perch quando sono presenti pi CSS
per uno stesso elemento, provenienti da diverse sorgenti (esterna, incorporata e inline),
viene generato un nuovo foglio di stile virtuale in base alle seguenti regole, in ordine di
priorit:
1. lo stile inline, specificato allinterno dellelemento html nel body, prevale su tutti gli
altri;
2. lo stile specificato nella sezione head con un css esterno o incorporato, viene
sovrascritto dallo stile inline ma prevale sullo stile di default del browser; lo stile
incorporato prevale su quello esterno a meno che il link al css esterno venga
inserito al di sotto dellelemento <style>, che contiene lo stile incorporato;
3. in assenza di uno stile specificato con i css, viene applicato lo stile predefinito nel
browser.
Esempio
Supponiamo che per un elemento <p> siano specificate le seguenti regole di stile in un
css esterno:
p {color: blue; font-family: Verdana;}
e la seguente regola allinterno del codice HTML, dentro al tag <style>:
p {color: red;}
Le regole effettivamente applicate allelemento <p> saranno:
p {color: red; font-family: Verdana;}
la prima proveniente dallo stile incorporato, che prevale su quello esterno, e la seconda
proveniente dal foglio esterno.

9
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015

 Altri selettori CSS

Selettore
tag1 tag2
tag1 > tag2
tag1 + tag2
tag1 ~ tag2
[attributo]
[attributo=valore]
[attributo~=valore]
[attributo|=parola]
[attributo^=valore]
[attributo$=valore]
[attributo*=valore]

Descrizione
Tutti gli elementi <tag2> posti dentro ad elementi <tag1>
Tutti gli elementi <tag2> il cui elemento genitore <tag1>
Tutti gli elementi <tag2> posti immediatamente dopo <tag1>
Tutti gli elementi <tag2> preceduti da <tag1>
Tutti gli elementi con lattributo specificato
Tutti gli elementi il cui attributo ha il valore specificato
Tutti gli elementi il cui attributo contiene il valore specificato
Tutti gli elementi il cui attributo ha un valore che inizia con la parola
specificata (interamente)
Tutti gli elementi il cui attributo ha un valore che inizia con il valore
specificato
Tutti gli elementi il cui attributo ha un valore che termina con il valore
specificato
Tutti gli elementi il cui attributo ha un valore che contiene il valore
specificato

Per quanto riguarda i selettori di attributi racchiusi tra parentesi quadre, si possono
anteporre a ciascuno di essi ulteriori selettori di tag. Per esempio:
tag[attributo=valore]
seleziona tutti gli elementi <tag> che hanno il valore specificato nellattributo.
Un elenco completo visibile alla pagina:
http://www.w3schools.com/cssref/css_selectors.asp .

Riferimenti
E. A. Meyer, Cascading Style Sheets - La guida completa, Hops Libri, 2007
Wikipedia, Foglio di stile, url: http://it.wikipedia.org/wiki/Foglio_di_stile
W3Schools, CSS Tutorial, url: http://www.w3schools.com/css/default.asp

Quest'opera distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0
Internazionale

10
Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/09/2015