HTML

background-color
valore: un colore
background-image
valore: l'indirizzo che indichi dove è il file immagine.
Applica un'immagine di sfondo, l'immagine viene ripetuta in modo da riempire l'area del contenitore.
esempio: <div STYLE="background-image: url(sfondo.gif)"> ... contenuto del contenitore...</div>
background-repeat
valori: una delle seguenti parole repeat-y (ripete l'immagine verticalmente) repeat-x (ripete l'immagine orizzontalmente) no-repeat (l'immagine non viene ripetuta)
indica se e come un'immagine di sfondo deve essere ripetuta.

Esempio: DIV con sfondo

<DIV STYLE="background-image: url(sf_righe.png)>
Questo contenitore ha uno sfondo a righine. E' una piccola immagine che si ripete.
</DIV>

L'effetto è questo:

Questo contenitore ha uno sfondo a righine.
E' una piccola immagine che si ripete.

Bordi

Gli stili per i bordi permettono di gestire lo spessore (width), lo stile (style) ed il colore (color) del bordo.
E' possibile stabilire proprietà diverse per ciascuno dei quattro lati (top, right, bottom, right) del contenitore.

border-bottom-width, border-left-width, border-right-width, border-top-width, border-width
valore: il numero di pixel
fissa la larghezza del bordo di un lato del contenitore o di tutti i lati (l'ultima)
border-bottom-color, border-left-color, border-right-color, border-top-color, border-color
valore: un colore
Applica il colore del bordo ad uno dei quattro lati o a tutti (l'ultima).
border-bottom-style, border-left-style, border-right-style, border-top-style, border-style
valori: una delle seguenti parole dashed (linea sfumata) double (linea doppia) dotted (linea tratteggiata) solid (linea continua) ridge (linea sporgente) groove (linea scavata) outset (effetto 3D sporgente) inset (effetto 3D scavato)
Applica un effetto al bordo.
Nota: non tutti gli effetti sono supportati dai vari browser.

E' possibile usare anche delle proprietà abbreviate, qualora si desideri dare alla proprietà lo stesso valore per i quattro lati del bordo contenitore.

border-bottom, border-right, border-top, border-left
valore: il numero di pixel della larghezza, lo stile ed il colore
fissa le tre proprietà del bordo di un lato.
Esempio <div STYLE="border-top:1px solid red"> ... contenuto del contenitore...</div>
border
valore: il numero di pixel della larghezza, lo stile ed il colore
applica le tre proprietà del bordo di tutti i lati del contenitore.

Esempio: DIV con bordo effetto 3D in rilievo blu scuro sopra e a destra, blu chiaro sotto e a sinistra

<DIV STYLE="border-top:1px solid green;border-left:1px solid green;border-bottom:1px solid lightgreen;border-right:1px solid lightgreen>
Questo contenitore ha bordo di colori diversi a secondo dei lati
L'effetto è quello del rilievo.
</DIV>

Questo contenitore ha bordo di colori diversi a secondo dei lati
L'effetto è quello del rilievo.

Margini interni ed esterni

Gli stili permettono di gestire al pixel le distanze tra il contenitore e quello che lo circonda (il margine) e la distanza che c'è tra il bordo del contenitore ed il suo contenuto (margine interno o padding)
E' possibile stabilire proprietà diverse per ciascuno dei quattro lati (top, right, bottom, right) del contenitore o di tutte in una sola volta

margin-bottom, margin-left, margin-right, margin-top, margin
valore: il numero di pixel
fissa la distanza tra il contenitore ed il suo esterno.
padding-bottom, padding-left, padding-right, padding-top, padding
valore: il numero di pixel
fissa la distanza tra il bordo del contenitore ed il suo contenuto.

Esempio: DIV con padding, notare la distanza tra il bordo e il testo contenuto

<DIV STYLE="border:1px solid green;padding:10px">
Questo contenitore ha il testo contenuto distanziato dal bordo </DIV>

Questo contenitore ha il testo contenuto distanziato dal bordo

Lo stesso contenitore senza padding.

Questo contenitore NON ha il testo contenuto distanziato dal bordo