Introduzione - Tutorial gratuito sui CSS

Introduzione - Tutorial gratuito sui CSS
I Cascading Style Sheets (CSS) sono un fantastico strumento per aggiungere layout al tuo
sito web. Possono farti risparmiare un sacco di tempo e ti permettono di progettare i tuoi siti web in un modo
completamente nuovo. I CSS sono un obbligo per tutti quelli che vogliono lavorare con i siti web.
Questo tutorial ti introdurrà i CSS in sole poche ore. E' semplice da capire e ti insegnerà tutte le tecniche
sofisticate.
Imparare i CSS è divertente. Mentre andrai avanti con il tutorial, ricordati di lasciarti tempo sufficiente per
poter sperimentare da solo quello che imparerai in ogni lezione.
Per usare i CSS necessiti di una base di HTML. Se non sei familiare con l'HTML, per favore prima di
andare avanti con i CSS, segui il nostro tutorial sull'HTML.
Quale software mi serve?
Per favore evita di usare software come FrontPage, DreamWeaver o Word con questo tutorial. Software più
sofisticati non ti aiuteranno ad imaprare i CSS. Piuttosto ti limiteranno e faranno scendere significativamente
la tua curva di apprendimento.
Tutto quello di cui hai bisogno è un editor di testo semplice e gratutito.
Per esempio, con Microsoft Windows viene installato anche un programma chiamato Notepad. Normalmente
è posizionato sotto Accessori nel menu Programmi di Avvio. Alternativamente puoi usare un editor simile
come Pico per Linux o Simple Text per Macintosh.
Un semplice editor di testo è l'ideale per imparare l'HTML e i CSS perchè non compromette o cambia il
codice che stai scrivendo. In questo modo i tuoi successi e i tuoi errori possono essere attributi solo a te
stesso - non al software.
Puoi usare qualsiasi browser per questo tutorial. Ti consigliamo di aggiornare il tuo browser in modo da poter
usare sempre l'ultima veersione.
Tutto quello che ti serve è un browser e un editor di testo.
Iniziamo!
Lezione 1: Cosa sono i CSS?
Forse hai già sentito parlare dei CSS senxa realmente sapere cosa fossero. In questa lezione imparerai
qualcosa sui CSS e su cosa farci.
CSS è l'acronimo di Cascading Style Sheets (in italiano Fogli di stile).
Cosa posso fare con i CSS?
I CSS formano un linguaggio per la definizione del layout dei documenti HTML. Per esempio, i CSS si
occupano dei font, dei colori, dei margini, delle linee, delle altezze, delle larghezze, delle immagini di sfondo,
del posizionamento e di molte altre cose. Aspetta e vedrai!
L'HTML può essere stra-usato per aggiugnere layout ai siti web. Ma i CSS offrono molte più opzioni,
accurate e sofisticate. Oggi i CSS sono supportati da tutti i browser.
Dopo sole poche lesioni di questo tutorial sarai capace di fare il tuo foglio di stile usando i CSS in modo da
dare al tuo sito web un nuovo e grandioso aspetto.
Che differenza c'è tra i CSS e l'HTML?
L'HTML viene usato per strutturare il contenuto. I CSS vengono usati per formattare la struttura del
contenuto.
Va bene, sembra un po' troppo tecnico e confuso, ma per favore continua a leggere. Molto presto ne capirai
il senso.
Indietro nel tempo, quando Madonna era una vergine e un tipo di nome Tim Berners Lee aveva inventato il
World Wide Web, solo il linguaggio HTML veniva usato per aggiungere struttura al testo. Un autore poteva
marcare il suo testo con la scritta "questo è un titolo" o"questo è un paragrafo" usando tag HTML del tipo di
<h1> e <p>.
Quando il web ha cominciato a diventare popolare, i designer hanno iniziato a cercare alternative per
aggiungere layout ad un documento online. Per far fronte alla domanda, i produttori di browser (a quel tempo
Netscape e Microsoft) inventarono nuovi tag HTML come per esempio <font>, diverso dai tag HTML originali
inq uanto definisce il layout e non la struttura.
Questo portò a situazioni in cui tag originari di struttura come <table> veniva abbondantemente usati per fare
il layout delle pagine invece che per aggiungere struttura al testo. Molti altri tipi di nuovi tag, come <blink>
venivano supportati solo da alcuni tipi di browser. "Per vedere queste pagine hai bisogno del browser X" era
diventato uno slogan comune sui siti web.
I CSS sono stati inventati per rimediare a questa situazione, fornendo ai web designer opportunità sofisticate
per la progettazione del layout che fossero supportate da tutti i browser. Allo stesso tempo la separazione
dello stile di presentazione di un documento dal contenuto del documento, facilita molto il mantenimento dei
siti web.
Quali benefici avrò con i CSS?
I CSS sono stati una rivoluzione nel mondo del web design. I benefici concreti dei CSS comprendono:




il controllo del layout di molti documenti contemporaneamente attraverso un unico foglio di stile;
un controllo più preciso del layout;
l'applicazione di un layout diverso per ogni tipo di media (schermo, stampa, ecc.);
un grand numero di tecniche avanzate e sofisticate.
Lezione 2: Come funzionano i CSS?
In questa lezione imparerai a fare il tuo primo foglio di stile. Imparerai le basi del modello CSS e il codice che
ci serve per usare i CSS in un documento HTML.
Molte proprietà usate nei Cascading Style Sheets (CSS) sono simili a quelle dell'HTML. Quindi, se hai usato
l'HTML per il layout, molto probabilmente riconoscerai facilmente la maggior parte del codice. Vediamo un
esempio concreto.
La sintassi di base dei CSS
Diciamo che vogliamo un bel colore rosso come sfondo della pagina web:
Usando solo l' HTML avremmo fatto in questo modo:
<body bgcolor="#FF0000">
Lo stesso risultato con i CSS si ottiene così:
body {background-color: #FF0000;}
Come potrai notare, i codici dell'HTML e del CSS sono più o meno identici. L'esempio sopra ti mostra anche
il modello fondamentale dei CSS:
Ma dove metti il codice CSS? Questo è quello che vedremo esattamente fra un attimo.
Applicare i CSS ad un documento HTML
Ci sono tre modi con cui puoi applicare i CSS ad un documento HTML, e sono tutti illustrati di seguito. Ti
raccomandiamo di focalizzarti sul terzo metodo, cioè l'esterno.
Method 1: In-line (l'attributo style)
Un modo per applicare i CSS all'HTML è quello di usare l'attributo style dell'HTML. Rimanendo sull'esempio
riportato sopra con lo sfondo rosso, possiamo scrivere come segue:
<html>
<head>
<title>Esempio</title>
</head>
<body style="background-color: #FF0000;">
<p>Questa è una pagina rossa</p>
</body>
</html>
Method 2: Interno (il tag style)
Un altro modo per includere il codice CSS è quello di usare il tag HTML <style>. Per esempio in questo
modo:
<html>
<head>
<title>Esempio</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Questa è una pagina rossa</p>
</body>
</html>
Method 3: Esterno (link ad un foglio di stile)
Il metodo raccomandato è quello di fare un link a quello che viene chiamato un foglio di stile esterno. In tutto
questo tutorial useremo questo metodo per i nostri esempi.
Un foglio di stile esterno è semplicemente un file di testo con estensione .css. Come con tutti gli altri file,
puoi mettere il tuo foglio di stile sul server web o sul disco fisso.
Per esempio, supponiamo che il tuo foglio di stile si chiami style.css ed è stato salvato in una cartella
chiamata style. La situazione potrebbe essere illustrata come segue:
Il trucco è creare un link al foglio di stile (style.css) dal documento HTML (default.htm). Questo link potrebbe
essere creato con una linea di codice HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Nota come il percorso per arrivare al tuo foglio di stile viene indicato usando l'attributo href.
La linea di codice deve essere inserita nella sezione header del codice HTML, cioè tra i tag <head> e
</head>, in questo modo:
<html>
<head>
<title>Il mio documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
Questo link dice al browser che per visualizzare il file HTML, dovrebbe usare il layout come descritto nel file
CSS.
La cosa realmente intelligente è che più documenti HTML possono essere linkati allo stesso foglio di stile. In
altre parole, un file CSS può essere usato per controllare il layout di più documenti HTML
contemporaneamente.
Questa tecnica ti permette di guadagnare un sacco di lavoro. Se per esempio vuoi cambiare il colore di
sfondo di un sito web di 100 pagine, un foglio di stile ti può salvare dal farlo manualmente per tutti i 100
documenti HTML. Usando i CSS il cambiamento può essere fatto in pochi secondi solo cambiando un
codice nel foglio di stile.
Mettiamo in pratica quello che abbiamo appena imparato.
Prova da solo
Apri Notepad (o qualsiasi altro editor di testo) e crea due file - un file HTML e un file CSS - con questi
contenuti:
default.htm
<html>
<head>
<title>Il mio documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Il mio primo foglio di stile</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Adesso metti i due file nella stessa cartella. Ricordati di salvare i file con la giusta estensione
(rispettivamente ".htm" e ".css")
Dal tuo browser apri default.htm e osserva la tua pagina con lo sfondo rosso. Congratulazioni! Hai fatto il
tuo primo foglio di stile!
Lezione 3: Colori e sfondi
In questa lezione imparerai come applicare i colori e gli sfondi al tuo sito web. Vedremo anche alcuni metodi
avanzati per posizionare e controllare le immagini di sfondo. Spiegheremo quindi le seguenti proprietà CSS:







color
background-color
background-image
background-repeat
background-attachment
background-position
background
Colore di primo piano: la proprietà 'color'
La proprietà color descrive il colore di primo piano di un elemento.
Per esempio, immagina di volere tutti i titoli del documento di colore rosso scuro. I titoli sono tutti marcati con
l'elemtno HTML <h1>. Il codice sotto definisce il colore rosso dell'elemento <h1>.
h1 {
color: #ff0000;
}

Visualizza l'esempio
I colori possono essere inseriti in valore esadecimale come nell'esempio sopra, o puoi usare il nome del
colore in inglese ("red") o il suo valore in rgb (rgb(255,0,0)).
La proprietà 'background-color'
La proprietà background-color descrive il colore di sfondo degli elementi.
L'elemento <body> contiene tutto il contenuto di un documento HTML. Per questo motivo, per cambiare il
colore di sfondo di tutta la pagina, dovremmo applicare la proprietà background-color all'elemento <body>.
Il colore di sfondo può essere applicato anche ad altri elementi compresi i titoli e il testo. Nell'esempio sotto
sono stati applicati diversi colori di sfondo agli elementi <body> e <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Visualizza l'esempio
Nota che abbiamo applicato due proprietà ad <h1> separandole con un punto e virgola.
Immagini di sfondo [background-image]
La proprietà CSS background-image viene usata per inserire una immagine di sfondo.
Come esempio di immagine di sfondo abbiamo usato la farfalla sotto. Puoi scaricare questa immagine in
modo da poterla usare sul tuo computer (fai click con il taasto destro del mouse sull'immagine e scegli "salva
immagine come"), o puoi usare un'altra immagine che ti piace inserire.
Per inserire l'immagine della farfalla come immagine di sfondo di una pagina web applica semplicemente la
proprietà background-image al <body> e specifica la posizione dell'immagine.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}

Visualizza l'esempio
NB: Nota come abbiamo specificato l'indirizzo dell'immagine come url("butterfly.gif"). Questo significa che
l'immagine è posizionata nella stessa cartella del foglio di stile. Puoi riferti anche ad immagini in altr cartelle
usando url("../images/butterfly.gif") o anche su Internet indicando l'indirizzo completo del file:
url("http://www.html.net/butterfly.gif").
Immagini di sfondo ripetute [background-repeat]
Nell'esempio sopra hai notato che per default la farfalla viene ripetuta sia orizzontalmente che verticalmente
in modo da coprire tutto lo schermo? La proprietà background-repeat controlla questo comportamento.
La tabella sotto sottolinea i quattro diversi valori che può assumere background-repeat.
Valore
Descrizione
Esempio
Background-repeat: repeatL'immagine viene ripetuta orizzontalmente
x
Visualizza
l'esempio
background-repeat: repeat-y L'immagine viene ripetuta verticalmente
Visualizza
l'esempio
background-repeat: repeat
L'imagine viene ripetuta sia orizzontalmente che
verticalmente
Visualizza
l'esempio
background-repeat: norepeat
L'immagine non viene ripetuta
Visualizza
l'esempio
Per esempio, per evitare ripetizione di un'immagine di sfondo il codice dovrebbe apparire come questo:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Visualizza l'esempio
Immagini di sfondo bloccate [background-attachment]
La proprietà background-attachment specifica se una figura di sfondo è fissa o si muove insieme
all'elemento che la contiene.
Una immagine di sfondo fissa non si muoverà con il testo quando il lettore scorrerà la pagina, mentre una
immagine di sfondo non bloccata si muoverà insieme al testo della pagina web.
La tabella sotto sottolina i due valori che può avere background-attachment. Fai click sugli esempi per
vedere le differenze fra scroll e fixed.
Valore
Descrizione
Esempio
Background-attachment: scroll L'immagine si muove con la pagina - non bloccata Visualizza l'esempio
Background-attachment: fixed L'immagine è bloccata
Il codice sotto, per esempio, blocca l'immagine di sfondo.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Visualizza l'esempio
Visualizza l'esempio
Immagini di sfondo posizionate [background-position]
Per default una immagine di sfondo verrà posizionata nell'angolo in alto a sinistra dello schermo. La
proprietà background-position ti permette di cambiare il default e posizionare l'imamgine di sfondo in
qualsiasi altro posto dello schermo che preferisci.
Ci sono molti modi per stabilire i valori di background-position. Tutti comunque stabiliscono un insieme di
coordinate. Per esempio, il valore '100px 200px' posiziona l'immagine a 100px dal lato sinistro e a 200px dal
bordo superiore della finestra del browser.
Le coordinate possono essere indicate come percentuale delle dimensioni dello schermo, unità fisse (pixel,
centimetri, ecc.) o puoi usare le parole inglesi top, bottom, center, left e right. Il modello sotto illustra meglio il
sistema:
La tabella ti da qualche esempio.
Valore
Descrizione
Esempio
background-position: 2cm L'immagine è posizionata a 2 cm dalla sinistra e a 2 cm dal
2cm
basso della pagina
Visualizza
l'esempio
background-position: 50%
L'immagine è centrata ad un quarto della pagina dal basso
25%
Visualizza
l'esempio
background-position: top
right
Visualizza
l'esempio
L'immagine è posizionata nell'angolo in alto a destra della
pagina
Il codice di esempio sotto posiziona l'immagine di sfondo nell'angolo in basso a destra:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Visualizza l'esempio
Raggruppamento [background]
La proprietà background è una scorcaitoira per tutte le proprietà di sfondo che abbiamo elencato in questa
lezione.
Con la proprietà background puoi raggruppare molte proprietà insieme e scrivere così il tuo foglio di stile in
una maniera ancora più corta e più facile da leggere.
Guarda per esempio queste cinque linee:
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Usando background puoi ottenere lo stesso risultato con solo una linea di codice:
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Di seguito l'ordine con cui devono essere inserite le proprietà:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [backgroundposition]
Se una proprietà non viene definita verrà automaticamente posta al suo valore di default. Per esempio,
background-attachment e background-position non vengono definite nell'esempio:
background: #FFCC66 url("butterfly.gif") no-repeat;
Queste due proprietà, che non sono state specificate, verranno soltanto definite con il loro valore di default
che, come abbiamo visto, è scroll e top left.
Riepilogo
In questa lezione hai già imparato nuove tecniche che non sarebbero possibili usando solo l'HTML. Il
divertimento continua nella prossima lezione che esamina una gamma più ampia di possibilità quando si
usano i CSS per descrivere i font.
Lezione 4: Font
In questa lezione imparerai qualcosa sui font e su come applicarli utilizzando i CSS. Vedremo anche come
funziona il fatto che uno specifico font può esssere visualizzato sul tuo tuo sito web solo se è stato istallato
sul PC che aprirà il tuo sito. Verranno quindi descritte le seguenti proprietà CSS:






font-family
font-style
font-variant
font-weight
font-size
font
La famiglia dei caratteri [font-family]
La proprietà font-family viene usata per definire le priorità per la lista dei caratteri da usare per visualizzare
un elemento o una pagina web. Se il primo font della lista non è stato istallato sul computer che accede al
sito, allora verrà provato il secondo font della lista e così via finchè non verrà trovato un fonte disponibile.
Ci sono due tipi di nomi per catalogare i font: i nomi della famiglia e le famiglie generiche. I due termini
vengono spiegati sotto.
Nome della famiglia
Esempi di nomi della famiglia (conosciuto spesso con il termine "font") possono essere per esempio
"Arial", "Times New Roman" o"Tahoma".
Famiglia generica
Le famiglie generiche possono essere descritte meglio come gruppi di nomi di famiglie con
caratteristiche uniformi. Un esemio è il sans-serif (in italiano, senza grazie), che è la collezione dei
font senza le cosiddette grazie, o "piedi".
Di seguito vengono illustrate le differenze:
Quando fai la lista dei font per il tuo sito web, inizia con i font più usati e segui con alcuni font alternativi. E'
raccomandabile terminare la lista con il nome di una familia generica di font. In questo modo la pagina potrà
essere visualizzata ocn un font della stessa famiglia generica, nel caso in cui tutti i font listati non fossero
disponibili.
Un esempio di lista di priorità dei font potrebbe essere fatta così:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Visualizza l'esempio
I titoli marcati con <h1> verranno visualizzati con il font "Arial". Se questo font non è stato istallato sul
computer dell'utente, allora verrà utilizzato al suo posto il font "Verdana". Se entrambi questi font non sono
disponibili, i titoli verranno visualizzati utilizzando un font della famiglia sans-serif.
Nota come il nome del font "Times New Roman" contiene degli spazi e per questo motivo viene messo tra
doppi apici.
Stile del font [font-style]
La proprietà font-style definisce lo stile normale, italico o obliquo del font scelto. Nell'esempio sotto tutti i
titoli marcati con <h2> verranno visualizzati in italico.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}

Visualizza l'esempio
Variante del font [font-variant]
La proprietà font-variant viene usata per scegliere tra le varianti normal o small-caps di un font. Un font
small-caps è un font font che usa tutte lettere maiuscole di dimensioni leggermente più piccole, al posto
delle lettere minuscole. Confuso? Guarda questo esempio:
Se viene assegnato a font-variant il valore small-caps e non è disponibile nessun font small-caps il browser
molto probabilmente mostrerà il testo tutto maiuscolo.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

Visualizza l'esempio
Peso del font [font-weight]
La proprietà font-weight descrive il grado di neretto, o "di pesantezza", che dovrebbe avere il font. Un font
può essere sia normal che bold. Alcuni browser supportano anche l'uso di una serie di numeeri tra 100 e
900 (in centinaia) per descrivere la pesantezza di un font.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Visualizza l'esempio
Dimensione del font [font-size]
La dimensione di un font viene definita con la proprietà font-size.
Per descrivere le dimensioni di un font si può scegliere tra diverse unità di misura (per esempio, pixel e
percentuali). In questo tutorial ci focalizzeremo sulle unità più utilizzate comunemente e più appropriate,
mostrate negli esempi:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Visualizza l'esempio
C'è una sola differenza chiave tra le quattro unità elencate sopra. Le unità 'px' e 'pt' indicano dimensioni
assolute per il font, mentre '%' e 'em' permettono all'utente di ridimensionare il font come preferiscono. Molti
utenti sono diversamente abili, anziani o semplicemente vedono poco o hanno un monitor di qualità
scadente. Per far si che il web sia accessibile a tutti, dovresti usare le unità ridimensionabili come '%' o
'em'.
Di seguito puoi vedere come si ridimensiona un testo con Mozilla Firefox e Internet Explorer. Prova da solo bella caratteristica, non credi?
Raggruppamento [font]
Usando la proprietà font è possibile raggruppare tutte le diverse proprietà dei font in una sola.
Per sempio immagina queste quattro linee di codice usate per descrivere le proprietà del font per il tag <p>:
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usando la proprietà per il raggruppamento il codice sarà semplificato:
p{
font: italic bold 30px arial, sans-serif;
}
L'ordine dei valori per font è:
font-style | font-variant | font-weight | font-size | font-family
Riepilogo
In questa lezione hai imparato alcune delle possibilità relative ai font. Ricordati che uno dei vantaggi
principali nell'usare i CSS per specificare i font è quello di poter cambiare i font di tutto il sito in una volta
sola, in pochi minuti. I CSS ti permettono i guadagnare tempo e ti semplificano la vita. Nella prossima
lezione guarderemo il testo.
Lezione 5: Testo
Formattare e aggiungere dello stile al testo è una delle prerogative principali per ogni web designer. In
questa lezione ti verranno introdotte alcune sorprendenti opportunità fornite dai CSS per aggiungere stile al
testo. Descriveremo le seguenti proprietà:





text-indent
text-align
text-decoration
letter-spacing
text-transform
Indentazione del testo [text-indent]
La proprietà text-indent ti permette di aggiungere un tocco elegante ai paragrafi di testo, applicando una
indentazione alla prima linea del paragrafo. Nell'esempio sotto abbiamo applicato una indentazione di 30px
a tutti i paragrafi marcati con il tag <p>:
p{
text-indent: 30px;
}

Visualizza l'esempio
Allineamento del testo [text-align]
La proprietà text-align corrisponde all'attributo align usato nelle precedenti versioni di HTML. Il testo può
essere allineato a sinistra, a destra o centrato. Oltre a questo il valore justify permetterà di allineare ogni
linea del testo sia a destra che a sinistra. Già conosci questo tipo di allineamenti da esempi sui giornali o
sulle riviste.
Nell'esempio sotto il testo nel titolo della tabella <th> verrà allineato a destra mentre i dati nella tabella <td>
saranno centrati. Inoltre i normali paragrafi di testo saranno giustificati:
th {
text-align: right;
}
td {
text-align: center;
}
p{
text-align: justify;
}

Visualizza l'esempio
Decorazione del testo [text-decoration]
La proprietà text-decoration permette di aggingere al testo diverse "decorazioni" o "effetti". Per esempio puoi
sottolineare il testo, inserire una linea sul testo o sopra il testo, ecc. Nell'esempio che segue i titoli <h1>
vengono sottolineati con una linea sopra il testo e i titoli <h3> con una liena sul testo.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}

Visualizza l'esempio
Spazio fra i caratteri [letter-spacing]
Lo spazio tra i caratteri del testo può essere specificato usando la proprietà letter-spacing. Il valore della
proprietà è semplicemente la distanza desiderata. Per esempio, se vuoi uno spazio tra i caratteri del testo di
un paragrafo <p> di 3px e una distanza tra i caratteri del titolo <h1> di 6px, il codice che dovresti usare sarà:
h1 {
letter-spacing: 6px;
}
p{
letter-spacing: 3px;
}

Visualizza l'esempio
Trasformazione del testo [text-transform]
La proprietà text-transform controlla l'uso delle maiuscole in un testo. Puoi scegliere capitalize, usare
uppercase o lowercase a seconda di come appare il testo nel codice HTML.
Un esempio potrebbe essere la parola "headline" che può essere mostrata ll'utente come "HEADLINE" o
"Headline". Esistono quattro possibili valori per la proprietà text-transform:
capitalize
Usa la maiuscola per il primo carattere di ogni parola. Per esempio: "john doe" sarà "John Doe".
uppercase
Converte tutti i caratteri in maiuscole. Per esempio: "john doe" sarà "JOHN DOE".
lowercase
Converte tutte i caratteri in minuscole. Per esempio: "JOHN DOE" sarà "john doe".
none
Nessuna trasformazione - il testo viene presentato come appare nel codice HTML.
Come esempio useremo una lista di nomi. I nomi sono tutti marcati con <li> (list-item). Diciamo che vogliamo
i nomi in lettere maiuscole e i titoli in minuscolo.
Cerca di guardare il codice HTML di questo esempio e vedrai che in effetti il testo è in lettere minuscole.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}

Visualizza l'esempio
Riepilogo
Nelle ultime tre lezioni hai già imparato molte proprietà dei CSS ma ce ne sono ancora molte altre. Nella
prossima lezione vedremo i link.
Lezione 6: Link
Puoi applicare tutto quello che hai imaprato nelle lezioni precedenti anche ai link (cioè, cambiare il colore, i
font, la sottolineatura, ecc.). La cosa nuova è che i CSS ti permettono di definire queste proprietà in modo
diverso a seconda se il link è stato visitato o no, è attivo o se il cursore è proprio sopra il link. In questo modo
è possibile aggiungere un po' di fantasia ed utili effetti al tuo sito web. Per controllare questi effetti devi usare
quella che viene chiamata una pseudo-classe (pseudo-classes).
Cosa è una pseudo-classe?
Una pseudo-classe ti permett di tenere in considerazione condizioni o eventi diversi quando definisci una
proprietà epr una tag HTML.
Guardiamo un esempio. Come sai, in HTML i link vengono specificati con il tag <a>. Possiamo quindi usare
a come selettore nei CSS:
a{
color: blue;
}
Un link può assumere diversi stati. Per esempio, può essere già stato visitato o no. Puoi usare una pseudo
classe per asssegnare uno stile diverso ai link visitati e ai link non ancora visitati.
a:link {
color: blue;
}
a:visited {
color: red;
}
Usa a:link e a:visited rispettivamente per i link non ancora visitati e per i link già visitati. I link attivi avranno
come pseudo-classe a:active, mentre a:hover verrà usato per definire il cursore sopra il link.
Adesso vedremo in dettaglio ciascuna delle quattro pseudo-classi.
Pseudo-classe: link
La pseudo-classe :link viene usata per i link che non sono stati ancora visitati dall'utente.
Nel codice di esempio riportato sotto i link non visitati appariranno di colore blu chiaro.
a:link {
color: #6699CC;
}

Visualizza l'esempio
Pseudo-classe: visited
La pseudo-classe :visited viene usata per i link che sono già stati visitati dall'utente. Per esempio, nel codice
sotto faremo tutti i link visitati con un colore viola scuro:
a:visited {
color: #660099;
}

Visualizza l'esempio
Pseudo-classe: active
La pseudo-classe :active viene usata per i link attivi.
Nell'esempio inseriamo un colore di sfondo giallo per i link attivi:
a:active {
background-color: #FFFF00;
}

Visualizza l'esempio
Pseudo-classe: hover
La pseudo-classe :hover viene usata quando il cursore del mouse passa sopra ad un link.
Questa proprietà può essere usata per creare un effetto interessante. Per esempio, se vogliamo tutti i link
arancioni e in italico quando ci passiamo sopra con il mouse, allora il nostro CSS dovrebbe essere:
a:hover {
color: orange;
font-style: italic;
}

Visualizza l'esempio
Esempio 1: quando il cursore è sopra un link
E'molto diffuso creare effetti diversi quando il cursore passa sopra un link. Guarderemo quindi altri esempi
legati alla pseudo-classe :hover.
Esempio 1a: Spazio tra i caratteri
Come ricorderai dalla lezione 5, lo spazio tra i caratteri può essere modificato usando la proprietà letterspacing. E' possibile applicare questa proprietà ai link per creare degli effetti speciali:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

Visualizza l'esempio
Esempio 1b: MAIUSCOLE e minuscole
Nella lezione 5 abbiamo visto anche la proprietà text-transform che permette di rendere le lettere maiuscole
o minuscole. Anche questa proprietà può essere usata per creare un effetto particolare sui link:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

Visualizza l'esempio
I due esempi sopra ti danno un'idea delle infinite possibilità che si hanno nel combinare insieme le diverse
proprietà. Puoi creare i tuoi effetti speciali - prova!
Esempio 2: Elimina la sottolineatura dai link
Una domanda molto frequente è come si fa per eliminare la sottolineatura dai link?
Dovresti considerare attentemente se è necessario eliminare la sottolineatura dei link poichè questo
potrebbe diminuire significativamente l'usabilità del tuo sito web. Le persone sono abituate a vedere i
link sottolineati di blu e sanno che possono cliccarci sopra. Perfino mia madre lo sa! Se cambi la
sottolineatura e il colore dei link ci potrebbero essere dei casi in cui l'utente si potrebbe confondere e quindi
non sfruttare a pieno tutti i benefici del contenuto del tuo sito.
Detto questo è molto semplice eliminare la sottolineatura dei link. Come ricorderai dalla lezione 5, la
proprietà text-decoration può essere usata per definire se volgiamo o meno la sottolineatura del testo. Per
rimuovere la sottolineatura devi semplicemente definire il valore di text-decoration a none.
a{
text-decoration:none;
}
In alternativa puoi definire la proprietà text-decoration insieme alle altre proprietà per tutte le quattro pseudoclassi.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}

Visualizza l'esempio
Riepilogo
In questa lezione hai imparato ad usare le pseudo-classi insieme ad alcune delle proprietà viste nelle lezioni
precedenti. Questo dovrebbe darti un'idea di alcune delle possibilità fornite dai CSS.
Nella prossima lezione ti insegneremo a definire le proprietà per elementi specifici o gruppi di elementi.
Lezione 7: Identificazione e gruppi di elementi (class e id)
Qualche volta potrsti voler applicare uno stile speziale ad un particolare elemento o ad un gruppo particolare
di elementi. In questa lezione vedremo in dettaglio come puoi usare class e id per specificare le proprietà a
degli elementi selezionati.
Come fai per colorare un titolo particolare in modo diverso rispetto a tutti i titoli del tuo sito web? Come fai
per raggruppare i tuoi link in diverse categorie e dare ad ogni categoria uno stile speciale? Questi sono solo
alcuni esempi di domande a cui rispondere in questa lezione.
Raggruppare gli elementi con class
Diciamo che abbiamo due liste di link di diversi grappoli di uva usati per il vino bianco e per il vino rosso. Il
codice HTML sarà così:
<p>Uva per il vino bianco:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>uva per il vinoo rosso:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>

Visualizza l'esempio
Ora vogliamo che i link al vino bianco siano gialli, e i link al vino rosso siano rossi mentre i restanti link della
pagina rimarranno blu.
Per ottenere questo dividiamo i link in due categorie assegnando una classe a ciascun link usando l'attributo
class.
Cerchiamo di definire alcune classi nell'esempio sotto:
<p>Uva per il vino bianco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Uva per il vino rosso:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
In futuro possiamo definire delle proprietà particolari per i link che appartengono rispettivamente a
"whitewine"e a "redwine".
a{
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}

Visualizza l'esempio
Come mostrato nell'esempio puoi definire le proprietà per tutti gli elementi che appartengono a certe classi
usando .nomedellaclasse nel foglio di stile del documento.
Identificativo dell'elemento con id
Oltre a raggruppare gli elementi potresti aver bisogno di identificare un unico elemento. Questo viene fatto
usando l'attributo id.
La cosa speciale con l'attributo id è che non ci possono essere due elementi con lo stesso id nello stesso
documento. Ogni id deve essere unico, altrimenti dovresti usare l'attributo class. adesso vediamo un
esempio sui possibili utilizzi di id:
<h1>Capitolo 1</h1>
...
<h2>Capitolo 1.1</h2>
...
<h2>Capitolo 1.2</h2>
...
<h1>Capitolo 2</h1>
...
<h2>Capitolo 2.1</h2>
...
<h3>Capitolo 2.1.2</h3>
...
L'esempio sopra è un classico per molti documenti suddivisi in capitoli o paragrafi. Sarebbe naturale
assegnare un id a ciascun capitolo come mostrato di seguito:
<h1 id="c1">Capitolo 1</h1>
...
<h2 id="c1-1">Capitolo 1.1</h2>
...
<h2 id="c1-2">Capitolo 1.2</h2>
...
<h1 id="c2">Capitolo 2</h1>
...
<h2 id="c2-1">Capitolo 2.1</h2>
...
<h3 id="c2-1-2">Capitolo 2.1.2</h3>
...
Diciamo che il titolo per il capitolo 1.2 deve essere in rosso. Questo può essere fatto con i CSS:
#c1-2 {
color: red;
}

Visualizza l'esempio
Come mostrato nell'esempio sopra puoi definire le proprietà di uno speficio elemento usando #id nel foglio di
stile del documento.
Riepilogo
In questa lezione abbiamo imparato che con l'uso dei selettori class e id, si possono definire delle proprietà
per elementi specifici.
Nella prossima lezione vedremo in dettaglio due elementi HTML molto usati con i CSS: <span> e <div>.
Lezione 8: Gruppi di elementi (span e div)
Gli elementi <span> e <div> vengono usati per raggruppare e strutturare un documento e vengono utilizzati
spesso insieme agli attributi class e id.
In questa lezione vedremo in dettaglio come si usano <span> e <div> poichè questi sono due elementi
HTML sono di importanza fondamentale per i CSS.


Raggruppare con <span>
Raggruppare con <div>
Raggruppare con <span>
L'elemento <span> è quello che possiamo definire un elemento neutro che non aggiunge niente al
documento stesso. Ma con i CSS <span> può essere usato per aggiungere effetti visivi a parti specifiche di
testo all'interno del documento.
Un esempio di quanto detto potrebbe essere questa citazione di Benjamin Franklin:
<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>
Diciamo che vogliamo evidenziare in rosso quelli che il Sig. Franklin vede come benefici del non rimanere a
letto tutto il giorno. A questo scopo marchiamo i benefici con <span>. Ad ogni span viene quindi aggiunta
una class che possiamo definire nel nostro foglio di stile:
<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
Il CSS corrispondente è:
span.benefit {
color:red;
}

Visualizza l'esempio
Naturalmente puoi anche usare id per aggiungere lo stile agli elementi <span>. Proprio come ricorderai
dovrai applicare un unico id per ciascuno dei tre elementi <span>, come abbiamo visto nella lezione
precedente.
Raggruppare con <div>
Mentre <span> viene usato con un elemento di livello blocco come abbiamo visto nell'esempio precedente,
<div> viene usato per raggruppare uno o più elementi di livello blocco.
A parte queste differenze, il raggruppamento con <div> funziona più o meno allo stesso modo. Guardiamo
un esempio con due liste di presidenti degli USA divisi per partiti politici:
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
E nel nostro foglio di stile possiamo utilizzare il raggruppaamento nello stesso modo visto sopra:
#democrats {
background:blue;
}
#republicans {
background:red;
}

Visualizza l'esempio
Nell'esempio abbiamo usato solo <div> e <span> su oggetti molto semplici come testo e colori di sfondo.
Entrambi gli elementi hanno il potenziale di fare cose molto più avanzate. Comunque non lo diremo in
questa lezione. Lo vedremo più tardi nel seguito del tutorial.
Riepilogo
Nella lezione 7 e nella 8, hai imparato qualcosa sui selettori id e class e sugli elementi span e div.
Adesso dovresti essere in grado di raggruppare e identificare più o meno tutte le parti di un documento, che
è una bel passo per diventare padrone dei CSS. Nella lezione 9 introdurremo il modello box.
Lezione 9: Il modello box
Nei CSS il modello box (o contenitore) descrive tutti i contenitori che sono stati generati dagli elementi
HTML. Il modello box contiene anche le opzioni dettagliate riguardanti margini, bordi, riempimenti e
contenuto per ciascun elemento. Il diagramma sotto ti mostra come viene costruito il modello box:
Il modello box nei CSS
La figura sopra potrebbe sembrare un po' troppo teorica, quindi cerchiamo di usare il modello in un vero e
proprio caso con un titolo e del testo. L'HTML per il nostro esempio è (da Universal Declaration of Human
Rights):
<h1>Article 1:</h1>
<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>
Aggiungendo dell colore e informazioni per i font l'esempio potrebbe presentarsi come mostrato di seguito:
L'esempio contiene due elementi: <h1> e <p>. Il modello box per i due elementi può essere illustrato come
segue:
Nonostante possa sembrare un pochino complicato la figura mostra come ogni elemento HTML è circondato
da contenitori. Quei contenitori che possiamo sistemare usando i CSS.
'


Lesson 10: The box model - margin & padding '
Lesson 11: The box model - border '
'
When you have finished these two lessons, you will master the box model and be able to layout your
documents much finer and more precise than in the old fashion using tables in HTML.
%>
Riepilogo
In questa lezione ti abbiamo introdotto al modello box. Nelle prossime tre lezioni vedremo più da vicino come
creare e controllare gli elementi in un modello box.
Lezione 10: Margini e riempimenti
Nella lezione precedente hai visto una introduzione del modello box. In questa lezione ti mostreremo come
cambiare la presentazione degli elementi definendo le proprietà margin e padding.


Definire i margini in un elemento
Definire il padding in un elemento
Definire i margini in un elemento
Un elemento ha quattro lati: destro, sinistro, alto e basso. margin indica la distanza di ciascuno dei lati
dall'elemento vicino (o dai bordi del documento). Vedi il grafico nella lezione 9.
Come primo esempio vedremo come definire i margini per il documento in sè, cioè per l'elemento <body>.
La figura sotto mostra come vogliamo che siano i margini delle nostre pagine.
Il codice CSS per fare ciò sarà così:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
O potrsti scegliere un modo ancora più elegante:
body {
margin: 100px 40px 10px 70px;
}

Visualizza l'esempio
Puoi definire i margini allo stesso modo in quasi ogni elemento. Per esempio, potrmmo scegliere di definire i
margini per tutti i paragrafi di testo marcati con l'elemento <p>:
body {
margin: 100px 40px 10px 70px;
}
p{
margin: 5px 50px 5px 50px;
}

Visualizza l'esempio
Definire il padding in un elemento
Padding può essere inteso anche come "riempimento". Questo ti fa capire meglio che il padding non
influisce sulla distanza dell'elemento dagli altri elementi, ma definisce soltanto la distanza interna tra il bordo
e il contenuto dell'elemento.
L'uso di padding può essere illustrato guardando un semplice esempio dove tutti i titoli hanno un colore di
sfondo:
h1 {
background: yellow;
}
h2 {
background: orange;
}

Visualizza l'esempio
Definendo il padding per i titoli puoi stabilire quanto riempimento ci deve essere intorno al testo per ogni
titolo:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}

Visualizza l'esempio
Riepilogo
Adesso sei pronto per diventare padrone del modello box dei CSS. Nella prossima lezione daremo
vedremo più da vicino come stabilire il colore dei bordi e come regolare i tuoi elementi.
Lezione 11: Bordi
I bordi possono essere usati per molte cose, per esempio come elemento decoratico o per sottolineare una
separazione fra due oggetti. I CSS ti forniscono opzioni infinite nell'utilizzo dei bordi nelle tue pagine.





border-width
border-color
border-style
esempi di definizioni di bordi
border
Spessore dei bordi [border-width]
Lo spessore dei bordi viene definito con la proprietà border-width, che può avere valore thin (sottile),
medium (medio), e thick (spesso), o un valore numerico indicato in pixel. La figura sotto illustra come:
Colore dei bordi [border-color]
La proprietà border-color definisce il colore del bordo. I valori sono i normali valori per i colori, come per
esempio "#123456", "rgb(123,123,123)" o "yellow".
Tipi di bordi [border-style]
E' possibile scegliere fra diversi tipi di bordi. Sotto sono mostrati 8 diversi tipi di bordi così come vengono
interpretati da Internet Explorer 5.5. Tutti gli esempi sono mostrati con colore "gold" e spessore "thick", ma
possono essere chiaramente mostrati con altri colori e altri spessori.
Quando non vuoi nessun bordo puoi usare i valori none o hidden.
Esempi di definizione di bordi
Le tr proprietà descritte sopra possono essere messe insieme in ogni elemento e produrre pertanto bordi
diversi. Per mostrare questo vedremo un documento dove vengono abbiamo definito bordi diversi per <h1>,
<h2>, <ul> e <p>. Il risultato potrebbe non essere così gradevole ma mostra bene alcune delle molte
possibilità:
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p{
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}

Visualizza l'esempio
E' possile definire anche delle proprietà speciali per i bordi top-, bottom-, right- o left-. L'esempio sotto mostra
come:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}

Visualizza l'esempio
Raggruppamento [border]
Come abbiamo fatto anche per altri elementi, è possibile raggruppare in una molte proprietà usando border.
Vediamo come fare con un esempio:
p{
border-width: 1px;
border-style: solid;
border-color: blue;
}
Può essere raggruppato in:
p{
border: 1px solid blue;
}
Riepilogo
In questa lezione hai imparato le infinite opzioni che i CSS ti offrono quando utilizzi i bordi nelle pagine.
Nella prossima lezione vedremo come definire le dimensioni del modello box - height e width.
Lezione 12: Height e width
Fino ad ora non ci siamo preoccupati molto delle dimensioni degli elementi con cui abbiamo lavorato. In
questa lezione vedremo come si possono definire facilmente l'altezza e la larghezza di un elemento.


width
height
Definire la larghezza [width]
Con la proprietà width- puoi definire la larghezza di un elemento.
L'esempio semplice riportato sotto ci fornisce un contenitore all'interno del quale è possibile digitare del
testo:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}

Visualizza l'esempio
Definire l'altezza [height]
Nota come nell'esempio sopra l'altezza del contenitore viene definita dallo stesso contenuto. Con la proprietà
height puoi definire tu stesso l'altezza del contenitore. Come esempio proviamo a fare un contenitore alto
500px:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}

Visualizza l'esempio
Riepilogo
Le Lezioni 9, 10, 11 e 12 ti hanno introdotto al modello box dei CSS. Come potrai vedere il modello box ti
fornisce molte nuove opzioni. Fino ad ora potresti aver usato delle tabelle in HTML per creare il tuo layout,
ma con i CSS e il modello box adesso dovresti essere capace di costruire layout più eleganti e precisi,
conformi alle raccomandazioni del W3C.
Lezione 13: Elementi flottanti (floats)
Un elemento può flottare a destra o a sinistra usando la proprietà float. Questo vuol dire che il box e il suo
contenuto flotttano entrambi a destra o a sinistra del documento (o del box che li contiene) (vedi la lezione 9
per una descrizione del modello box). La figura che segue illustra il principio:
Se per esempio vogliamo avere un testo che si adagia intorno all'immagine, il risultato dovrebbe essere
come quello che segue:
Come si fa?
Il codice HTML dell'esempio sopra appare così:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
Per avere una immagine flottante a sinistra e il testo che la circonda, devi solo definire l'ampiezza (width) del
box che circonda l'immagine e quindi fissare a left la proprietà float:
#picture {
float:left;
width: 100px;
}

Visualizza l'esempio
Un altro esempio : colonne
La proprietà float può essere usata anche per le colonne di un documento. Per creare le colonne devi
semplicemente strutture le stesse colonne nel codice HTML con l'elemento <div>, come mostrato di seguito:
<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</div>
<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>
Ora definisce la larghezza desiderata delle colonne per esempio al 33%, dopodichè, fissa semplicemente la
proprietà float per ogni colonna a left:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}

Visualizza l'esempio
float può assumere i seguenti valori left, right o none.
La proprietà clear
La proprietà clear viene usata per controllare come si dovrebbero comportare gli elementi che seguono
elementi flottanti.
Per default gli elementi successivi si muovono in modo da riempire lo spazio disponibile lasciato libero
quando un box viene flottato da un lato. Guarda l'esempio sotto dove il testo si muove automaticamente
accanto all'immagine di Bill Gates.
La proprietà clear può assumere i valori left, right, both o none. Il principio è che, se per esempio clear è
fissato a both per un box, il bordo superiore del box starà sempre sotto il bordo inferiore del possibile box
flottante che viene sopra.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
Per evitare che il testo flotti vicino alla figura possiamo aggiungere:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}

Visualizza l'esempio
Riepilogo
La proprietà float viene usata in molte situazioni, spesso insieme al posizionamento. Nella prossima lezione
vedremo in dettaglio come posizioanre un box, sia in maniera relativa che assoluta.
Lezione 14: Posizionamento degli elementi
Con il posizioanmento del CSS puoi sistemare un elemento esattamente dove vuoi all'interno della pagina.
Insieme alla proprietà float (vedi la lezione 13), il posizionamento ti permette molte possibilità per creare un
layout preciso e avanzato.
In questa lezione discuteremo:



del principio del posizionamento nei CSS
del p osizionamento relativo
del p osizionamento relativo
Il principio del posizionamento nei CSS
Immagina una finestra di browser come un sistema di coordinate:
Il principio alla base del posizionamento è che puoi posizionare ciascun box in qualsiasi posto del sistema di
coordinate.
Diciamo che vogliamo posizionare un titolo. Usando il modello box (vedi la lezione 9) il titolo apparirà come
segue:
Se vogliamo posizionare questo titolo a 100px di distanza dal bordo superiore del documento e a 200px di
distanza dal bordo sinistro, dovremmo scrivere il seguente codice CSS:
h1 {
position:absolute;
top: 100px;
left: 200px;
}
Il risultato sarà il seguente:
Come puoi vedere il posizionamento dei CSS è una tecnica molto precisa per sistemare gli elementi. E'
molto più facile che cercare di usare tabelle, immagini trasparenti o altre cose.
Posizionamento assoluto
Un elemento posizionato in maniera assoluta non avrò nessuno spazio nell documento. Questo significa che
non lascia nessuno spazio dopo che è stato posizionato.
Per posizionare un elemento in maniera assoluta la proprietà position deve avere valore absolute. In
seguito puoi usare proprietà left, right, top, e bottom per sistemare i box.
Come esempio di posizionamento assoluto abbiamo scelto di sistemare 4 box in ciascun angolo del
documento:
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}

Visualizza l'esempio
Posizionamento relativo
Per posizioanre un elemento in maniera relativa la proprietà position deve avere valore relative. La
differenza tra il posizionamento assoluto e quello relativo è su come viene calcolata la posizione.
La posizione di un elemento posizionato in maniera relativa viene calcolato dalla sua posizione originale
nel documento. Questo significa che sposti l'elemento a destra, a sinistra, in alto o in basso. In questo un
elemento avrà sempre uno spazio nel documento dopo il suo posizionamento.
Come esempio di posizionamento relativo cerchiamo di posizionare tre immagini in relazione alla loro
posizione originaria nella pagina. Nota come le immagini lasciano dello spazio vuoto nella loro posizione
originaria all'interno del documento:
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}

Visualizza l'esempio
Riepilogo
Nelle due lezioni precedenti hai imparato come far flottare e come posizionare gli elementi. Questi due
metodi ti danno molte possibilità per costruire le tue pagine senza aver bisogno di nessuno dei vecchi
metodi, come le tabelle o le immagini trasparenti. Usa i CSS. Sono molto più precisi, di forniscono molti più
vantaggi e sono anche molto semplici da mantenere.
Lezione 15: Layer su layer con lo z-index (Layer)
I CSS lavorano su tre dimensioni - altezza, larghezza e profondità. Abbiamo già visto le prime due
dimensioni nella precedente lezione. In questa lezione impareremo come fare in modo che diversi elementi
diventino un layer. In breve questo fornisce l'ordine con cui gli elementi si sovrappongono uno sull'altro.
A questo proposito assegna ad ogni elemento un numero (z-index). Il sistema è che un elemento con il
numero più alto si sovrappone all'elemento con numero inferiore.
Diciamo che stiamo giocando a poker e che abbiamo una scala reale. La nostra mano può essere
presentata in modo che ogni carta riceva uno z-index:
In questo caso i numeri si seguono uno dopo l'altro (1-5) ma lo stesso risultato si potrebbe ottenere usando 5
numeri diversi. La cosa importante è la sequenza cronologica dei numeri (l'ordine).
Il codice nell'esempio delle carte sarà così:
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}

Visualizza l'esempio
Il metodo è relativamente semplice ma le possibilità sono tantissime. Puoi posizionare le immagini sul testo o
il testo sopra il testo, ecc.
Riepilogo
I layer possono essere usati in molte situazioni. Per esempio cerca di usare z-index per creare effetti nei titoli
invece di fare delle immagini. Da una parte è più veloce caricare del testo e dall'altra fornisce una più alta
potenzialità di essere considerato da un motore di ricerca.
Lezione 16: Standard web e validazione
W3C sta per World Wide Web Consortium, che è una organizzazione indipendente che gestisce gli standard
su web (cioè HTML, CSS, XML e molti altri). Microsoft, The Mozilla Foundation e molte altre organizzazioni
fanno parte del W3C e concordano sugli sviluppi futuri degli standard.
Se hai già lavorato un po' come web designer, probabilmente sai quanto possono essere grandi le differenze
di presentazione di una pagina tra un browser e l'altro. Creare pagine web che possono essere visualizzate
in Mozilla, Internet Explorer, Opera e il resto dei browser esistenti, può essere molto frustrante e far perdere
un sacco di tempo.
L'idea di avere degli standard è quella di accettare un denominatore comune su come utilizzare le tecnologie
web. Questo significa che osservando gli standard uno sviluppatore web ha la certezza che quello che sta
facendo funzionerà in modo più appropriato nella maggior parte delle diverse piattaforme. Pertanto noi ti
raccomandiamo di appoggiarti al lavoro svolto dal W3C e di validare i tuoi CSS in modo da osservare
sempre gli standard.
Il validatore per i CSS
Per facilitare l'osservanza degli standard per i CSS, il W3C ha creato un validatore che legge il tuo foglio di
stile e ti ritorna una lista di errori o avvertimenti, nel caso in cui il tuo CSS non sia stato validato.
Per facilitare la validazione del tuo foglio di stile puoi direttamente collegarti da questa pagina web. Nello
spazio sotto sostituisci semplicemente la URL con la URL del tuo foglio di stile e clicca il pulsante per
validare. Sarai quindi informato dal sito del W3C se sono stati trovati errori.
http://w w w .ht
Clicca per validare il foglio di stile
Se il validatore non trova nessun errore, ti verrà mostrata la figura riportata di seguito, che puoi inserire sul
tuo sito web come testimonianza del fatto che stai usando un codice validato:
Il validatore si trova anche a questo indirizzo: http://jigsaw.w3.org/css-validator/