Introduzione

Dietro il semplice acronimo CSS (Cascading Style Sheets - Fogli di

stile a cascata) si nasconde uno dei fondamentali linguaggi standard
del W3C. La sua storia cammina su binari paralleli rispetto a quelli di
HTML, di cui vuole essere l'ideale complemento. Da sempre infatti,
nelle intenzioni degli uomini del Consortium, HTML, così come la sua
recente evoluzione, XHTML, dovrebbe essere visto semplicemente

Guida ai fogli di stile come un linguaggio strutturale, alieno da qualunque scopo attinente
la presentazione di un documento. Per questo obiettivo, ovvero
arricchire l'aspetto visuale ed estetico di una pagina, lo strumento

CSS
designato sono appunto i CSS. L'ideale perseguito da anni si può
sintetizzare con una nota espressione: separare il contenuto dalla
presentazione.
La prima specifica ufficiale di CSS (CSS1) risale al dicembre del 1996.
Nel maggio 1998 è stata la volta della seconda versione: CSS2. Niente
stravolgimenti, ma molte aggiunte rispetto alla prima. CSS2 non è
altro che CSS1 più alcune nuove proprietà, valori di proprietà e
definizioni per stili non canonici come quelli rivolti alla stampa o alla
definizione di contenuti audio. E' attualmente allo stato di Working
Draft la nuova specifica CSS3.
Classificazione degli elementi Una pagina (X)HTML, per iniziare, non è altro che un insieme di
rettangoli disposti sullo schermo di un monitor. Non importa che si
tratti di paragrafi, titoli, tabelle o immagini: sempre di box rettangolari
si tratta.
La prima lezione di questa guida potrebbe spiazzarvi. Non parleremo di
CSS, ma di (X)HTML. O meglio, riprenderemo alcuni aspetti di questo Nell'immagine potete però osservare che non tutti i box sono uguali.
linguaggio che sono propedeutici per una migliore comprensione del Alcuni contengono altri box al loro interno. Altri sono invece contenuti
meccanismo di funzionamento dei CSS. Sapere bene su che cosa si all'interno dei primi e se si trovano (come si trovano) in mezzo a del
interviene con i fogli di stile è un passo necessario, visto che le cose testo notate che esso scorre intorno senza interrompere il suo flusso e
di cui parleremo, specie con l'avvento e l'abuso degli editor visuali, senza andare a capo. Avete nell'immagine la rappresentazione visiva,
sono spesso trascurate o misconosciute dai più. Se mi passate la anche se un pò semplificata, della fondamentale distinzione tra gli
metafora, possiamo dire che faremo come un bravo chirurgo che elementi (X)HTML, quella tra elementi blocco ed elementi inline.
prima di imparare gli strumenti deve conoscere bene il corpo umano
Gli elementi blocco sono i box che possono contenere altri elementi,
per operare con successo e senza fare danni. Inizieremo con la
sia di tipo blocco che di tipo inline. Quando un elemento blocco è
classificazione degli elementi.
inserito nel documento viene automaticamente creata una nuova riga
Elementi blocco e elementi in linea nel flusso del documento. Provate a inserire in una pagina (X)HTML
queste due righe di codice:
Osservate una pagina (X)HTML tentando di non pensare al contenuto <h1>Titolo</h1> <p>Paragrafo</p>
ma solo alla sua struttura. Mettete in atto, insomma, una specie di
processo di astrazione. Per aiutarvi ecco un’immagine: 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 tipo di
contenuto, essenzialmente testo). Nell'immagine sono i rettangoli con
il bordo verde. Come si può notare, quando sono inseriti nel
documento non danno origine ad una nuova riga.

Una terza categoria è quella degli elementi lista. Comprende in

pratica solo l'elemento LI (list item).

Elementi rimpiazzati (replaced elements)

Un'altra distinzione da ricordare è quella tra elementi rimpiazzati ed
elementi non rimpiazzati. I primi sono elementi di cui uno user
agent (il "motore" e la mente 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

Un altro concetto fondamentale che dovreste assimilare è 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 autamaticamente ereditate dai suoi discendenti.
Sapersi districare nella struttura ad albero significa padroneggiare
bene questo meccanismo e sfruttare al meglio la potenza del
linguaggio.
Presentiamo subito un frammento di codice HTML:
Il documento è in buona sostanza una perfetta forma di gerarchia
<html>
ordinata in cui tutti gli elementi hanno tra di loro una relazione del tipo
<head> genitore-figlio (parent-child in inglese, imparate la dicitura perchè
<title>Struttura del documento</title> nei linguaggi come DOM o Javascript ci si riferisce agli ordini della
</head> gerarchia proprio con questi termini.). Ogni elemento è genitore e/o
<body> <h1>Titolo</h1> figlio di un altro.
<div> <p>Primo Un elemento si dice genitore (parent) quando contiene altri elementi.
<a href="[Link]">paragrafo</a> Si dice figlio (child) quando è racchiuso in un altro elemento. In base
</p> a queste semplici indicazioni possiamo analizzare il nostro documento.

</div> BODY, ad esempio è figlio di HTML, ma è anche genitore di H1, DIV e

<p>Secondo P. Quest'ultimo è a sua volta genitore di un elemento B.
<b>paragrafo</b> Ovviamente, se osservate bene, potreste concludere che anche BODY
</p> è in qualche modo genitore di B. Non è esattamente così.
</body> Introduciamo ora un'altra distinzione, mutuata anch'essa dal
linguaggio degli alberi genealogici, quella tra antenato (ingl:
</html>
ancestor) e discendente (ingl: descandant). Semplice da capire. La
Questa è la sua rappresentazione strutturale secondo il modello ad relazione parent-child è valida solo se tra un elemento e l'altro si
albero: 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.

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). E qui spazziamo il campo da un possibile fraintendimento:
l'elemento radice di un documento (X)HTML non è BODY. E che HTML L'elemento <LINK> presenta una serie di attributi di cui è importante
non sia una semplice dichiarazione ma sia trattato alla stregua di spiegare significato e funzione:
qualunque altro elemento lo potete testare aprendo questa pagina con
1. rel: descrive il tipo di relazione tra il documento e il file collegato. E'
Explorer 6, Mozilla, Opera 6 o Explorer 5 Mac.
obbligatorio. Per i CSS due sono i valori possibili: stylesheet e
Come si vede abbiamo iniziato una guida dedicata a un linguaggio alternate stylesheet.
prettamente visuale tornando alle origini di HTML, ovvero al concetto
2. href: serve a definire l'URL assoluto o relativo del foglio di stile. E'
di struttura. Non è un capriccio, è semplicemente dare il giusto
obbligatorio.
inquadramento ai CSS: che sono nati per modificare lo stile di elementi
strutturali e non vanno intesi come un linguaggio grafico. Per queste 3. type: identifica il tipo di dati da collegare. Per i CSS l'unico valore
cose esistono Flash o Photoshop. possibile è text/css. L'attributo è obbligatorio.

4. media: con questo attributo si identifica il supporto (schermo,

stampa, etc) cui applicare un particolare foglio di stile. Attributo
Inserire i fogli di stile in un documento opzionale.

Iniziamo il nostro percorso dalle fondamentali nozioni di base,

rimanendo ancora in parte nel territorio di (X)HTML. Se CSS è un solo
linguaggio, vari sono i modi per inserire i fogli di stile CSS in un
Usare @import
documento. Per capire il meccanismo è necessario chiarire la Un altro modo per caricare CSS esterni è usare la direttiva @import
fondamentale distinzione tra fogli esterni e interni. all'interno dell'elemento <STYLE>:

CSS esterni e interni <style> @import url([Link]); </style>

Questo sistema è uno dei modi più sicuri per risolvere problemi di
E' esterno un foglio di stile definito in un file separato dal documento.
compatibilità tra vecchi e nuovi browser. Ci torneremo quindi più
Si tratta di semplici documenti di testo editabili anche con il Blocco
avanti. Per il momento basti notare che il CSS va collegato definendo
Note o TextEdit ai quali si assegna l'estensione .css.
un URL assoluto o relativo da racchiudere tra parentesi tonde (ma
Un foglio di stile si dice invece interno quando il suo codice è vedremo che altri modi sono accettati) e che la dichiarazione deve
compreso in quello del documento. A seconda che si lavori con un CSS chiudersi con un punto e virgola.
esterno o interno variano sintassi e modalità di inserimento. Rispetto a
queste diverse modalità si parla di fogli di stile collegati, incorporati Fogli incorporati
o in linea.
I fogli incorporati sono quelli inseriti direttamente nel documento
Fogli collegati (X)HTML tramite l'elemento <STYLE>. Anche in questo caso la
dichiarazione va posta all'interno della sezione <HEAD>:
Per caricare un foglio esterno in un documento esistono due <html> <head> <title>Inserire i fogli di stile in un
possibilità. La prima e più compatibile è quella che fa uso dell'elemento documento</title> <style type="text/css"> body { background:
<LINK>. La dichiarazione va sempre collocata all'interno della sezione #FFFFCC; } </style> </head> <body>...
<HEAD> del documento (X)HTML:
Come si vede il codice inizia con l'apertura del tag <STYLE>. Esso può
<html> <head> <title>Inserire i fogli di stile in un avere due attributi:
documento</title> <link rel="stylesheet" type="text/css"
href="[Link]"> </head> <body>... 1. type (obbligatorio)
2. media (opzionale)

per i quali valgono le osservazioni viste in precedenza. Seguono le

regole del CSS e la chiusura di </STYLE>.

Fogli in linea L'illustrazione mostra la tipica struttura di una regola CSS. Essa è
L'ultimo modo per formattare un elemento con un foglio di stile composta da due blocchi principali:
consiste nell'uso dell'attributo style. Esso fa parte della collezione di il selettore
attributi (X)HTML definita Common: si tratta di quegli attributi
il blocco delle dichiarazioni
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 Il selettore serve a definire la parte del documento cui verrà applicata
in linea. La sintassi generica è la seguente: la regola. In questo caso, ad esempio, verranno formattati tutti gli
elementi <H1>: lo sfondo sarà rosso, il colore del testo bianco. I
<elemento style="regole_di_stile">
selettori possono essere diversi e a queste varie tipologie dedicheremo
Se, ad esempio, si vuole formattare un titolo H1 in modo che abbia il una delle prossime lezioni. Per il momento sia chiara la funzione che
testo di colore rosso e lo sfondo nero, scriveremo: essi svolgono.
<h1 style="color: red; background: black;">...</h1> Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre
Le cose da osservare nel codice sono due. Come valore di style si regole da due parentesi graffe. Al suo interno possono trovare posto
possono dichiarare più regole di stile. Esse vanno separate dal punto e più dichiarazioni. Esse sono sempre composte da una coppia:
virgola. I due punti si usano invece per introdurre il valore della proprietà
proprietà da impostare.
valore

Come è fatto un CSS: regole e commenti La proprietà definisce un aspetto dell'elemento da modificare (margini,
colore di sfondo, etc) secondo il valore espresso. Proprietà e valore
devono essere separati dai due punti. Una limitazione fondamentale
Quanto visto finora riguarda essenzialmente il rapporto tra CSS e
da rispettare è questa: per ogni dichiarazione non è possibile indicare
(X)HTML: tutti gli elementi, gli attributi e le funzionalità analizzate
più di una proprietà, mentre è spesso possibile specificare più valori.
fanno parte della specifica del secondo linguaggio.
Questa regola è pertanto errata:
Con questa lezione entriamo nel vivo dell'argomento. Iniziamo con
body {color background: black;}
l'analisi degli elementi costitutivi di un foglio di stile. Un foglio di stile è
composto da regole (ingl. rules) e commenti. Ecco, un foglio di stile Mentre questa è perfettamente valida e plausibile:
non è altro che questo: un insieme di regole, accompagnate, volendo, p {font: 12px Verdana, arial;}
da qualche nota di commento. Andiamo innanzitutto a spiegare cos'è e Ancora, se in un blocco si definiscono più dichiarazioni, come
com'è fatta una regola. nell'esempio in figura 1, esse vanno separate dal punto e virgola. Il
linguaggio non impone che si metta il punto e virgola dopo l'ultima
dichiarazione, ma alcuni browser più datati lo richiedono: aggiungetelo
Com'è fatta una regola sempre per sicurezza e per una maggiore compatibilità.
Gli spazi bianchi lasciati all'interno di una regola non influiscono sul
background | border | border-top | border-right | border-bottom
risultato. Il consiglio, anzi, è di lasciare sempre uno spazio tra le varie | border-left | cue | font | list-style | margin | outline |
parti per una migliore leggibilità. padding | pause |

Commenti
Per inserire parti di commento in un CSS racchiudetelo tra questi I selettori
segni:
La parte preponderante della specifica CSS2 è dedicata all'analisi delle
/* come segno di apertura
diverse proprietà in grado di definire l'aspetto visuale di elementi e
*/ come segno di chiusura sezioni di una pagina. Prima di tutto, però, è fondamentale capire
come e a cosa queste proprietà possono essere assegnate.
L'argomento sarà l'oggetto delle prossime quattro lezioni.
Proprietà singole e a sintassi abbreviata Fondamentalmente una regola CSS viene applicata ad un selettore.
Nelle definizione delle regole è posssibile fare uso di proprietà La parola parla da sé: si tratta di una semplice dichiarazione che serve
singole e proprietà a sintassi abbreviata. Con questa espressione a selezionare la parte o le parti di un documento soggette ad una
traduciamo il termine inglese shorthand properties reso spesso, alla specifica regola. Quella che segue è una lista commentata dei vari tipi
lettera, con il termine scorciatoie. di selettore. Per verificare i concetti abbiamo preparato per ciascun
tipo un documento di esempio con codice e ulteriori spiegazioni.
Le proprietà singole sono la maggior parte: impostano per un dato
elemento o selettore un singolo aspetto. Con le shorthand
properties, è possibile invece definire con una sola dichiarazione un
insieme di proprietà. Chiariamo con un esempio. Selettore di elementi (type selector)
Ogni elemento presenta sui suoi quattro lati un certo margine rispetto È il più semplice dei selettori. È costituito da uno qualunque degli
a quelli adiacenti. È possibile definire per ciascuno di essi un valore elementi di (X)HTML.
usando quattro proprietà singole separate:
Sintassi
margin-top h1 {color: #000000;}
margin-right p {background: white; font: 12px Verdana, arial, sans-serif;}
margin-bottom table {width: 200px;}
margin-left
La regola sarebbe questa:
Raggruppare
div { margin-top: 10px; margin-right: 5px; margin-bottom:
10px; margin-left: 5px; } È possibile nei CSS raggruppare diversi elementi al fine di semplificare
Lo stesso risultato si può ottenere usando la proprietà a sintassi il codice. Gli elementi raggruppati vanno separati da una virgola.
abbreviata margin: Il raggruppamento è un'operazione molto conveniente. Pensate a
div {margin: 10px 5px 10px 5px;} questo scenario:
Approfondiremo nel corso dell'analisi delle proprietà usi e costrutti h1 {background: white;}
sintattici di ciascuna. Per il momento ci limitiamo all'elenco: h2 {background: white;}
h3 {background: white;}
Selettore del figlio (child selector)
Tutti e tre gli elementi hanno uno sfondo bianco. Invece di scrivere tre
regole separate si può fare così: Seleziona un elemento che sia figlio diretto di un altro.

h1, h2, h3 {background: white;} Il child selector è solo in apparenza simile al descendant selector. La
differenza sta nella relazione di discendenza tra gli elementi, che in
questo caso deve essere di primo livello. Chiariamo con un esempio
Selettore universale (universal selector) utile anche per comprendere meglio il significato di descendant
selector:
Anche nei CSS abbiamo un jolly. Il selettore universale serve a
<body> <p>Primo paragrafo</p>
selezionare tutti gli elementi di un documento. Si esprime con il
<div> <p>Secondo paragrafo</p> </div>
carattere * (asterisco).
<p>Terzo paragrafo</p> </body>
Sintassi
Dei tre paragrafi solo il primo e il terzo sono figli diretti di body. Il
* { color: black; }
secondo è invece figlio diretto di un elemento div. Tutti e tre, però,
sono discendenti di body. L'immagine chiarisce ulteriormente il
concetto. tra body e il primo e il terzo paragrafo si scende di un livello.
Selettore del discendente (descendant
Rispetto al secondo di due livelli:
selector)
Nella specifica CSS1 questo tipo era definito "selettore contestuale".
Serve a selezionare tutti gli elementi che nella struttura ad albero di
un documento siano discendenti di un altro elemento specificato nella
regola. Ricordiamo che un elemento è discendente di un altro se è
contenuto al suo interno, a qualsiasi livello.

Sintassi
div p {color: black;}
p strong {color: red;}

Alcune considerazioni importanti di cui tenere conto. Il selettore va

letto per chiarezza da destra a sinistra. Nel primo esempio verranno
selezionati tutti i paragrafi (<p>) discendenti di elementi <div>. Nel
secondo tutti gli elementi <strong> che si trovino all'interno di un Sintassi
paragrafo.
body > p {color: black;}
Fate attenzione alla struttura del documento ed evitate possibili Come si vede, un'ulteriore differenza sta nella sintassi. Per il child
incongruenze. Esistono regole ben precise sull'annidamento degli selector i due elementi devono essere separati dall'operatore
elementi che vanno rispettate sia in (X)HTML che nei CSS. Un "maggiore di" >. Anche in questo caso la lettura logica va fatta da
paragrafo, per esempio, non può contenere un div, così come un destra a sinistra. Nell'esempio si selezionano tutti i paragrafi figli diretti
elemento inline non può contenere elementi blocco. dell'elemento body.
Questo selettore non è supportato da Explorer su Windows, cosa che impostato un attributo href, a prescindere dal valore ad esso
ne limita notevolmente l'utilizzo. assegnato.

Selettore dell'elemento adiacente (adjacent- Attributo con valore

sibling selector) elemento [ attributo = "valore" ]

Seleziona gli elementi che abbiano come valore dell'attributo la stringa

Un altro tipo di selettore introdotto con CSS2 è l'adjacent-sibling definita nella regola. Pertanto:
selector. Seleziona gli elementi che nel codice del documento siano
a [ href = "[Link] ] { backgorund: red; }
immediatamente vicini (adiacenti) ad un altro.
applicherà un sfondo rosso a tutti gli elementi a che abbiano come
Sintassi
valore dell'attributo href "[Link] Come si vede una
Anche qui partiamo da un esempio: sintassi più restrittiva rispetto alla prima.
<h1>Titolo</h1> <p>Primo paragrafo</p> <p>Secondo paragrafo</p> Attributo il cui valore contiene una stringa
Il primo paragrafo è adiacente al titolo h1, il secondo no e pertanto ad elemento [ attributo t= "valore" ]
esso non potrà applicarsi questa regola:
In questo caso vengono selezionati tutti gli elementi in cui il valore
h1 + p {color: red;} dell'attributo dichiarato contenga la stringa definita nella regola.
In base a questa dichiarazione solo il primo dei due paragrafi avrà il img [ alt t= "foto" ] {margin: 10px;}
testo rosso.
La regola applicherà un margine di 10px a tutte le immagini in cui
Il segno di assegnazione della relazione è per questo selettore +. l'attributo alt contiene "foto". Quindi, saranno selezionate sia questa
L'adjacent-sibling selector non è supportato da Explorer Windows. immagine:

Selettore dell'attributo (attribute selector) <img src="[Link]" alt="Foto del Colosseo" />

sia questa:
Seleziona gli elementi in base ai loro attributi e/o al valore di tali
<img src="[Link]" alt="Una bella foto del Duomo di Milano"
attributi. Il supporto di questo selettore non è diffuso. Il suo uso è
/>
però ricco di implicazioni positive consentendo una grande flessibilità
nella selezione. L'utilità sarà ancora maggiore in linguaggi come XML. Attributo il cui valore inizia con una stringa
elemento [ attributo |= "valore" ]
Sintassi
Seleziona gli elementi in cui il valore dell'attributo dichiarato inizia con
Quattro sono i modi d'uso possibili.
la stringa definita nella regola. Esempio:
Attributo semplice
img [ alt |= "figura" ] {margin: 10px;}
elemento [ attributo ]
selezionerà tutte le immagini in cui l'attributo alt inizia con la stringa
Con questa sintassi si selezionano tutti gli elementi che presentino nel "figura".
codice un determinato attributo.

La dichiarazione:
a [ href ] {background: red;}

applicherà uno sfondo rosso a tutti gli elementi a per cui sia stato Id e classi: due selettori speciali
 Ma non questa:

I CSS non sarebbero uno strumento così potente senza questi tipi di <p id="testorosso">....</p>
selettori. Classi e ID sono davvero una delle chiavi per sfruttare al <div id="testorosso">...</div>
meglio questo linguaggio. Concludendo: una classe consente di superare le limitazioni intrinseche
Partiamo dall'inizio. In (X)HTML esistono due attributi fondamentali nell'uso di un selettore di elementi. Se imposto questa regola:
applicabili a tutti gli elementi: sono class e id. Dichiarare questi p {color: red;}
attributi a prescindere dai CSS non ha alcun senso e non modifica in
tutti i paragrafi della mia pagina avranno il testo rosso. E se volessi
alcun modo la presentazione della pagina. Ecco un esempio. Nel
diversificare? Avere, ad esempio, anche paragrafi con il testo nero?
seguente codice (X)HTML abbiamo assegnato al paragrafo un attributo
Sarei prigioniero della regola iniziale. Scrivo due classi, una per il rosso
class="testorosso":
e una per il nero, le applico di volta in volta secondo le mie necessità e
<p class="testorosso">....</p> il gioco è fatto.
Il valore dell'attributo class deve trovare una corrispondenza in un La strategia dovrà dunque essere questa. Se uno stile va applicato ad
foglio di stile per avere l’effetto desiderato. Per esempio in un CSS un solo specifico elemento usate un ID. Se invece prevedete di usarlo
contenente la seguente regola più volte ovvero su più elementi definite nel CSS una classe.
.testorosso { font: 12px arial, Helvetica, sans-serif; color:
Chiariti i concetti di base, passiamo ad analizzare usi e sintassi.
#FF0000; }

Il testo del nostro paragrafo sarà ora formattato secondo i nostri

Classe
desideri: testo rosso, carattere arial, dimensione di 12px.

Lo stesso meccanismo è valido per i selettori di tipo ID. Ma con una Per definire una classe si usa far precedere il nome da un semplice
sola fondamentale differenza: è ad essa che dovete fare riferimento punto:
per scegliere se usare una classe o un ID. In un documento (X)HTML .nome_della_classe
l'attributo id è usato per identificare in modo univoco un elemento. Questa è la sintassi di base. Un selettore classe così definito può
In pratica, se assegno ad un paragrafo l'id "testorosso", non potrò più essere applicato a tutti gli elementi di un documento (X)HTML.
usare questo valore nel resto della pagina. Di conseguenza, l'ID
#testorosso dichiarato nel CSS trasformerà solo quel paragrafo Esiste un secondo tipo di sintassi:
specifico. Una singola classe, al contrario, può essere assegnata a più <elemento>.nome_della_classe
elementi, anche dello stesso tipo. Esso è più restrittivo rispetto alla sintassi generica. Se infatti definiamo
In un documento potrò avere senza problemi questa situazione: questa regola:
<p class="testorosso">....</p> [Link] {color: red;}

<div class="testorosso">....</div> lo stile verrà applicato solo ai paragrafi che presentino l'attributo
<table class="testorosso">...</table> class="testorosso". Anche qui è importante stabilire un minimo di
<p class="testorosso">....</p> strategia. Il secondo tipo di sintassi va usato solo se pensate di
applicare una classe ad uno specifico tipo di elemento (solo paragrafi o
La classe .testorosso presente nel CSS formatterà allo stesso modo il
solo div, e così via). Se invece ritenete di doverla applicare a tipi
testo dei paragrafo, del div e della tabella.
diversi usate la sintassi generica.
Una terza possibile modalità è quella che prevede la dichiarazione di Iniziamo la rassegna delle proprietà di CSS2 analizzando una di quelle
classi multiple: che può a buon diritto dirsi fondamentale. Esamineremo prima le
[Link] {color:red; font-weight:bold;} diverse possibilità di definire i valori dei vari colori, per poi analizzare
usi e sintassi della proprietà color.
Questa regola applicherà gli stili impostati a tutti gli elementi in cui
siano presenti (in qualunque ordine) i nomi delle classi definiti nel Definizione del colore
selettore. Avranno dunque il testo rosso e in grassetto questi
paragrafi: Parole chiave
<p class="grassetto testorosso maiuscolo">..</p> <p
Si tratta di 16 parole che definiscono i colori della palette VGA
class="testorosso grassetto">...</p>
standard di Windows:
ma non questo, perchè solo uno dei nomi è presente come valore di
black | navy | blue | maroon | purple | green | red | teal |
class: fuchsia | olive | gray | lime | aqua | silver | yellow | white
<p class="grassetto">...</p>

#RRGGBB
ID
Le semplici 16 parole chiave non esauriscono ovviamente la gamma
La sintassi di un selettore ID è semplicissima. Basta far precedere il dei colori visualizzabili su un monitor moderno. Già in HTML era
nome dal simbolo di cancelletto #: possibile impostare il colore di un elemento servendosi di codici
#nome_id esadecimali. In essi, le prime due lettere (o numeri) corrispondono ai
valori per il colore rosso (RED), la seconda coppia fa riferimento al
Con questa regola:
verde (GREEN), l'ultima al blue (BLUE).
#titolo {color: blue;}

assegniamo il colore blue all'elemento che presenti questa definizione:

Esempio
<h1 id="titolo">...</h1>
#CC0000
Come per le classi è possibile usare una sintassi con elemento:
Il codice sopra rappresenta una tonalità di rosso.
p#nome_id

In realtà questa modalità è assolutamente superflua. Se l'id è univoco #RGB

non abbiamo alcun bisogno di distinguere l'elemento cui verrà
Molti dei codici esadecimali sono rappresentati da valori duplicati. E'
applicata. Inoltre: la sintassi generica si rivela più razionale e utile. Se
possibile usare per essi una sintassi abbreviata in cui i valori per il
si dichiara un ID semplice è possibile assegnarlo a qualunque tipo di
rosso, il verde e il blue sono definiti solo dalla prima lettera o numero.
elemento. Posso usarlo su un paragrafo, ma se poi cambio idea posso
Il colore dell'esempio precedente può essere definito anche così:
passare tranquillamente ad un div senza dover modificare il foglio di
stile. Usando la seconda sintassi, invece, sono costretto a rispettare #C00

l'elemento definito nel selettore. Nell'uso di questa sintassi vanno valutati i risultati con colori che non
presentino coppie di valori duplicati. Il risultato può essere
leggermente diverso a livello di tonalità a seconda dei casi.
Gestione del colore
rgb(rrr%, ggg%, bbb%)
Un altro modo per rappresentare i colori è quello di usare per i tre che se si imposta il colore per un elemento esso sarà ereditato da tutti
elementi base del sistema RGB una lista di valori in percentuale gli elementi discendenti per cui non si definisca esplicitamente un altro
separati da una virgola. Per indicare il nero useremo, ad esempio: colore. La sintassi è semplice:
rgb(0%, 0%, 0%) selettore { color: <valore> }

Per il bianco:
rgb(100%, 100%, 100%) Valori
rgb(rrr, ggg, bbb) I valori possibili sono:

Ultima possibilità. Si definiscono i valori di rosso, verde e blue con tre qualunque valore di un colore definito con i metodi visti sopra
valori compresi, rispettivamente, tra 0 e 255. Sistema ben noto a chi la parola chiave inherit. Con essa si dice esplicitamente al browser di
usa programmi di grafica. Il range 0-255 è l'equivalente decimale di ereditare le impostazioni definite per l'elemento padre. E' stata
quello esadecimale 00-FF visto in precdenza. Anche qui, i tre valori introdotta con CSS2 e da qui in avanti sarà citata nella guida senza
vanno separati da una virgola. Questo è il codice del nero: ulteriori spiegazioni.
rgb(0, 0, 0,)
Esempi
p {color: black; background-color: white; }
La proprietà color
Visti i sistemi per rappresentare i colori, dobbiamo ora chiarire un Gestione dello sfondo
aspetto importante. Per ogni elemento si possono definire almeno tre
colori: Esamineremo in questa lezione le proprietà relative alla gestione dello
il colore di primo piano (foreground color) sfondo. Sin dalle origini di HTML è stato possibile definire un colore o
il colore di sfondo (background color) un'immagine di sfondo per le nostre pagine web. La scelta si restringe
comunque a due elementi: il corpo principale della pagina (<BODY>)
il colore del bordo (border color)
o le tabelle. Un'altra limitazione riguarda il comportamento delle
La proprietà color definisce esclusivamente: immagini di sfondo: esse vengono infatti ripetute in senso orizzontale
il colore di primo piano, ovvero quello del testo. e verticale fino a riempire l'intera area della finestra, del frame o della
il colore del bordo di un elemento quando non si imposti tabella. Proprio questo comportamento ha fatto sempre propendere
esplicitamente quest'ultimo con le proprietà border o border-color. per la scelta di piccole textures in grado di dare la sensazione visiva
dell'uniformità. Grazie ai CSS queste limitazioni vengono spazzate via
Per gli altri due casi esistono proprietà ad hoc che esamineremo nelle
e le possibilità creative, compatibilità permettendo, sono davvero
prossime lezioni. Una buona norma dei CSS vuole comunque che per
infinite.
un elemento di cui si sia definito il colore di primo piano si definisca
anche e sempre un colore di sfondo. Ecco la lista delle proprietà, applicabili, ed è questa la prima grande
innovazione dei CSS, a tutti gli elementi:

Sintassi
background-color
La proprietà color si applica a tutti gli elementi ed è ereditata. Significa
background-image
background-repeat
background-attachment Valori
background-position
un URL assoluto o relativo che punti ad un'immagine
la parola chiave none. Valore di default.
Ciascuna di essa definisce un solo, particolare aspetto relativo allo Usare none equivale a non impostare la proprietà: nessuna immagine
sfondo di un elemento. La proprietà background, invece, è una verrà applicata come sfondo.
proprietà a sintassi abbreviata con cui possiamo definire
sinteticamente e con una sola dichiarazione tutti i valori per lo sfondo. Esempi
La analizeremo alla fine. Prima è necessario chiarire significato e body {background-image: url([Link]); }
sintassi delle proprietà singole. div {background-image:
url([Link] }

Usando questa proprietà da sola si ottiene lo stesso risultato che in

background-color HTML si aveva con l'attributo background.

Definisce il colore di sfondo di un elemento. Questa proprietà non è Piccolo consiglio. Una buona norma e il buon senso vogliono che
ereditata. quando si definisce un'immagine come sfondo si usi sempre anche un
colore di sfondo e che questo colore consenta una lettura agevole del
Sintassi
testo. Se le immagini sono disabilitate, ad esempio, il browser
selettore {background-color: <valore>;} mostrerebbe il suo colore di sfondo predefinito: se questo è bianco e il
Valori nostro testo pure sarebbe evidentemente un disastro. Attenzione,
dunque!
un qualunque colore
la parola chiave transparent background-repeat
Usando transparent come valore un elemento avrà come colore
Con questa proprietà iniziano le novità. Essa consente di definire la
quello dell'elemento padre.
direzione in cui l'immagine di sfondo viene ripetuta. Proprietà non
Esempi ereditata.
body { background-color: white; } Sintassi
p { background-color: #FFFFFF; } selettore {background-repeat: <valore>;}
.classe1 { background-color: rgb(0, 0, 0); }
Valori

repeat. L'immagine viene ripetuta in orizzontale e verticale. E' il

comportamento standard.
background-image repeat-x. L'immagine viene ripetuta solo in orizzontale.
Definisce l'URL di un'immagine da usare come sfondo di un elemento. repeat-y. L'immagine viene ripetuta solo in verticale.
Questa proprietà non è ereditata. no-repeat. L'immagine non viene ripetuta.
Sintassi
selettore { background-image: url(<valore>); } Esempi
body { background-image: url([Link]); Valori
background-repeat: repeat; }
I valori possibili sono diversi. Tutti però definiscono le coordinate di un
div { background-image: url([Link]); punto sull'asse verticale e su quello orizzontale. Ciò può avvenire nei
background-repeat: repeat-x; } seguenti modi:
con valori in percentuale
background-attachment con valori espressi con unità di misura
con le parole chiave top, left, bottom, right
Con questa proprietà si imposta il comportamento dell'immagine di
sfondo rispetto all'elemento cui è applicata e all'intera finestra del Esempio:
browser. Si decide, in pratica, se essa deve scorrere insieme al body { background-image: url(back_400.gif);
contenuto o se deve invece rimanere fissa. Proprietà non ereditata. background-repeat: no-repeat;

Sintassi background-position: 50px 50px; }

selettore {background-attachment: <valore>;} Significa che l'immagine apparirà a 50px dal bordo superiore e a 50px
da quello sinistro della finestra. Potevo usare invece dei pixel altre
Valori
unità di misura o percentuali. Come al solito, la scelta delle percentuali
scroll. L'immagine scorre con il resto del documento quando si fa lo mi assicura una maggiore affiidabilità a risoluzioni diverse. Allo stesso
scrolling della pagina. modo potevo utilizzare le parole chiave. Se, ad esempio, uso:
fixed. L'immagine rimane fissa mentre il documento scorre. body { background-image: url(back_400.gif);
Questa proprietà consente risultati estetici di grande impatto ed è background-repeat: no-repeat;
consigliabile, per ottenerne il meglio, usarla sia in combinazione con le
background-position: center center; }
altre proprietà sia con immagini grandi.
l'immagine di sfondo apparirà centrata in entrambe le direzioni.
Esempi
Logica vuole, trattandosi di definire le coordinate che si impostino due
body { background-image: url(back_400.gif);
valori. Definendone uno solo esso sarà usato sia per l'asse orizzontale
background-repeat: repeat-x; che per quello verticale.
background-attachment: fixed; }
background
E veniamo alla proprietà background. Con essa, ricordiamolo,
background-position possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per
essere valida, la dichiarazione non deve contenere necessariamente
Proprietà un po’ complessa. Definisce il punto in cui verrà piazzata
riferimenti a tutte le proprietà viste finora, ma deve contenere almeno
un'immagine di sfondo non ripetuta o da dove inizierà la ripetizione di
la definizione del colore di sfondo.
una ripetuta. Si applica solo agli elementi blocco o rimpiazzati.
Attenzione alla compatibilità e alla resa, non omogeena, tra i vari Sintassi
browser. Proprietà non ereditata. selettore {background: background-color background-image
Sintassi background-repeat background-attachment background-position;}

selettore {background-position: <valore> o <valori>;} I valori non vanno separati da virgole. L'ordine non è importante, ma
quello dato è il più logico e andrebbe rispetatto: si va in ordine di
importanza. mancanza anche di questo verrà utilizzato il font principale della
famiglia sans-serif presente sul sistema. La spiegazione di tutto ciò è
Esempi
semplice: ovviare al problema dei diversi font presenti sulle
body { background: white url([Link]) repeat-x fixed; } piattaforme software.

Dunque: quando si imposta la proprietà font-family si possono usare

tutti i font che si vuole, ma non dimenticate mai di inserire alla fine
Gestione del testo: proprietà di base l'indicazione di una famiglia generica. Esse sono cinque (tra parentesi
riportiamo i caratteri predefiniti su ciascuna sui sistemi Windows):
Se c'è un aspetto essenziale dei CSS questo è il nuovo approccio che serif (Times New Roman)
hanno introdotto per la gestione del testo. Prima c'era il tag <font>:
sans-serif (arial)
pagine pesanti e difficili da gestire. Oggi qualcosa che può trasformare
una pagina web in un perfetto esempio di stile tipografico e che cursive (Comic Sans)
finalmente consente, almeno in parte, la potenza e la flessibilità di un fantasy (Allegro BT)
word-processor. monospace (Courier)
La proprietà che definiscono il modo in cui il testo appare sullo I nomi dei font della lista vanno separati dalla virgola. I caratteri con
schermo sono tante e abbiamo deciso di suddividere l'argomento in nomi composti da più parole vanno inseriti tra virgolette. Se usate
due lezioni. Iniziamo quindi dalle proprietà di base. Sono quelle che famiglie strane e poco comuni come fantasy o cursive usate più di una
definiscono i seguenti aspetti: famiglia generica. Questa andrebbe sempre messa alla fine, altrimenti
risulta praticamente inutile la definizione di font specifici.
il font da usare
Sintassi
la sua dimensione
la sua consistenza selettore {font-family: <font 1>, <font2>, ....,<famiglia
generica>;}
l'interlinea tra i paragrafi
Esempi
l'allineamento del testo
la sua decorazione (sottolineature e simili) div {font-family: Georgia, "Times New Roman", serif;}

font-family font-size
La proprietà font-family serve a impostare il tipo di carattere di una Insieme a font-family è la proprietà considerata essenziale nella
qualunque porzione di testo. Si applica a tutti gli elementi ed è definizione dell'aspetto del testo, di cui definisce le dimensioni.
ereditata. Applicabile a tutti gli elementi ed ereditata.
Gli uomini del W3C hanno creato un meccanismo che consente Sintassi
all'autore di impostare nei CSS non un font singolo e unico, ma un
selettore { font-size: <valore>; }
elenco di caratteri alternativi. Il meccanismo funziona così:
p {font-family: arial, Verdana, sans-serif;}

Quando la pagina verrà caricata, il browser tenterà di usare il primo Valori

font della lista. Se questo non è disponibile userà il secondo. In I valori delle dimensioni del testo possono essere espressi in vari modi.
Per un approfondimento sull'uso dei diversi metodi e sulle implicazioni Valori
in termini di accessibilità e compatibilità cross-browser si consiglia la
Il "peso" visivo di un carattere può essere espresso con una scala
lettura dell'articolo "Stabilire le dimensioni dei font con i CSS:
numerica o con parole chiave:
vantaggi, problemi e soluzioni".
valori numerici 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900
I diversi sistemi si possono distinguere a seconda che definiscano le
ordinati in senso crescente (dal leggero al pesante)
dimensioni in senso assoluto o relativo. Dimensione assoluta significa
normal. Valore di default. E' l'aspetto normale del font ed equivale al
che essa non dipende da nessun altro elemento ed è quella definita
valore 400
dall'unità di misura usata. Dimensione relativa significa che essa viene
calcolata in base alla dimensione del testo dell'elemento parente. bold. Il carattere acquista l'aspetto che definiamo in genere grassetto.
Equivale a 700
Sono valori assoluti:
bolder. Misura relativa. Serve a specificare che una determinata
le sette parole chiave xx-small, x-small, small, medium, large, x- porzione di testo dovrà apparire più pesante rispetto al testo
large, xx-large dell'elemento parente
quelli espressi con le seguenti unità di misura: pixel (px), centimetri lighter. Misura relativa. Il testo sarà più leggero di quello
(cm), millimetri (mm), punti (pt), picas (pc), pollici (in), x- dell'elemento parente
height(ex). Di tutte queste unità le uniche proponibili per il testo sono
punti e pixel. Si consiglia di usare la prima solo per CSS destinati alla
stampa. Esempi

Sono valori relativi: p {font-weight: 900;}

div {font-weight: bold;}
le parole chiave smaller e larger
quelli espressi in em (em-height)
quelli espressi in percentuale
font-style
Esempi Imposta le caratteristiche del testo in base ad uno di questi tre valori:

p {font-size: 12px;} normal: il testo mantiene il suo aspetto normale

div {font-size: 50%;} italic: formatta il testo in corsivo
#div1 {font-size: large;} oblique: praticamente simile a italic
h2 {font-size: 1.2em;}

La proprietà si applica a tutti gli elementi ed è ereditata.

Sintassi
font-weight
selettore {font-style: <valore>;}
Serve a definire la consistenza o "peso" visivo del testo. Si applica a
Esempi
tutti gli elementi ed è ereditata.
p {font-style: italic;}
Sintassi
selettore {font-weight: <valore>;}
Line-height
Grazie a line-height è possibile finalmente usare nelle nostre pagine un line-height
sistema di interlinea degno di questo nome. La proprietà, in realtà, font-weight
serve a definire l'altezza di una riga di testo all'interno di un elemento font-style
blocco. Ma l'effetto ottenuto è appunto quello tanto agognato da tutti i
font-variant
web designer: un modo per impostare uno spazio tra le righe. La
proprietà si applica a tutti gli elementi ed è ereditata.
Sintassi
Sintassi
selettore {font: <valori>;}
selettore {line-height: <valore>;}
Alcune indicazioni sull'uso. I valori relativi alle singole proprietà non
vanno separati da virgole. Virgola che deve invece separare i valori
Valori definiti per la font-family. Anche in questo caso i nomi dei font
costituiti da più parole vanno racchiusi tra virgolette. Per quanto
normal. Il browser separerà le righe con uno spazio ritenuto
riguarda l'ordine, la dichiarazione dovrebbe sempre finire con la coppia
"ragionevole". Dovrebbe corrispondere a un valore numerico compreso
font-size > font-family.
tra 1 e 1.2
valore numerico. Usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene Il valore della proprietà line-height si imposta invece così, facendo
questo risultato: l'altezza della riga sarà uguale alla dimensione del seguire il suo valore a quello di font-size e separando i due con una
font moltiplicata per questo valore. slash:
un valore numerico con unità di misura. L'altezza della riga sarà font-size/line-height
uguale alla dimensione specificata. Esempi
percentuale. L'altezza della riga viene calcolata come una p {font: bold 12px/1.5 Georgia, "Times New Roman", serif;}
percentuale della dimensione del font.
Nell'ordine abbiamo definito: font-weight, dimensione/ interlinea, font-
Il consiglio è di non usare mai la percentuale, di valutare attentamente
family.
l'utilizzo di unità esplicite e di affidarsi senza problemi al valore
numerico.

Esempi
Il box model
p {line-height: 1.5;}
body {line-height: 15px;}
Se volete usare i CSS per scopi che vadano oltre la semplice gestione
di sfondo e testo dovete avere ben chiaro il meccanismo che governa
la presentazione dei vari elementi di una pagina. Torniamo per un
font attimo alla prima lezione. Abbiamo lì mostrato che una pagina
(X)HTML non è altro che un insieme di box rettangolari, che si tratti di
La proprietà font può essere paragonata a background. Si tratta di
elementi blocco o di elementi inline non fa differenza. Tutto l'insieme
una proprietà a sintassi abbreviata che serve a impostare con una sola
di regole che gestisce l'aspetto visuale degli elementi blocco viene in
dichiarazione tutte le principali caratteristiche del testo. Le proprietà
genere riferito al cosiddetto box model.
definibili in forma abbreviata con font sono:
Ogni box comprende un certo numero di componenti di base, ciascuno
font-family
modificabile con proprietà dei CSS. La figura qui sotto mostra
font-size
visivamente tali componenti: paragrafo o tra due paragrafi. La novità è che con i CSS possiamo
controllare con precisione al pixel tutti questi aspetti.

Il box model è governato da una serie di regole di base concernenti la

definizione di un box e il suo rapporto con gli altri elementi.
1. Larghezza del box
Bisogna distinguere tra la larghezza dell'area del contenuto e la
larghezza effettiva di un box . La prima è data dal valore della
proprietà width. La seconda è data da questa somma:
margine sinistro + bordo sinistro + padding sinistro + area del
contenuto + padding destro + bordo destro + margine destro

Come si vede infatti nella figura margini, padding e bordi devono

considerarsi a tutti gli effetti parte dell'area complessiva dell'elemento.

Partendo dall'interno abbiamo:

l'area del contenuto. E' la zona in cui trova spazio il contenuto vero
e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali
dell'area possono essere modificate con la proprietà width. Quelle
verticali con height.
il padding. E' uno spazio vuoto che può essere creato tra l'area del
contenuto e il bordo dell'elemento. Come si vede dalla figura, se si 2. Larghezza ed elemento contenitore
imposta un colore di sfondo per un elemento questo si estende Se non si imposta alcun valore per la proprietà width o se il valore
dall'area del contenuto alla zona di padding. usato è auto la larghezza di un box è uguale a quella dell'area del
il bordo. E' una linea di dimensione, stile e colore variabile che contenuto dell'elemento contenitore. Quest'ultimo è l'elemento che
circonda la zona del padding e l'area del contenuto. racchiude il box
il margine. E' uno spazio di dimensioni variabili che separa un dato 3. Uso del valore auto
elemento da quelli adiacenti.
Solo per tre proprietà è possibile impostare il valore auto: margini,
Attenzione. Queste cose non sono state introdotte con i CSS, ma fanno
altezza e larghezza (width). L'effetto è quello di lasciar calcolare al
parte del normale meccanismo di rendering di un documento. Quando
browser l'ammontare di ciascuna di esse in base alla risoluzione dello
realizziamo una pagina (X)HTML senza fogli di stile è il browser ad
schermo e alle dimensioni della finestra.
applicare per alcune di queste proprietà le sue impostazioni
predefinite. Per esempio, introdurrà un certo margine tra un titolo e un Solo i margini possono avere valori negativi. Ciò non è consentito per
padding, bordi, altezza e larghezza. un valore in percentuale. Il valore in percentuale si riferisce sempre
all'altezza del blocco contenitore, purché esso abbia un'altezza
4. Margini verticali e orizzontali tra gli elementi
esplicitamente dichiarata. Diversamente, la percentuale viene
Per due box adiacenti in senso verticale che abbiano impostato un interpretata come auto.
margine inferiore e uno superiore la distanza non sarà data dalla auto. L'altezza sarà quella determinata dal contenuto.
somma delle due distanze. A prevalere sarà invece la distanza
maggiore tra le due. E' il meccansimo del cosiddetto margin
collapsing. Tale meccanismo non si applica ai box adiacenti in senso L'uso di height va sempre valutato con attenzione e non pensando di
orizzontale. farne una scorciatoia per avere layout precisi al pixel. Il caso più
importante da valutare è quando il contenuto dovesse superare i limiti
imposti tramite la proprietà. Il comportamento dei vari browser è al
Gestione delle dimensioni: altezza riguardo notevolmente diverso. Ricordatelo: molte volte si può
ottenere lo stesso risultato visivo desiderato usando proprietà come
padding e margin. E considerate sempre che l'altezza è indirettamente
Con le prossime cinque lezioni vedremo come sia possibile definire e influenzata anche dalla larghezza di un elemento.
controllare le diverse proprietà del box-model. In questa vedremo in
Esempi
che modo nei CSS si impostino le dimensioni verticali di un elemento.
Un primo concetto fondamentale: in genere l'altezza di un div {height: 250px;}
elemento è determinata dal suo contenuto. Più testo inserisco in [Link] {height: 50%;}
box, in un paragrafo o in una cella di tabella più essi saranno estesi in
senso verticale. Semplice. Le proprietà che analizzeremo servono in
pratica a fornire un meccanismo in grado di controllare o superare in min-height
qualche modo questo comportamento standard.
Imposta un'altezza minima per un elemento. Valgono per questa
height proprietà le stesse osservazioni fatte per height relativamente al
contenuto. Non è ereditata e non è supportata da Explorer Win.
Questa proprietà definisce la distanza tra il bordo superiore e quello
inferiore di un elemento. Non è ereditata e si applica a tutti gli Sintassi
elementi tranne: selettore {min-height: <valore>;}
colonne di tabelle Valori
elementi inline non rimpiazzati
un valore numerico con unità di misura.
un valore in percentuale
Sintassi
selettore {height: <valore>;}
Esempi
div {min-height: 200px;}

Valori
max-height
un valore numerico con unità di misura.
La proprietà max-height serve a impostare l'altezza massima di un quando il valore di tali proprietà sia uguale a 0.
elemento. Anche per essa valgono le osservazioni già fatte per il
E qui introduciamo una questione di rilevanza assoluta per il semplice
contenuto eccedente. Non è ereditata.
fatto che coinvolge il browser attualmente più usato. Explorer per
Sintassi Windows fino alla versione 5.5 interpreta male il concetto di width.
selettore {max-height: <valore>;} Nel senso che con questa proprietà intende la larghezza globale
dell'elemento, compresi margini, padding e bordi. Proprio l'errore che
prima abbiamo definito macroscopico! Fatta questa fondamentale
Valori premessa, possiamo analizzare nei dettagli la proprietà.

none. Valore iniziale. L'altezza dell'elemento non è limitata. Sintassi

un valore numerico con unità di misura. selettore {width: <valore>;}
un valore in percentuale Valori

auto. Valore di default. Se non si impostano margini, bordi e padding

Esempi la larghezza dell'elemento sarà uguale all'area del contenuto
div {max-height: 400px;} dell'elemento contenitore.
un valore numerico con unità di misura.

Gestione delle dimensioni: larghezza un valore in percentuale. La larghezza sarà calcolata rispetto a
quella dell'elemento contenitore.

La definizione della larghezza e più in generale la formattazione La proprietà width non è ereditata.
orizzontale degli elementi sono più problematiche rispetto all'altezza e Esempi
alla formattazione verticale. A questo punto è utile richiamare alla
p {width: 90px;}
mente i concetti visti per il box model e ribadire a cosa si riferiscono le
[Link] {width: 50%;}
proprietà che stiamo per esaminare.

width
min-width
Le dimensioni orizzontali di un elemento sono date dalla combinazione
di varie proprietà. Un errore macroscopico è ritenere che esse siano Imposta la larghezza minima di un elemento. Si applica a tutti gli
definite semplicemente dalla proprietà width. In pratica, dovete elementi tranne che a quelli in linea non rimpiazzati e agli elementi di
sempre distinguere tra la larghezza effettiva di un elemento (i pixel di tabelle. Proprietà non supportata da Internet Explorer e non ereditata.
spazio che occupa sulla pagina) e la larghezza dell'area del contenuto. Sintassi
La prima è data dalla somma di questi valori:
selettore { min-width: <valore>; }
margine sinistro + bordo sinistro + padding sinistro + area del
contenuto + padding destro + bordo destro + margine destro
Valori
La seconda è impostata tramite la proprietà width (si vedano gli
esempi già visti per il box model). un valore numerico con unità di misura.
E' possibile ovviamente che i due valori coincidano. Accade quando di un valore in percentuale. La larghezza sarà come minimo quella
un particolare elemento non si impostino margini, padding e bordi; o espressa dalla percentuale riferita alla larghezza dell'elemento
contenitore. Definisce la distanza tra il lato inferiore di un elemento e gli elementi
adiacenti. Si applica a tutti gli elementi e non è ereditata.

Esempi Valori
div { min-width: 400px; } un valore numerico con unità di misura. Il valore è espresso in
termini assoluti.
un valore in percentuale. Il valore è calcolato come percentuale
max-width rispetto alla larghezza (width) del blocco contenitore.

Imposta la larghezza massima di un elemento. Non è ereditata. auto. E' quasi sempre corrispondente a 0.
Ricordiamo che se per un elemento si imposta un margine inferiore ed
Sintassi
esso si trova sopra ad un altro elemento che abbia impostato un
selettore { max-width: <valore>; } margine superiore, la distanza tra i due sarà quella maggiore e non
data dalla somma delle due proprietà (meccanismo del margin
collapsing).
Valori
Esempi
none. Valore di default. Non c'è un limite per larghezza dell'elemento.
p {margin-bottom: 10px;} [Link] {margin-bottom: 20%;}
un valore numerico con unità di misura.
un valore in percentuale
margin-left
I Margini Definisce la distanza tra il lato sinistro di un elemento e gli elementi
adiacenti. Si applica a tutti gli elementi e non è ereditata.
Una delle maggiori limitazioni di HTML è la mancanza di un Valori
meccanismo interno per spaziare gli elementi di un documento. Per
ottenere questo risultato si è ricorso negli anni ad una serie di un valore numerico con unità di misura.
trucchetti, magari efficaci, ma fuori dalla logica originaria del un valore in percentuale.
linguaggio. L'unica eccezione consisteva nella possibilità di definire una
distanza tra le celle di una tabella con l'attributo cellspacing. I CSS auto.
risolvono il problema con l'uso di una serie di proprietà in grado di
definire con precisione la distanza tra gli elementi. Possiamo infatti
definire il margine come la distanza tra il bordo di un elemento e gli Esempi
elementi adiacenti. Per ulteriori chiarimenti e per la relazione tra i h1 {margin-left: 10%;}
margini e gli altri elementi del box-model si veda la lezione "Il box
img {margin-left: 20px;}
model".
Sono cinque le proprietà con cui è possibile definire un margine.
Quattro di esse sono singole e impostano la distanza per ciascun lato
del box. L'ultima, margin, è una proprietà a sintassi abbreviata utile margin-top
per definire con una sola dichiarazione tutte le impostazioni per i
quattro lati. Definisce la distanza tra il lato superiore di un elemento e gli elementi
adiacenti. Si applica a tutti gli elementi e non è ereditata.
margin-bottom Valori
un valore numerico con unità di misura. regole che ne gestiscono il funzionamento.
un valore in percentuale. In prima istanza è ovvio usare per essa quattro valori, uno per ciascun
auto. lato:
div {margin: 10px 15px 10px 20px;}
Esempi L'ordine di lettura va inteso in senso orario. Per cui: il primo valore si
[Link] {margin-top: 10%;} riferisce al lato superiore, il secondo a quello destro, il terzo al lato
img {margin-top: 20px;}
inferiore, il quarto a quello sinistro. In pratica usare la sintassi vista
nell'esempio equivale a scrivere:
div { margin-top: 10px; margin-right: 15px; margin-bottom:
10px; margin-left: 20px; }
margin-right
Definisce la distanza tra il lato destro di un elemento e gli elementi
Nella definizione dei valori, inoltre, è possibile mischiare percentuali
adiacenti. Si applica a tutti gli elementi e non è ereditata.
con valori assoluti in unità di misura.
Valori
Un ulteriore abbreviazione della sintassi si può ottenere usando tre,
un valore numerico con unità di misura. due o un solo valore. Queste le regole:
un valore in percentuale. - se si usano tre valori, il primo si riferisce al margine superiore, il
auto. secondo a quelli sinistro e destro, il terzo a quello inferiore;
- se si usano due valori, il primo si riferisce ai lati superiore e inferiore,
Esempi il secondo al sinistro e al destro;
- se si usa un solo valore, un uguale distanza sarà ai quattro lati.
h1 {margin-right: 10%;}
img {margin-right: 20px;}
Esempi
p {margin: 20px 10px;}
margin div {margin: 20px;}

E' una proprietà a sintassi abbreviata. Con essa è possibile specificare i h1 {margin: 10px auto;}
valori per tutti e quattro i lati di un elemento. Si applica a tutti gli
elementi e non è ereditata.
Il Padding
Valori
un valore numerico con unità di misura. Un altro modo per creare spazio intorno ad un elemento è quello di
un valore in percentuale. usare il padding. Come per i margini, HTML incorpora un meccanismo
simile solo per le celle di tabella, tramite il cosiddetto cellpadding. Se
auto. Per la proprietà margin il valore auto significa che la distanza
avete presente il funzionamento di questo attributo, vi risulterà
sarà automaticamente calcolata rispetto alla larghezza dell'elemento
immediatamente chiara la differenza tra margini e padding. Quando si
contenitore.
usa il padding, lo spazio di distanza viene inserito al di qua dei bordi
Per usare al meglio questa proprietà è fondamentale conoscere le dell'elemento e non all'esterno. La cosa risulta evidente se usate un
colore di sfondo per l'elemento diverso da quello della pagina. Nel caso Valori
del padding, lo spazio inserito avrà proprio il colore di sfondo
un valore numerico con unità di misura.
dell'elemento, a differenza dei margini. Pertanto, valutate in base alle
un valore in percentuale.
vostre esigenze se usare la prima o la seconda via.

Un'analogia rispetto ai margini sta nella sintassi. Anche qui quattro

proprietà singole per i lati e una a sintassi abbreviata (padding). Esempi
h1 {padding-top: 10px;}

padding-bottom
padding-right
Imposta l'ampiezza del padding sul lato inferiore di un elemento. Si
applica a tutti gli elementi e non è ereditata. Imposta l'ampiezza del padding sul lato destro di un elemento. Si
applica a tutti gli elementi e non è ereditata.
Valori
Valori
un valore numerico con unità di misura. Il valore è espresso in
termini assoluti.
un valore in percentuale. Il valore è calcolato come percentuale un valore numerico con unità di misura.
rispetto alla larghezza (width) del blocco contenitore. un valore in percentuale.
Esempi
[Link] {padding-bottom: 10px;} Esempi
[Link] {padding-right: 10px;}

padding-left
Imposta l'ampiezza del padding sul lato sinistro di un elemento. Si padding
applica a tutti gli elementi e non è ereditata.
Proprietà a sintassi abbreviata. Serve a impostare i valori del padding
Valori
per tutti e quattro i lati di un elemento. Valgono per essa tutte le
un valore numerico con unità di misura. osservazioni e le regole sintattiche viste per margin.
un valore in percentuale.

Valori
Esempi
un elenco di valori numerici con unità di misura.
p {padding-left: 10%;}
un elenco di valori in percentuale.
padding-top Esempi
p {padding: 10px 20px;} div {padding: 10%;}
Imposta l'ampiezza del padding sul lato superiore di un elemento. Si
applica a tutti gli elementi e non è ereditata.
I Bordi
Dal punto di vista del linguaggio la definizione dei bordi può risultare I valori possibili per il colore sono:
un pò intricata per il numero di proprietà coinvolte, che se consentono un qualsiasi colore
all'autore la massima flessibilità, rendono complicata la gestione del
la parola chiave inherit
codice.

In linea di massima possiamo suddividere le proprietà in due

categorie: singole e a sintassi abbreviata. Le prime definiscono singoli Il colore può essere espresso in uno qualunque dei modi visti nella
aspetti di ciascuno dei quattro bordi. Le seconde consentono di riunire lezione " Il box model". Se non si imposta un valore specifico, il colore
in una sola regola le diverse impostazioni. sarà quello di primo piano impostato con la proprietà color.

Sono proprietà singole: Lo stile di un bordo può invece essere espresso con una delle seguenti
parole chiave
border-top-color, border-top-style, border-top-width, border-
bottom-color, border-bottom-style, border-bottom-width, border- none. L'elemento non presenta alcun bordo e lo spessore equivale a
right-color, border-right-style, border-right-width, border- hidden. Equivalente a none
left-color, border-left-style, border-left-width
dotted
Sono proprietà a sintassi abbreviata: dashed
border, border-bottom, border-top, border-right, border-left, solid
border-color, border-style, border-width
double.
groove
ridge
Definire lo stile di un singolo bordo inset
Sintassi (con proprietà singole) outset
selettore { border-<lato>-color: <valore>; border-<lato>-style:
<valore>; border-<lato>-width: <valore>; }
Infine abbiamo lo spessore. Esso può essere modificato secondo i
Sintassi (abbreviata) seguenti valori:
selettore { border-<lato>: <valore width> <valore style>
un valore numerico con unità di misura
<valore color>; }
thin. Bordo sottile.
In entrambi gli esempi di sintassi sostituite a <lato> uno degli
medium. Bordo di medio spessore.
indicatori dei quattro lati: top, right, bottom o left.
thick. Bordo di largo spessore.
Valori Nel caso delle parole chiave la dimensione esatta non è specificata dal
Come si vede dall'elenco delle proprietà di ciascun lato si possono linguaggio.
definire per il bordo tre aspetti:
il colore (color) Esempi
lo stile (style)
Div { border-left-color: black;
lo spessore (width)
border-left-style: solid;
 border-left-width: 1px; } colore>;}

Esempi

Molto più comodo scrivere così: div {border: 2px solid black;}

div {border-left: 1px solid black;}

Le Liste
Definire lo stile dei quattro bordi Grazie ai CSS possiamo definire in vari modi l'aspetto delle liste
Sintassi (X)HTML. In realtà tutte le proprietà che andremo ad esaminare si
riferiscono non ai canonici tag usati per inserire una lista ordinata
selettore { border-width: <valori>;
(<OL>) o non ordinata (<UL>), ma ai singoli elementi che le
border-style: <valori>; compongono, ovvero l'elemento <LI>. In effetti, è solo questo che
border-color: <valori>; } trova una rappresentazione effettiva sulla pagina, mentre OL e UL
sono semplici dichiarazioni del tipo di lista usato.
Usando questa sintassi e queste proprietà si imposta lo stile per tutti e Le proprietà dedicate alla formattazione delle liste sono quattro. tre
quattro i bordi del box. I valori possibili sono quelli visti prima a definiscono singoli aspetti, l'ultima, list-style, è una proprietà a
proposito del colore, dello stile e dello spessore. sintassi abbreviata.
Per ciascuna di queste proprietà è possibile definire da uno a quattro
valori, uno per lato. Se ne usiamo quattro l'ordine di lettura è questo:
top, right, bottom, left. Se invece ne impostiamo uno, due o tre list-style-image
valgono le stesse regole viste per i margini nella lezione "Gestione
delle dimensioni: larghezza" Definisce l'URL di un'immagine da usare come marcatore di un list-
item. Proprietà ereditata. Si applica agli elementi LI e a quelli per i
Esempi
quali si imposti la proprietà display sul valore list-item.
div { border-width: 1px 2px 1px 2px;
border-style: solid;
border-color: black red black red; } Sintassi
<selettore> {list-style-image: url(<url_immagine>);}

Nella definizione della sintassi per tutte queste proprietà avete a

Usare la proprietà border disposizione diverse strade. La prima e più semplice è quella di definire
L'ultima proprietà a sintassi abbreviata è border. Con essa possiamo lo stile a livello degli elementi lista o list-item:
definire con una sola regola le impostazioni per i quattro bordi. Il suo ul {list-style-image: url([Link]);}
uso è però limitato a un solo caso, peraltro molto comune: che i ol {list-style-image: url([Link]);}
quattro bordi abbiano tutti lo stesso colore, lo stesso stile e lo stesso li {list-style-image: url([Link]);}
spessore.

Sintassi
Più correttamente e per un fatto di rigore strutturale (lo stile si applica
selettore {border: <valore spessore> <valore stile> <valore
ai list-item), è preferibile, usando UL o OL, affidarsi ad un selettore del
discendente (descendant selector): list-style-type
ul li {list-style-image: url([Link]);}
Definisce l'aspetto del marcatore. Proprietà ereditata. Si applica agli
La soluzione è ottimale se prevedete di usare sempre uno stesso stile elementi LI e a quelli per i quali si imposti la proprietà display sul
per tutte le liste. Se invece pensate di usare stili diversi, affidatevi alla valore list-item.
potenza delle classi, che applicherete di volta in volta secondo le
necessità. La sintassi consigliata è questa:
ul.nome_della_classe li {list-style-image: url([Link]);} Sintassi
<selettore> {list-style-type: <valore>;}

Valori

un URL assoluto o relativo che punti ad un'immagine. Valori

none. Non viene usata nessuna immagine. La scelta dei valori possibili è lunghissima. Definiamo nei dettagli solo i
più importanti.

disc: un cerchietto pieno colorato. Il colore può essere modificato per

tutti i tipi con la proprietà color.
list-style-position circle: un cerchietto vuoto.
Imposta la posizione del marcatore rispetto al testo del list-item. square: un quadratino
Proprietà ereditata. Si applica agli elementi LI e a quelli per i quali si decimal: sistema di conteggio decimale 1, 2, 3, ....
imposti la proprietà display sul valore list-item. decimal-leading-zero: sistema di conteggio decimale ma con la
prima cifra preceduta da 0. 01, 02, 03, ....
lower-roman: cifre romane in minuscolo. i, ii, iii, iv, .......
Sintassi
upper-roman: cifre romane in maiuscolo. I, II, III, IV, ....
<selettore> {list-style-position: <valore>;}
lower-alpha: lettere ASCII minuscole. a, b, c, ......
Valori upper-alpha: lettere ASCII maiuscole. A, B, C, .....
outside. Valore di default. E' il comportamento standard: il marcatore lower-latin: simile a lower-alpha
è piazzato all'esterno del testo. upper-latin: simile a upper-alpha
inside. Il marcatore diventa parte integrante del testo e ne lower-greek: lettere minuscole dell'alfabeto greco antico.
rappresenta in un certo senso il primo carattere. Se il testo va a capo il
marcatore apparirà all'interno del box.

Esempi list-style
ul li {list-style-position: inside;} Proprietà a sintassi abbreviata con cui si definiscono tutti gli aspetti e
li {list-style-position: outside;} gli stili di un list-item. Proprietà ereditata.
Sintassi
<selettore> {list-style: <valore tipo> <valore posizione>
<valore immagine>;} La lista dei possibili valori è lunghissima. Solo alcuni di essi sono però
Valori di normale utilizzo e supportati:

I valori possibili sono quelli visti in precedenza per le proprietà singole. inline. Valore di default. L'elemento assume le caratteristiche degli
A rigor di logica solo due delle tre proprietà singole dovrebebro trovare elementi inline.
posto in questa dichiarazione abbreviata: per definire l'aspetto del block. L'elemento viene trattato come un elemento blocco.
marcatore, infatti, o decido di usare un'immagine o propendo per un list-item. L'elemento si trasforma in un elemento lista.
marcatore a carattere. Se si inseriscono indicazioni per tipo e
immagine, prevale l'immagine e il tipo è ignorato.
Esempi
Esempi
Nel suo primo manuale sui CSS Eric Meyer si chiede:"Ma perchè esiste
ul {list-style: square inside;}
la proprietà display?". Domanda legittima. A che serve cambiare
ul.lista1 li {list-style: outside url([Link]);}
l'ordine delle cose? Se ho a disposizione le liste, perchè devo
impostare un paragrafo o un titolo come un list-item? Vero. Ma altri
casi meno fantasiosi sono da prendere in considerazione. Le immagini,
Tre proprietà speciali: display, float clear
per esempio, sono per loro natura elementi inline, si inseriscono nel
testo ed è talvolta complicato gestirne il posizionamento. Se volessi
Le tre proprietà che esamineremo in questa lezione possono
mostrarle in una riga tutta per loro mi basterebbe impostare il display
modificare radicalmente la presentazione del documento. Sono,
su block, così:
dunque, strumenti potenti ma come quei giocattoli un pò pericolosi
vanno usati con molta cautela e sapendo bene cosa si fa, tenendo img {display: block;}

anche conto di serie implicazioni a livello di rendering tra i diversi La verà utilità della proprietà display, emerge comunque in linguaggi
browser. non strutturali com XML. Uno dei modi per rendere un file XML in un
browser è proprio quello di formattarlo con un CSS. Ma gli elementi
XML non ci dicono nulla su presentazione e struttura, a differenza di
display (X)HTML! Se trovo H1 so cosa significa e come verrà mostrato. Ma
questo documento? Codice:
Torniamo per un attimo alla prima lezione. Avevamo chiarito in quella
<guide> <guide_linguaggi_web> <guida>HTML</guida> <guida>CSS</g
sede la fondamenatle distinzione tra elementi blocco, inline e lista
uida> </guide_linguaggi_web> <guide_scripting> <guida>Javascrip
che è alla base di (X)HTML. Bene, quello che sembrava un assioma t</guida> <guida>VBScript</guida> </guide_scripting> </guide>
inconfutabile, può essere sconvolto con l'uso della proprietà display.
Nessuna informazione sulla presentazione. L'unico modo che ho per
Essa ha una sola, semplice funzione: definire il trattamento e la
stabilire come rendere tali elementi è tramite la proprietà display. Ma
presentazione di un elemento. Fin quando non la si usa ognuno segue
questo è un discorso non proprio attinenente a questa guida. Basta
la sua natura e il suo comportamento standard, ma con display
l'accenno.
possiamo intervenire su di esso e in certi casi ribaltarlo. La proprietà è
ereditata. float
Sintassi
Con questa proprietà è possibile rimuovere un elemento dal normale
<selettore> {display: <valore>;} flusso del documento e spostarlo su uno dei lati (destro o sinistro) del
Valori suo elemento contenitore. Il contenuto che circonda l'elemento
scorrerà intorno ad esso sul lato opposto rispetto a quello indicato
come valore di float. La proprietà non è ereditata. Sintassi

Il float è un altro caso di funzionalità presenti in HTML solo per certi <selettore> {clear: <valore>;}
elementi che i CSS hanno esteso a tutti gli altri (abbiamo già
incontrato il padding). Non spaventatevi della definizione di prima. Il
Valori
floating è un'operazione che veniva fatta in HTML sulle immagini.
Bastava usare nel tag IMG l'attributo align e impostare come valore none. Gli elementi con float possono stare a destra e sinistra
left, right, middle, etc. dell'elemento.
Sintassi left. Si impedisce il posizionamento a sinistra.

<selettore> {float: <valore>;}

right. Si impedisce il posizionamento a destra.
both. Si impedisce il posizionamento su entrambi i lati.
Valori

left. L'elemento viene spostato sul lato sinistro del box contenitore, il
contenuto scorre a destra. Esempi

right. L'elemento viene spostato sul lato destro, il contenuto scorre a Consider ail CSS costituito dalla seguente regola:
sinistra. img {float:left; }
none. Valore iniziale e di default in mancanza di una dichiarazione
esplicita. L'elemento mantiene la sua posizione normale.
Una nota importantissima. Se usate il float con le immagini non avete
problemi perchè esse hanno una dimensione intrinseca che il browser
riconosce. Ma se lo applicate ad altri elementi dovete esplicitamente
impostare una dimensione orizzontale con la proprietà width.

Esempi
div {width: 200px; float:right;}
img {float: left;}

clear
La proprietà clear serve a impedire che al fianco di un elemento
compaiano altri elementi con il float. Si applica solo agli elementi
blocco e non è ereditata.

L'origine di tale proprietà è questa: visto che il float sposta un

elemento dal flusso normale del documento, è possibile che esso
venga a trovarsi in posizioni non desiderate, magari al fianco di altri
elementi che vogliamo invece tenere separati. clear risolve questo
problema.