Esempi dimostrativi delle funzionalità di alcune proprietà per i bordi:

<div>
Il bordo di questo...
</div>

div{
width:200px;
border:1px dashed #004283;
background-color:#fc6;
padding:1em;
}

div{
width:200px;
background-color:#fc6;
padding:1em;
border-right:2px solid #c00;
}

border

La proprietà border viene utilizzata per definire il bordo di ogni singolo lato.
La proprietà border può definire sinteticamente con una sola dichiarazione il colore ( border-color ), la larghezza ( border-width ) e lo stile ( border-style ).

div{
border: 1em dotted #ccc;
}

In questo esempio il tag <div> avrà tutti e quattro i bordi costituiti da una linea punteggiata ( dotted ) di colore grigio ( #ccc ) spessa 1em .

border-collapse

La proprietà border-collapse è utilizzata per eliminare lo spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella.
La proprietà border-collapse ammette 2 valori:

• separate (le celle sono separate);
• collapse (le celle sono adiacenti e i bordi collassano).

table{
border-collapse: collapse;
}
td{
border: 1em dotted #ccc;
}

border-color

La proprietà border-color è utilizzata per impostare il colore di ogni singolo lato.

div{
border-color: #ccc;
}

In questo esempio il tag <div> avrà tutti e 4 i bordi costituiti da una linea continua di colore grigio ( #ccc ).

border-spacing

La proprietà border-spacing è utilizzata per impostare lo spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella. Tale spazio può essere impostato tramite misure di lunghezza.

table{
border-spacing: 0.25em 0.5em;
}

In questo esempio lo spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella è pari a 0.25em 0.5em .

border-style

La proprietà border-style definisce lo stile di ogni singolo lato.
La proprietà border-style può assumere i seguenti valori:

• none (non definisce nessun bordo);
• hidden (usato con le tabelle, ha lo stesso effetto di none ).
  
• dotted (definisce una linea punteggiata);
• dashed (definisce una linea tratteggiata);
• solid (definisce una linea continua singola);
• double (definisce una doppia linea continua);
• groove (definisce il bordo scavato);
• ridge (definisce il bordo sbalzato).
• inset (definisce il bordo incastonato).
  L'effetto grafico equivale a un pulsante premuto;
• outset (definisce l'effetto opposto a inset ).
  L'effetto grafico equivale a un pulsante non ancora premuto.

div{
border-style: dotted;
}

In questo esempio al tag <div> viene applicato un bordo con una linea punteggiata.

border-top

La proprietà border-top viene utilizzata per definire il bordo superiore di un elemento.
La proprietà border-top può definire sinteticamente con una sola dichiarazione il colore ( border-color ), la larghezza ( border-width ) e lo stile ( border-style ).

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

In questo esempio al tag <div> viene applicato un bordo superiore di colore nero ( black ) con linea continua ( solid ) di spessore 1px .

border-top-color

La proprietà border-top-color viene utilizzata per definire il colore del bordo superiore di un elemento.

div{
border-top-color: #ccc;
}

In questo esempio al tag <div> viene applicato un bordo superiore di colore grigio ( #ccc ).

border-top-style

La proprietà border-top-style viene utilizzata per definire lo stile del bordo superiore di un elemento.

div{
border-top-style: dotted;
}

In questo esempio al tag <div> viene applicato un bordo superiore con una linea punteggiata.

border-top-width

La proprietà border-top-width viene utilizzata per impostare la larghezza o spessore del bordo superiore di un elemento.
La proprietà border-top-width può assumere i seguenti valori:

• thin (definisce una linea sottile);
• medium (definisce una linea media).
  Questo è il valore predefinito;
• thick (definisce una linea più intensa);
• <lunghezze> (l'intensità della linea è stabilita in px,em,cm , etc.).

div{
border-top-width: thin;
}

In questo esempio al tag <div> viene applicato un bordo superiore con una linea sottile.

border-width

La proprietà border-width viene utilizzata per definire la larghezza o spessore di ogni singolo lato.
La proprietà border-width può assumere i seguenti valori:

• thin (definisce una linea sottile);
• medium (definisce una linea media).
  Questo è il valore predefinito;
• thick (definisce una linea più intensa);
• <lunghezze> (l'intensità della linea è stabilita in px,em,cm , etc.).

div
border-width: 3px thin 1em 3px;
}

In questo esempio al tag <div> viene applicato:

• un bordo superiore con spessore 3px;
• un bordo destro con spessore sottile ( thin );
• un bordo inferiore con spessore di 1em ;
• un bordo sinistro con spessore 3px ;

border-bottom

La proprietà border-bottom viene utilizzata per definire il bordo inferiore di un elemento.
La proprietà border-bottom può definire sinteticamente con una sola dichiarazione il colore ( border-color ), la larghezza ( border-width ) e lo stile ( border-style ).

div{
border-bottom: 1px dashed black;
}

In questo esempio al tag <div> viene applicato un bordo inferiore di colore nero ( black ) con linea tratteggiata ( dashed ) di spessore 1px .

border-bottom-color

La proprietà border-bottom-color viene utilizzata per definire il colore del bordo inferiore di un elemento.

div{
border-bottom-color: green;
}

In questo esempio al tag <div> viene applicato un bordo inferiore di colore verde ( green ).

border-bottom-style

La proprietà border-bottom-style viene utilizzata per definire lo stile del bordo inferiore di un elemento.

div{
border-bottom-style: dashed;
}

In questo esempio al tag <div> viene applicato un bordo inferiore con una linea tratteggiata.

border-bottom-width

La proprietà border-bottom-width viene utilizzata per impostare la larghezza o spessore del bordo inferiore di un elemento.
La proprietà border-bottom-width può assumere i seguenti valori:

• thin (definisce una linea sottile);
• medium (definisce una linea media).
  Questo è il valore predefinito;
• thick (definisce una linea più intensa);
• <lunghezze> (l'intensità della linea è stabilita in px,em,cm , etc.).

div{
border-bottom-width: 2px;
}

In questo esempio al tag <div> viene applicato un bordo inferiore di spessore 2px .

border-left

La proprietà border-left viene utilizzata per definire il bordo sinistro di un elemento.
La proprietà border-left può definire sinteticamente con una sola dichiarazione il colore ( border-color ), la larghezza ( border-width ) e lo stile ( border-style ).

div{
border-left: 2px dotted red;
}

In questo esempio al tag <div> viene applicato un bordo sinistro di colore rosso ( red ) con linea punteggiata ( dotted ) di spessore 2px .

border-left-color

La proprietà border-left-color viene utilizzata per definire il colore del bordo sinistro di un elemento.

div{
border-left-color: blue;
}

In questo esempio al tag <div> viene applicato un bordo sinistro di colore blu ( blue ).

border-left-style

La proprietà border-left-style viene utilizzata per definire lo stile del bordo sinistro di un elemento.

div{
border-left-style: solid;
}

In questo esempio al tag <div> viene applicato un bordo sinistro con linea continua singola.

border-left-width

La proprietà border-left-width viene utilizzata per impostare la larghezza o spessore del bordo sinistro di un elemento.
La proprietà border-left-width può assumere i seguenti valori:

• thin (definisce una linea sottile);
• medium (definisce una linea media).
  Questo è il valore predefinito;
• thick (definisce una linea più intensa);
• <lunghezze> (l'intensità della linea è stabilita in px,em,cm , etc.).

div{
border-left-width: 1em;
}

In questo esempio al tag <div> viene applicato un bordo sinistro di spessore 1em .

border-right

La proprietà border-right viene utilizzata per definire il bordo destro di un elemento.
La proprietà border-right può definire sinteticamente con una sola dichiarazione il colore ( border-color ), la larghezza ( border-width ) e lo stile ( border-style ).

div{
border-right: 2px dashed black;
}

In questo esempio al tag <div> viene applicato un bordo destro di colore nero ( black ) con linea tratteggiata ( dashed ) di spessore 2px .

border-right-color

La proprietà border-right-color viene utilizzata per definire il colore del bordo destro di un elemento.

div{
border-right-color: red;
}

In questo esempio al tag <div> viene applicato un bordo destro di colore rosso ( red ).

border-right-style

La proprietà border-right-style viene utilizzata per definire lo stile del bordo destro di un elemento.

div{
border-right-style: solid;
}

In questo esempio al tag <div> viene applicato un bordo destro con linea continua singola.

border-right-width

La proprietà border-right-width viene utilizzata per impostare la larghezza o spessore del bordo destro di un elemento.
La proprietà border-right-width può assumere i seguenti valori:

• thin (definisce una linea sottile);
• medium (definisce una linea media).
  Questo è il valore predefinito;
• thick (definisce una linea più intensa);
• <lunghezze> (l'intensità della linea è stabilita in px,em,cm , etc.).

div{
border-right-width: 2px;
}

In questo esempio al tag <div> viene applicato un bordo destro di spessore 2px .

Esempi dimostrativi delle funzionalità di alcune proprietà per i caratteri:

• Esempio: proprietà per i caratteri

<div>
Questo testo è in corsivo...
</div>

div{
font-family:Arial, Helvetica;
font-size:1em;
font-weight:bold;
font-style:italic;
}

div{
font: italic bold 1em
Arial, Helvetica;
}

font

La proprietà font è una proprietà a sintassi abbreviata con cui si può definire sinteticamente e con una sola dichiarazione:

• font-style;
• font-variant;
• font-weight;
• font-size;
• font-family.

La proprietà font permette di impostare anche l'interlinea. Tutte le proprietà che non vengono specificate assumono implicitamente il valore normal .

body{
font: italic bold 1.5em Arial,
Helvetica, Sans-serif;
}

In questo esempio il carattere dell'elemento body è impostato in Arial, Helvetica, San-serif in corsivo ( italic ) e grassetto ( bold ) e con dimensione 1.5em .

font-family

La proprietà font-family accetta più tipi di caratteri, separati da una virgola, per consentire scelte alternative qualora il carattere scelto non fosse disponibile per il programma utente.
L'ultimo valore dovrebbe essere sempre una famiglia generica, così da ottenere comunque un carattere il più possibile simile a quello prescelto.
Le principali famiglie generiche sono:

• serif
• sans-serif;
• monospaced .

body{
font-family: courier, serif;
}

font-size

La proprietà font-size consente di impostare la dimensione del carattere.
La proprietà font-size può assumere i seguenti valori:

• x-small, x-small, small, medium, large, x-large, xx-large (impostano la dimensione del carattere a partire dalla più piccola alla più grande);
• smaller (imposta la dimensione del carattere inferiore a quella dell'elemento padre);
• larger (imposta la dimensione del carattere superiore a quella dell'elemento padre);
• <lunghezza> (imposta una dimensione fissa del carattere);
• % (imposta la dimensione del carattere in percentuale rispetto a quella dell'elemento padre).

p{
font-size: 10px;
}

In questo esempio la dimensione del carattere relativa all'elemento p è impostata a 10 pixel.

font-style

La proprietà font-style consente di impostare lo stile del carattere.
La proprietà font-style può assumere i seguenti valori:

• normal (valore predefinito);
• italic (corsivo);
• oblique (obliquo);

p{
font-style: italic;
}

In questo esempio lo stile del carattere associato all'elemento p è corsivo ( italic ).

font-variant

La proprietà font-variant consente di impostare il formato del carattere.
La proprietà font-variant può assumere i seguenti valori:

• normal (valore predefinito);
• small-caps (maiuscolo);

div{
font-variant: small-caps;
}

In questo esempio lo stile del carattere associato all'elemento div è maiuscolo.

font-weight

La proprietà font-weight consente di impostare la formattazione del carattere.
La proprietà font-weight può assumere i seguenti valori:

• normal (valore predefinito);
• bold (grassetto);
• bolder (più grassetto);
• lighter (sottile);
• 100, 200, 300, 400, 500, 600, 700, 800, 900 (dal più sottile al più grassetto).

div{
font-weight: bold;
}

In questo esempio lo stile del carattere associato all'elemento div è grassetto.

content

La proprietà content specifica un contenuto che può essere visualizzato prima o dopo un elemento. Usato con gli pseudo-elementi :before e :after .
La proprietà content ammette diversi tipi di valori:

• string ;
• url ;
• counter ( nome ), counter ( nome, list-style-type ), counters ( nome, string ), counters ( name, string, list-style-type );
• attr(X);
• open-quote ;
• close-quote ;
• no-open-quote ;
• no-close-quote .

acronym:after, abbr:after{
content:" " url(titolo.gif);
}

In questo esempio tramite l'url è possibile indicare oggetti da utilizzare come contenuto per gli pseudo-elementi :before e :after .
Fornendo come url il riferimento a un'immagine è possibile inserire un'icona.

counter-increment

La proprietà counter-increment fa avanzare il contatore di una quantità pari a <numero>.

h1.before{
content: 'Capitolo ' counter(Capitolo) '. ';
counter-increment: capitolo;
}

counter-reset

La proprietà counter-reset inizializza il contatore al valore indicato da <numero>.

h1.before{
content: 'Capitolo ' counter(Capitolo) '. ';
counter-increment: capitolo;
counter-reset: paragrafo;
}

quotes

La proprietà quotes imposta il tipo di virgolette utilizzato per le citazioni.

q:lang(en){
quotes: '"' '"' "'" "'";
}

outline

La proprietà outline è una proprietà a sintassi abbreviata con cui si può definire sinteticamente e con una sola dichiarazione tutti i valori per i contorni degli elementi.

button{
outline: red solid thin;
}

In questo esempio all'elemento button viene applicata una cornice sottile ( thin ) con linea singola continua ( solid ) di colore rosso ( red ).

outline-color

La proprietà outline-color viene utilizzata per definire il colore della cornice da applicare ad un elemento.
La proprietà outline-color ammette i seguenti valori:

• invert (esegue un'inversione di colore);
• color (il colore può essere specificato tramite un nome, un valore rgb o un valore esadecimale);

button{
outline-color: red;
}

In questo esempio all'elemento button viene applicata una cornice di colore rosso ( red ).

outline-style

La proprietà outline-style viene utilizzata per definire lo stile della cornice da applicare ad un elemento.
La proprietà outline-style ammette i seguenti valori:

• none (non definisce cornici);
• dotted (definisce una cornice punteggiata);
• dashed (definisce una cornice tratteggiata);
• solid (definisce una cornice con linea singola continua);
• double (definisce una cornice con linea doppia continua);
• groove (definisce una cornice scavata);
• ridge (definisce una cornice sbalzata);
• inset (definisce una cornice incastonata);
• outset (definisce l'effetto opposto a inset).

button{
outline-style: solid;
}

In questo esempio all'elemento button viene applicato una cornice con linea continua singola continua ( solid ).

outline-width

La proprietà outline-width viene utilizzata per definire lo spessore della cornice da applicare ad un elemento.
La proprietà outline-width ammette i seguenti valori:

• thin (definisce una cornice con linea sottile);
• medium (definisce una cornice con linea media);
• thick (definisce una cornice con linea intensa);
• < lunghezza > (consente di definire l'intensità della linea).

button{
outline-width: thin;
}

In questo esempio all'elemento button viene applicata una cornice con linea sottile ( thin ).

Esempi dimostrativi delle funzionalità di alcune proprietà per la dimensione dei contenuti:

<p>L'interlinea di....</p>
<p>L'interlinea di....</p>

p{
line-height:1.5em;
}

<div>
La larghezza dell'area...
</div>

div{
width:200px;
background-color:#fc6;
padding:1em;
border:1px solid #004283;
}

height

La proprietà height specifica l'altezza dei contenuti per gli elementi a livello di blocco.
La proprietà height ammette i seguenti valori:

• <lunghezza> ( px, em, cm , etc.);
• % (valori percentuali);
• auto (valore predefinito);

img{
height: 200px;
}

In questo esempio l'altezza dei contenuti per l'elemento img è pari a 200px .

line-height

La proprietà line-height serve per impostare l'interlinea.
La proprietà line-height può essere specificata tramite i seguenti valori:

• normal (imposta una distanza ragionevole tra le righe);
• <numero> (imposta un numero che sarà moltiplicato per la dimensione corrente del carattere);
• <lunghezza> (imposta una distanza fissa tra le righe);
• % (imposta una distanza in percentuale tra le righe).

p{
line-height: 10pt;
}

In questo esempio viene impostata al paragrafo un'interlinea pari a 10pt .

max-height

La proprietà max-height specifica l'altezza massima di un elemento.
La proprietà max-height ammette i seguenti valori:

• none (non definisce limiti sull'altezza massima di un elemento);
• <lunghezza> (definisce l'altezza massima di un elemento);
• % (definisce in percentuale l'altezza massima di un elemento);

p{
max-height: 50px;
}

In questo esempio l'altezza massima dell'elemento p è stabilita in 50px .

max-width

La proprietà max-width specifica la larghezza massima di un elemento.
La proprietà max-width ammette i seguenti valori:

• none (non definisce limiti sulla larghezza massima di un elemento);
• <lunghezza> (definisce la larghezza massima di un elemento);
• % (definisce in percentuale la larghezza massima di un elemento);

h2{
max-width: 300px;
}

In questo esempio l'altezza massima dell'elemento h2 è stabilita in 300px .

min-height

La proprietà min-height specifica l'altezza minima di un elemento.
La proprietà min-height ammette i seguenti valori:

• <lunghezza> (definisce l'altezza minima di un elemento);
• % (definisce in percentuale l'altezza minima di un elemento);

p{
min-height: 10px;
}

In questo esempio l'altezza minima dell'elemento p è stabilita in 10px .

min-width

La proprietà min-width specifica la larghezza minima di un elemento.
La proprietà min-width ammette i seguenti valori:

• <lunghezza> (definisce la larghezza massima di un elemento);
• % (definisce in percentuale la larghezza massima di un elemento);

h2{
min-width: 50px;
}

In questo esempio la larghezza minima dell'elemento h2 è stabilita in 50px .

width

La proprietà width specifica la larghezza dei contenuti per gli elementi a livello di blocco
La proprietà width ammette i seguenti valori:

• auto (valore predefinito);
• <lunghezza> (definisce la larghezza di un elemento in pixel,em , etc.);
• % (definisce in percentuale la larghezza di un elemento);

div{
width: 200px;
}

In questo esempio la larghezza dell'elemento div è stabilita in 200px .

Esempi dimostrativi delle funzionalità di alcune proprietà per le liste:

<ul>
<li>lista 1</li>
<li>lista 2</li>
<li>lista 3</li>
</ul>

ul.nome_classe li{
list-style-type: disc;
color:#900;
}

ul.nome_classe li{
list-style-type: circle;
color:#900;
}

ul.nome_classe li{
list-style-type: square;
color:#900;
}

ul.nome_classe li{
list-style-type: decimal;
color:#900;
}

<ul>
<li>lista 1</li>
<li>lista 2</li>
<li>lista 3</li>
</ul>

ul{
list-style-image : url(lista.gif);
}

list-style

La proprietà list-style è una proprietà a sintassi abbreviata con cui si può definire sinteticamente e con una sola dichiarazione tutti i valori per un'elenco listato.

ul{
list-style: disc outside;
}

In questo esempio i valori della proprietà list-style assegnano all'elemento ul un punto elenco caratterizzato da un cerchietto ( disc ) che si colloca alla sinistra del testo ( outside ).

list-style-image

La proprietà list-style-image sostituisce al punto elenco un'immagine.
La proprietà list-style-image assume i seguenti valori:

• none (non sarà visualizzata nessuna immagine);
• url (indica il percorso dell'immaginme da associare all'elenco).

ol{
list-style-image: url(img.gif);
}

In questo esempio l'url associerà all'elenco un'immagine.

list-style-position

La proprietà list-style-position definisce la posizione del punto elenco.
La proprietà list-style-position assume i seguenti valori:

• inside (indenta il punto elenco e il testo);
• outside (mantiene il punto elenco alla sinistra del testo).

ol{
list-style-position: inside;
}

In questo esempio il valore assegnato alla proprietà list-style-position indenta il punto elenco e il testo.

list-style-type

La proprietà list-style-type imposta il tipo di punto elenco.
La proprietà list-style-type assume i seguenti valori:

• none (nessun punto elenco);
• disc (cerchietto ripieno);
• circle (cerchietto);
• square (quadrato);
• decimal (numero);
• decimal-leading-zero (numero che inizia con la doppia cifra - 01, 02);
• lower-roman (numero romano piccolo - i, ii, iii, iv, v, etc.);
• upper-roman (numero romano grande - I, II, III, IV, V, etc.);
• lower-alpha (carattere minuscolo - a, b, c, d, e, etc.);
• upper-alpha (carattere maiuscolo - (A, B, C, D, E, etc.);
• hebrew (carattere ebraico).
  
• armenian (carattere armeno).
  
• georgian (carattere georgiano).
  
• cjk-ideographic (carattere ideografico).
  
• hiragana, katakana, hiragana-iroha, katakana-iroha
  

ul{
list-style-type: upper-roman;
}

In questo esempio il valore della proprietà list-style-type assegna all'elemento ul un punto elenco caratterizzato da numeri romani grandi .

Esempi dimostrativi delle funzionalità di alcune proprietà per i margini:

<div class="nome_classe">
div con margin-bottom
</div>

div.nome_classe{
background-color:#eee;
width: 300px;
border:1px solid #999;
margin-bottom: 30px;
}

div.nome_classe{
background-color:#eee;
width: 300px;
border:1px solid #999;
margin-left: 30px;
}

div.nome_classe{
background-color:#eee;
width: 300px;
border:1px solid #999;
margin-top: 30px;
}

div.nome_classe{
background-color:#eee;
width: 300px;
border:1px solid #999;
margin-right: 30px;
}

margin

La proprietà margin è una proprietà a sintassi abbreviata con cui si può definire sinteticamente con una sola dichiarazione:

• margin-top ;
• margin-right ;
• margin-bottom ;
• margin-left .

h1{
margin: 10px;
}

In questo esempio tutti e quattro i margini dell'elemento <h1> saranno di 10 pixel.

margin-bottom

La proprietà margin-bottom definisce il margine inferiore di un elemento.
La proprietà margin-bottom ammette i seguenti valori:

• auto (valore predefinito);
• <lunghezza> (definisce un valore fisso del margine);
• % (definisce un valore in percentuale del margine).

Sono consentiti anche valori negativi.

h2{
margin-bottom: -20px;
}

In questo esempio il valore del margine inferiore è negativo.

margin-left

La proprietà margin-left definisce il margine sinistro di un elemento.
La proprietà margin-left ammette i seguenti valori:

• auto (valore predefinito);
• <lunghezza> (definisce un valore fisso del margine);
• % (definisce un valore in percentuale del margine).

Sono consentiti anche valori negativi.

h1{
margin-left: 10px;
}

In questo esempio il valore del margine sinistro è 10 pixel.

margin-right

La proprietà margin-right definisce il margine destro di un elemento.
La proprietà margin-right ammette i seguenti valori:

• auto (valore predefinito);
• <lunghezza> (definisce un valore fisso del margine);
• % (definisce un valore in percentuale del margine).

Sono consentiti anche valori negativi.

h1{
margin-right: 10px;
}

In questo esempio il valore del margine destro è 10 pixel.

margin-top

La proprietà margin-top definisce il margine superiore di un elemento.
La proprietà margin-top ammette i seguenti valori:

• auto (valore predefinito);
• <lunghezza> (definisce un valore fisso del margine);
• % (definisce un valore in percentuale del margine).

Sono consentiti anche valori negativi.

h1{
margin-top: 10px;
}

In questo esempio il valore del margine superiore è 10 pixel.

Esempi dimostrativi delle funzionalità di alcune proprietà per il padding:

<div class="nome_classe">
div senza padding
</div>

div.nome_classe{
background-color:#eee;
width: 300px;
border:1px solid #999;
}

div.nome_classe{
background-color:#eee;
width: 300px;
border:1px solid #999;
padding-bottom: 30px;
}

div.nome_classe{
background-color:#eee;
width: 300px;
border:1px solid #999;
padding-left: 30px;
}

div.nome_classe{
background-color:#eee;
width: 300px;
border:1px solid #999;
padding-top: 30px;
}

div.nome_classe{
background-color:#eee;
width: 300px;
border:1px solid #999;
padding-right: 30px;
}

div.nome_classe{
background-color:#eee;
width: 300px;
border:1px solid #999;
margin:0.3em 0;
padding:1.5em 0.7em 0.7em 0.8em;
}

padding

La proprietà padding (imbottitura) è una proprietà a sintassi abbreviata che viene utlizzata per definire lo spazio che deve essere lasciato tra i contenuti di un elemento e il suo bordo o il suo margine.
Il padding può essere specificato per ogni singolo lato attraverso le proprietà:

• padding-top;
• padding-right;
• padding-bottom;
• padding-left .

h1{
padding: 10px;
}

In questo esempio all'elemento h1 viene applicato un padding di 10 pixel.

padding-bottom

La proprietà padding-bottom viene utilizzata per definire lo spazio che deve essere lasciato tra i contenuti di un elemento e il suo bordo o il suo margine inferiore.
La proprietà padding-bottom ammette i seguenti valori:

• <lunghezza> ( px,em , etc.);
• % (valori percentuali).

h1{
padding-bottom: 10px;
}

In questo esempio all'elemento h1 viene applicato un padding inferiore di 10px.

padding-left

La proprietà padding-left viene utilizzata per definire lo spazio che deve essere lasciato tra i contenuti di un elemento e il suo bordo o il suo margine sinistro.
La proprietà padding-left ammette i seguenti valori:

• <lunghezza> ( px,em , etc.);
• % (valori percentuali).

h1{
padding-left: 10px;
}

In questo esempio all'elemento h1 viene applicato un padding sinistro di 10px.

padding-right

La proprietà padding-right viene utilizzata per definire lo spazio che deve essere lasciato tra i contenuti di un elemento e il suo bordo o il suo margine destro.
La proprietà padding-right ammette i seguenti valori:

• <lunghezza> ( px,em , etc.);
• % (valori percentuali).

h1{
padding-right: 10px;
}

In questo esempio all'elemento h1 viene applicato un padding destro di 10px.

padding-top

La proprietà padding-top viene utilizzata per definire lo spazio che deve essere lasciato tra i contenuti di un elemento e il suo bordo o il suo margine superiore.
La proprietà padding-top ammette i seguenti valori:

• <lunghezza> ( px,em , etc.);
• % (valori percentuali).

h1{
padding-top: 10px;
}

In questo esempio all'elemento h1 viene applicato un padding superiore di 10px.

Esempi dimostrativi delle funzionalità di alcune proprietà per il posizionamento degli elementi:

<p>Lorem ipsum mea sale
iisque laoreet ei...</p>
<p class="nome_classe">Lorem
ipsum mea...</p>
<p>Lorem ipsum mea sale iisque
laoreet ei...</p>

p{
border:solid;
padding:0.4em;
background-color:#fc6;
color:#000;
}
p.nome_classe{
position:relative;
left:0.8em;
top:0.5em;
border:solid;
padding:0.4em;
width:500px;
background-color:#fc6;
}

<div>
Questo blocco...
</div>

div{
position:absolute;
left: 272px;
top: 1302px;
background-color:#fc6;
padding:0.4em;
width:350px;
border:solid;
}

<p class="nome_classe1">Lorem
ipsum mea...</p>
<p class="nome_classe2">Lorem
ipsum mea...</p>

p.nome_classe1{
position:relative;
z-index:10;
border:solid;
padding:0.4em;
left:0.8em;
top:0.5em;
width:500px;
background-color:#fc6;
}
p.nome_classe2{
position:relative;
z-index:20;
border:solid;
padding:0.4em;
left:1.5em;
top:-3em;
width:500px;
background-color:#fc6;
}

bottom

La proprietà bottom specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte inferiore dell'elemento e la finestra del browser.
La proprietà bottom ammette i seguenti valori:

• auto (valore predefinito);
• % (imposta la distanza in percentuale);
• < lunghezza > (imposta la distanza in px, cm, etc.).

p{
position: absolute;
bottom: 20px;
}

In questo esempio l'elemento p si sposta 20 pixel sopra la finestra del browser.

clip

La proprietà clip serve ad impostare la forma di un elemento.
La proprietà clip ammette i seguenti valori:

• auto (valore predefinito);
• shape (imposta la forma dell'elemento).

img{
clip: rect(10px, 5px, 10px, 5px);
}

left

La proprietà left specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte sinistra di un elemento e la finestra del browser.

• auto (valore predefinito);
• % (imposta la distanza in percentuale);
• < lunghezza > (imposta la distanza in px, cm, etc.).

p{
position: absolute;
left: 20px;
}

In questo esempio l'elemento p si sposta 20 pixel alla sinistra della finestra del browser.

overflow

Quando un elemento all'interno di un box supera in larghezza la dimensione impostata per il box stesso, il comportamento del programma utente è regolato dalla proprietà overflow .
La proprietà overflow ammette i seguenti valori:

• visible (valore predefinito);
• scroll (indica che il blocco contenitore deve essere fornito di barre di scorrimento);
• auto (indica che il blocco contenitore deve essere fornito di barre di scorrimento se e solo se richieste);
• hidden (indica che il contenuto eccedente deve essere tagliato).

div{
overflow: scroll;
}

In questo esempio il valore scroll indica che il blocco contenitore ( div ) deve essere fornito di barre di scorrimento.

position

La proprietà position consente di alterare la posizione di un blocco nel flusso in cui i diversi elementi sono inseriti.
La proprietà position ammette i seguenti valori:

• static (prevede il normale comportamento dei box all'interno del flusso);
• relative (prevede lo spostamento di un elemento relativamente alla posizione che assume normalmente nel flusso);
• absolute (un blocco posizionato in modo assoluto può essere collocato in un qualsiasi punto della pagina, indipendentemente dalla presenza degli altri elementi all'interno del flusso);
• fixed (lo stesso del posizionamento assoluto con la differenza che i blocchi rimangono ancorati alla posizione iniziale e il riferimento è sempre la finesra del browser).

div{
position:absolute;
left:100px;
top:150px;
}

In questo esempio il box div posizionato in modo assoluto è distanziato 100 pixel da sinistra e 150 pixel dalla parte superiore della finestra del browser.

right

La proprietà right specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte destra di un elemento e la finestra del browser.

• auto (valore predefinito);
• % (imposta la distanza in percentuale);
• < lunghezza > (imposta la distanza in px, cm, etc.).

p{
position: absolute;
right: 20px;
}

In questo esempio l'elemento p si sposta 20 pixel alla destra della finestra del browser.

top

La proprietà top specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte superiore di un elemento e la finestra del browser.

• auto (valore predefinito);
• % (imposta la distanza in percentuale);
• < lunghezza > (imposta la distanza in px, cm, etc.).

p{
position: absolute;
top: 20px;
}

In questo esempio l'elemento p si sposta 20 pixel dalla parte superiore della finestra del browser.

vertical-align

La proprietà vertical-align consente di alterare la reciproca posizione tra testo e immagine.
La proprietà vertical-align ammette i seguenti valori:

• baseline (l'elemento è posizionato sulla linea base dell'elemento padre);
• sub (pedice);
• super (apice);
• top (allinea alla parte estrema superiore della linea);
• text-top (allinea alla parte estrema superiore del carattere dell'elemento padre);
• middle (l'elemento è posizionato alla parte centrale dell'elemento padre);
• bottom (allinea alla parte estrema inferiore della linea)
• text-bottom (allinea alla parte estrema inferiore del carattere dell'elemento padre);
• < lunghezza >
• %

img{
vertical-align: baseline;
}

In questo esempio l'elemento img è posizionato sulla linea base dell'elemento padre.

z-index

La proprietà z-index stabilisce l'ordine di sovrapposizione quando due o più blocchi posizionati in modo relativo (o assoluto o fisso) si sovrappongono.
La proprietà z-index può essere così espressa:

• auto (valore predefinito);
• < numero >.

div1{
position: relative;
z-index:20;
}
div2{
position: relative;
left:1em;
top:-2em;
z-index:10;
}

In questo esempio il blocco div2 si sovrappone al blocco div1 .

Esempi dimostrativi delle funzionalità di alcune proprietà per le pseudo-classi:

<div>
<a href="#">link 1</a>
<a href="#">link 2</a>
</div> 

a:link{
background:transparent;
color:#004283;
}
a:visited{
color:#663300;
background:transparent;
}
a:hover,
a:focus,
a:active{
background:#004283;
color:#fff;
text-decoration:none;
}

<p>1) Primo paragrafo.....</p>
<p>2) Secondo pargrafo: nero</p>
<p>3) Terzo paragrafo: nero</p>

#div1{
color: #000;
}
#div1 p:first-child{
color: #c00;
font-weight: bold;
}

:hover, :focus :active

Le proprietà :hover, :focus e :active sono pseudo-classi dinamiche poichè rispondono ad azioni compiute dall'utente, come il posizionamento del puntatore del mouse sopra un oggetto ( :hover ), la selezione di un elemento ( :focus ), l'attivazione di un oggetto ( :active ).

div a:hover{
color: blue;
text-decoration: underline;
}
div a:active{
color: purple;
text-decoration: underline;
}

In questo esempio al passaggio del mouse il link diventa blue e sottolineato; mentre il tasto sinistro è premuto il link è viola e sottolineato.

:link, :visited

Tramite le pseudo-classi :link e :visited è possibile distinguere un collegamento non ancora visitato da uno già visitato.

div a:link{
color: red;
text-decoration: none;
}
div a:visited{
color: green;
text-decoration: none;
}

La prima regola si applica a tutti i collegamenti non visitati, mentre la seconda regola si applica a tutti i collegamenti già visitati.

:first-child

La pseudo-classe :first-child determina le proprietà di presentazione del primo figlio di ogni occorrenza di un elemento.

Codice HTML:

<div id="div1">
<p>Primo paragrafo.....</p>
<p>Secondo pargrafo: nero</p>
<p>Terzo paragrafo: nero</p>
</div>

CSS:

#div1{
color: black;
font: 12px Verdana, Geneva, Arial, Helvetica;
}
#div1 p:first-child{
color: red;
font-weight: bold;
}

In questo esempio il primo paragrafo sarà rosso e grassetto perchè primo elemento figlio di #div1 , secondo e terzo paragrafo nero.

:lang

La pseudo-classe :lang serve a differenziare i vari elementi in base all'attributo lang e prevede anche che sia specificata anche la lingua indicata nell'attributo stesso.

Codice HTML:

<p lang="en">Questo paragrafo è in
inglese.</p>

CSS:

p:lang(en){
font-weight: bold;
}

Esempi dimostrativi delle funzionalità di alcune proprietà per gli pseudo-elementi:

<p>Lorem ipsum mea sale...</p>

p:first-letter{
font-size:2.3em;
line-height:1em;
padding-right:0.1em;
font-weight:bold;
}

<p>Lorem ipsum...</p>

p:first-line{
font-weight:bold;
color:#930;
}

:first-letter

Lo pseudo-elemento :first-letter consente di dare uno stile speciale alla prima lettera di testo.

p.nomeclasse:first-letter{
font-size: 2em;
}

In questo esempio la prima lettera dell'elemento p.nomeclasse sarà dimensionata in 2em .

:first-line

Lo pseudo-elemento :first-line consente di dare uno stile speciale alla prima linea di testo.

p:first-line{
color: blue;
}

In questo esempio la prima linea dell'elemento del paragrafo sarà di colore blu.

:before

Lo pseudo-elemento :before può essere utilizzato per inserire del contenuto prima di un elemento.

a:before{
content: " [" attr(href) "] ";
}

:after

Lo pseudo-elemento :after può essere utilizzato per inserire del contenuto dopo di un elemento.

a:after{
content: " [" attr(href) "] ";
}

Esempi dimostrativi delle funzionalità di alcune proprietà per gli sfondi:

body{
background-color:#cfc;
}

body{
background-image: url(montreux.jpg);
}

<div class="nome_classe>
<div class="nome_classe2">
<p>box con angolo arrotondato.</p>
</div>
</div>

.nome_classe{
width: 200px;
color: #000;
background:#fc9 url(bottom.gif)
bottom left no-repeat;
}
.nome_classe2{
padding:10px;
}

background

La proprietà background è una proprietà a sintassi abbreviata con cui si può definire sinteticamente e con una sola dichiarazione tutti i valori per lo sfondo.

body{
background: #fff url(img.jpg) 80px 10px
no-repeat fixed;
}

In questo esempio i valori della proprietà background applicano al tag body :

• sfondo bianco con immagine;
• posizionamento dell'immagine a 80 pixel da sinistra e 10 pixel dall'alto;
• immagine di sfondo non ripetuta;
• immagine di sfondo fissa (non scorrevole).

background-attachment

La proprietà background-attachment serve per stabilire se un'immagine posta come sfondo debba o meno scorrere assieme al testo.
Questa proprietà ammette due soli valori: scroll e fixed .
Il valore scroll impone all'immagine di scorrere assieme al testo , mentre il valore fixed fissa la posizione dell'immagine indipendentemente dal testo.

body{
background-image: url(img.jpg);
background-attachment: scroll;
}

In questo esempio l'immagine scorre con il testo.

background-color

La proprietà background-color serve ad applicare il colore di sfondo.
La proprietà background-color può assumere diversi valori:

• un nome (red, green, blue, etc.);
• un valore rgb (255,0,0);
• un valore esadecimale (#cc00cc);
• transparent (il colore dello sfondo è trasparente).

Se ad esempio vogliamo dare uno colore rosso allo sfondo possiamo utilizzare uno dei seguenti metodi :

body{
background-color: red;
}

oppure

body{
background-color: rgb(255,0,0);
}

oppure

body{
background-color: #ff0000;
}

background-image

La proprietà background-image consente di specificare un'immagine di sfondo.
La proprietà background-image accetta 2 valori:

• url (indica il percorso relativo all'immagine);
• none (imposta il valore predefinito, ovvero nessuna immagine).

body{
background-image: url(img.jpg);
}

In questo esempio viene applicato allo sfondo un'immagine.

background-position

La proprietà background-position permette di stabilire la posizione dell'immagine applicata come sfondo.
La proprietà background-position richiede 2 valori:

• left o center o right (per la posizione verticale);
• top o center o bottom (per la posizione orizzontale).

body{
background-image: url(img.jpg);
background-position: top left;
}

In questo esempio l'immagine di sfondo si colloca in alto (posizione orizzontale) a partire da sinistra (posizione verticale).

Con i valori percentuali (%) e con le lunghezze ( px o em ) è possibile specificare la posizione in cui collocare l'immagine di sfondo.

body{
background-image: url(img.jpg);
background-position: 70px 2em;
}

In questo esempio l'immagine di sfondo viene collocata a 70 pixel dal bordo sinistro e a 2em dal bordo superiore.

background-repeat

La proprietà background-repeat stabilisce il modo in cui l'immagine di sfondo viene ripetuta.
La proprietà background-repeat può assumere i seguenti valori:

• repeat (valore predefinito): l'immagine viene ripetuta orizzontalmente e verticalmente;
• repeat-x (l'immagine viene ripetuta solo orizzontalmente);
• repeat-y (l'immagine viene ripetuta solo verticalmente);
• no-repeat : (l'immagine non viene ripetuta e si avrà una sola occorrenza della stessa).

body{
background-image: url(img.jpg);
background-repeat: repeat-x
}

In questo esempio l'immagine viene ripetuta solo orizzontalmente.

Esempi dimostrativi delle funzionalità di alcune proprietà delle tabelle:

<table summary="esempio">
<caption>Tabella</caption>
<thead>
<tr>
<th>cella 1</th>
<th>cella 2</th>
<th>cella 3</th>
<th>cella 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>cella 1.1</td>
<td>cella 1.2</td>
<td>cella 1.3</td>
<td>cella 1.4</td>
</tr>
<tr>
<td>cella 2.1</td>
<td>cella 2.2</td>
<td>cella 2.3</td>
<td>cella 2.4</td>
</tr>
<tr>
<td>cella 3.1</td>
<td>cella 3.2</td>
<td>cella 3.3</td>
<td>cella 3.4</td>
</tr>
<tr>
<td>cella 4.1</td>
<td>cella 4.2</td>
<td>cella 4.3</td>
<td>cella 4.4</td>
</tr>
</tbody>
</table>

table{
margin:1em 0;
border:3px solid #900;
}
td, th{
border:1px solid #900;
padding:0.2em 0.5em;
}

table{
border:3px solid #900;
border-collapse:collapse;
}
td, th{
border:1px solid #900;
padding:0.2em 0.5em;
}

<table summary="esempio">
<caption>Caption</caption>
<thead>
<tr>
<th>cella 1</th>
<th>cella 2</th>
<th>cella 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>cella 1.1</td>
<td>cella 1.2</td>
<td>cella 1.3</td>
</tr>
<tr>
<td>cella 2.1</td>
<td>cella 2.2</td>
<td>cella 2.3</td>
</tr>
</tbody>
</table>

table{
caption-side : bottom;
margin:1em 0;
border:3px solid #900;
}
td, th{
border:1px solid #900;
padding:0.2em 0.5em;
}

border-collapse

La proprietà border-collapse è utilizzata per eliminare lo spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella.
La proprietà border-collapse ammette 2 valori:

• separate (le celle sono separate);
• collapse (le celle sono adiacenti e i bordi collassano).

table{
border-collapse: collapse;
}
td{
border: 1em dotted #ccc;
}

border-spacing

La proprietà border-spacing è utilizzata per impostare lo spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella. Tale spazio può essere impostato tramite misure di lunghezza.

table{
border-spacing: 0.25em 0.5em;
}

In questo esempio lo spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella è pari a 0.25em 0.5em .

caption-side

La proprietà caption-side definisce il lato su cui vogliamo far comparire il titolo della tabella.
La proprietà caption-side ammette i seguenti valori:

• top;
• bottom;
• left;
• right .

table{
caption-side : bottom;
}

In questo esempio il titolo della tabella apparirà in basso.

empty-cells

La proprietà empty-cells gestisce il trattamento delle celle di tabella senza contenuto. Agisce solo su quelle che non presentino al loro interno alcun tipo di markup.
La proprietà empty-cells ammette i seguenti valori:

• show (mostra i bordi della cella);
• hide (i bordi non vengono mostrati e apparirà solo uno spazio vuoto).

td{
empty-cells: <valore>;
}

table-layout

La proprietà table-layout imposta il metodo di layout di una tabella.
La proprietà table-layout ammette i seguenti valori:

• auto (il layout della tabella viene definito automaticamente dal browser);
• fixed (le regole di presentazione sono quelle impostate dall'autore nel CSS).

table{
table-layout: fixed;
width: 400px;
}

In questo esempio con la proprietà table-layout: fixed; definiamo la larghezza della tabella tramite la proprietà width .

Esempi dimostrativi delle funzionalità di alcune proprietà del testo:

<p>
Lorem ipsum mea sale iisque...
</p>

p{
text-align:center;
text-indent:1em;
}

<h4 class="nome_classe">
testo con la proprietàcapitalize
</h4>
<h4 class="nome_classe">
testo con la proprietà uppercase
</h4>
<h4 class="nome_classe">
testo con la proprietà lowercase
</h4>

h4.nome_classe{
text-transform:capitalize;
}
h4.nome_classe{
text-transform:uppercase;
}
h4.nome_classe{
text-transform:lowercase;
}

color

La proprietà color definisce il colore del testo.
Il valore del colore può essere espresso con:

• un < nome >;
• un valore < rgb >;
• un valore esadecimale.

body{
color: red;
}

In questo esempio il colore dell'elemento body è impostato in rosso.

direction

La proprietà direction imposta la direzione del testo.
La proprietà direction ammette i seguenti valori:

• ltr (da sinistra verso destra);
• rtl (da destra verso sinistra).

div{
direction: rtl;
}

In questo esempio la direzione del testo dell'elemento div andrà da destra verso sinistra).

letter-spacing

La proprietà letter-spacing consente di diminuire o aumentare lo spazio bianco tra i caratteri.
La proprietà letter-spacing ammette i seguenti valori:

• normal (definisce uno spazio regolare tra i caratteri);
• < lunghezza > (definisce uno spazio fisso tra i caratteri).

p{
letter-spacing: 12px;
}

In questo esempio lo spazio tra i caratteri dell'elemento p è stabilito in 12 pixel.

text-align

La proprietà text-align consente di allineare il testo.
La proprietà text-align ammette i seguenti valori:

• left (allinea il testo a sinistra);
• right (allinea il testo a destra);
• center (allinea il testo centralmente);
• justify (allinea il testo sia sul lato destro sia sul lato sinistro).

p{
text-align: left;
}

In questo esempio il testo viene allineato a sinistra ( left ).

text-decoration

La proprietà text-decoration aggiunge elementi decorativi al testo.
La proprietà text-decoration ammette i seguenti valori:

• none (definisce il testo normale);
• underline (definisce il testo sottolineato);
• overline (definisce il testo con una barra sopra);
• line-through (definisce il testo barrato);
• blink (definisce il testo lampeggiante).

p{
text-decoration: underline;
}

In questo esempio il testo è sottolineato ( underline ).

text-indent

La proprietà text-indent consente di regolare l'indentazione del testo.
La proprietà text-indent può essere espressa con i seguenti valori:

• < lunghezza > (definisce un'indentazione fissa);
• % (definisce un'indentazione in percentuale).

p{
text-indent: 20px;
}

In questo esempio la prima linea del testo è indentata di 20px.

text-shadow

La proprietà text-shadow dovrebbe creare un'ombreggiatura per il testo.

text-transform

La proprietà text-transform consente di variare il formato del testo.
La proprietà text-transform può essere espressa con i seguenti valori:

• capitalize (la prima lettera di ogni singola parola è scritta in maiuscolo);
• uppercase (ogni lettera di ogni parola è scritta in maiuscolo);
• lowercase (ogni lettera di ogni parola è scritta in minuscolo);
• none (nessuna variazione).

p{
text-transform: uppercase;
}

In questo esempio ogni lettera di ogni parola dell'elemento p sarà scritta in minuscolo.

unicode-bidi

La proprietà unicode-bidi utilizzata congiuntamente alla proprietà direction determina la direzione del testo.
La proprietà unicode-bidi ammette i seguenti valori:

• normal (valore predefinito);
• embed (mantiene l'ordine stabilito dalla proprietà direction );
• bidi-override (riordina la sequenza stabilita dalla proprietà direction.

.p{
direction: rtl;
unicode-bidi: bidi-override;
}

In questo esempio il valore bidi-override della proprietà unicode-bidi consente di riordinare la sequenza stabilita dalla proprietà direction .

white-space

La proprietà white-space serve a gestire il trattamento degli spazi bianchi presenti in un elemento.
La proprietà white-space ammette i seguenti valori:

• none (valore di default. Gli spazi bianchi sono ridotti a uno);
• pre (gli spazi bianchi e l'inizio di nuove righe sono mantenuti così come sono nel codice);
• nowrap (gli spazi bianchi sono ridotti a uno e l'andata a capo è disabilitata).

div{
white-space: nowrap;
}

In questo esempio gli spazi bianchi dell'elemento div sono ridotti a uno e l'andata a capo è disabilitata.

word-spacing

La proprietà word-spacing è complementare a letter-spacing . Serve ad aumentare lo spazio tra le parole comprese in un elemento.
La proprietà word-spacing ammette i seguenti valori:

• normal (valore di default. Le parole mantengono il loro spazio normale);
• < lunghezza > (Le parole saranno spaziate secondo la distanza impostata).

p{
word-spacing: 1.2em;
}

In questo esempio le parole dell'elemento p saranno spaziate di 1.2em.

Esempi dimostrativi delle funzionalità di alcune proprietà per la visibilità degli oggetti:

<div>
<acronym title="Consorzio per
il Sistema Informativo">
CSI</acronym>-Piemonte
</div>

acronym{
cursor:help;
border-bottom:1px dotted #333;
}

<p><img src="img00.jpg"
alt="Immagine di esempio" />
Lorem ipsum mea sale iisque...
</p>
<p>
Lorem ipsum mea sale iisque...
</p>

img{
float:left;
margin:0 1em 1em 0;
border:2px solid #eee;
}

clear

La proprietà clear viene utilizzata per interrompere l'effetto del box flottante.
La proprietà clear ammette i seguenti valori:

• none (valore predefinito);
• left (annulla l'effetto della dichiarazione float:left );
• right (annulla l'effetto della dichiarazione float:right );
• both (annulla l'effetto di ambedue le dichiarazioni).

#div1{
float:left;
}
#div2{
clear:left;
}

In questo esempio la dichiarazione clear:left; applicata all'elemento #div2 annulla l'effetto della dichiarazione float:left; dell'elemento precedente ( #div1 ).

cursor

La proprietà cursor viene utilizzata per specificare il tipo di cursore che sarà visualizzato quando si punta ad un elemento.
La proprietà cursor ammette i seguenti valori:

• url
• auto default (cambia a seconda dell'impostazione del browser);
• crosshair (rende come effetto una crocetta);
• default (solitamente è una freccetta);
• pointer (rende come effetto una manina);
• move (rende come effetto una crocetta per indicare qualcosa che può essere spostato);
• e-resize (indica che il margine di un box può essere spostato verso destra);
• ne-resize (indica che il margine di un box può essere spostato verso nord-est);
• nw-resize (indica che il margine di un box può essere spostato verso nord-ovest);
• n-resize (indica che il margine di un box può essere spostato verso su);
• se-resize (indica che il margine di un box può essere spostato verso sud-est);
• sw-resize (indica che il margine di un box può essere spostato verso sud-ovest);
• s-resize (indica che il margine di un box può essere spostato verso giù);
• w-resize (indica che il margine di un box può essere spostato verso sinistra);
• text (usato per indicare testo);
• wait (il cursore indica che il programma è intasato);
• help (il cursore indica una spiegazione all'elemento su cui ci si è soffermati col mouse; solitamente il cursore assume la forma di un punto interrogativo.

acronym{
cursor: help;
}

In questo esempio il cursore assumerà la forma di un punto interrogativo ogni qualvolta si posizionerà su un testo marcato come acronimo.

display

La proprietà display definisce come e se visualizzare un elemento.
La proprietà display ammette i seguenti valori:

• none (l'elemento non verrà visualizzato);
• inline (l'elemento verrà visualizzato come un elemento in linea);
• block (l'elemento verrà visualizzato come un elemento di blocco);
• list-item (l'elemento verrà visualizzato come una lista);
• run-in (l'elemento verrà visualizzato come un elemento di blocco o in linea in base al contesto);
• compact (l'elemento verrà visualizzato come un elemento di blocco o in linea in base al contesto);
• marker
• table (visualizzerà la tabella come un elemento di blocco);
• inline-table (visualizzerà la tabella come un elemento in linea);
• table-row-group (l'elemento sarà visualizzato come un ragruppamento di più righe, <tbody> );
• table-header-group (l'elemento sarà visualizzato come un ragruppamento di più righe, <thead> );
• table-footer-group (l'elemento sarà visualizzato come un ragruppamento di più righe, <tfoot> );
• table-row (l'elemento sarà visualizzato come una riga <tr> );
• table-column-group (l'elemento sarà visualizzato come un ragruppamento di più colonne, <colgroup> );
• table-column (l'elemento sarà visualizzato come una colonna di celle <col> );
• table-cell (l'elemento sarà visualizzato come celle di una tabella, <td>, <th> );
• table-caption (l'elemento sarà visualizzato come <caption> );
• inherit

Si consideri ad esempio il seguente codice:

<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>

Gli elementi di questa lista si disporrano uno dietro l'altro in verticale.
Per disporre tutti gli elementi su una sola linea in orizzontale è sufficiente definire gli elementi <li> come oggetti in linea.
Per disporre tali oggetti in orizzontale è possibile utilizzare la proprietà display:inline;

li{
display:inline;
}

float

La proprietà float consente di estrarre gli elementi dal normale flusso per disporli in un ordine diverso.
La proprietà float ammette i seguenti valori:

• none (valore predefinito) indica che l'elemento non deve essere flottante;
• left (indica che l'elemento deve essere flottante a sinistra);
• right (indica che l'elemento deve essere flottante a destra).

img{
float: left;
}

In questo esempio l'elemento img si sposta a sinistra.

position

La proprietà position consente di controllare il posizionamento degli elementi nel normale flusso.
La proprietà position ammette i seguenti valori:

• static (predefinito) prevede il normale comportamento degli elementi all'interno del flusso;
• relative (l'elemento si sposta in relazione alla sua normale posizione che assume all'interno del flusso);
• absolute (l'elemento può essere collocato in un qualsiasi punto della pagina, indipendentemente dalla presenza degli altri elementi all'interno del flusso);
• fixed (l'elemento viene posizionato in modo fisso nella pagina assumendo come punto di riferimento la finestra del browser).
  

div{
position: relative;
left: 2em;
top: 1em;
}

In questo esempio l'elemento div è posizionato in modo relativo. Tramite i valori assegnati alle proprietà top e left , esso si sposta 1em verso il basso ( top ) e 2em verso destra ( left ) rispetto alla posizione che assumerebbe nel normale flusso.

visibility

La proprietà visibility consente di controllare la visibilità di un elemento.
La proprietà visibility ammette i seguenti valori:

• visible (valore predefinito) indica che l'elemento sarà normalmente visualizzato;
• hidden (indica che l'elemento sarà invisibile ma, a differenza di quanto avviene con la dichiarazione display:none , l'oggetto non sarà rimosso dalla pagina;
• collapse (serve a rimuovere intere righe o colonne di una tabella);
  

div{
visibility:hidden;
}

In questo esempio l'elemento div sarà invisibile ma non rimosso dalla pagina.

Come noto molte persone (non vedenti, ipovedenti gravi, ma non solo) fruiscono dei servizi online tramite dispositivi/sintetizzatori vocali ( screen reader , lettori vocali, etc).

Tra i più noti:

• Jaws [link esterno]
• Home Page Reader [link esterno]
• Window Eyes [link esterno]

L'introduzione delle tecnologie multimediali nelle specifiche dei CSS renderebbe possibile (solo nel momento in cui tutte le proprietà saranno supportate dai principali browser vocali) ottimizzare per i dispositivi di lettura vocale la conversione dei contenuti delle pagine web, personalizzando la voce in lettura, accenti, inflessi, volume, provenienza del suono.

È possibile realizzare un CSS audio (da collegare tramite la proprietà @media , o la valorizzazione dell'attributo media="aural" all'interno del tag <link> ) che risponde ad una particolare sezione delle specifiche CSS: appunto gli Aural Style Sheets.

Tali specifiche hanno introdotto nuove proprietà che avranno utilità e saranno valorizzate solo se si fruisce dei contenuti presenti su una pagina web tramite il dispositivo per il quale sono state studiate e introdotte: font-size risulterà inutile per un sintetizzatore vocale e volume (proprietà che regola il volume in lettura, come vedremo) non avrà senso per un browser visuale come Mozilla Firefox o Internet Explorer.

h1{
azimuth: left-side;
}
h2{
azimuth: right behind;
}

#box h1{
cue:url ("/contributi/audioAll.wav");
}
#box h3{
cue-before: url("musica/sottofondo.wav")
url("musica/sottofondo2.wav");
}
#box h3.secondo{
cue:none;
}

#box h1{
cue-after: url("/contributi/audio2.wav");
}

#box h1{
cue-before: url("/contributi/audio.wav");
}

h2{
pause-after:40ms;
}

h2{
pause-before:60ms;
}

#box p.primo{
pause: 20ms;
}
#box p.altri{
pause-before: 30ms;
pause-after: 40ms;
}

#box h3{
play-during: url("file.wav");
}
#box h5{
play-during: url("audio2.wav") mix;
}
#box h5{
play-during: url("audio2.wav") repeat;
}
#box{
play-during: url("audio.wav");
}
#box h1{
play-during: auto;
}
#box{
play-during: url("file.wav");
}
#box p{
play-during: none;
}

#boxMenù p{
speak: normal;
}

#box h1{
pitch:110;
pitch-range:80;
stress:60;
}

div.nomeClasse{
volume: 90;
}
h1{volume: 85%;
}