CSS 2.1 Cheat Sheet

selettore {proprietà: valore;}

<link rel="stylesheet" type="text/css" href="style.css" />

<style type="text/css">
selettore {proprietà: valore;}
</style>

<tag style="proprietà: valore;">

Linea che necessita il punto ( . )
.class {proprietà: valore;}

Linea che necessita il cancelletto ( # )
#ID {proprietà: valore;}

Formatta la struttura o un blocco di testo.
<div class="class"></div>
<div id="ID"></div>

Formattazione in linea
<span style="proprietà: valore;"></span>

Colore del testo
selettore {color: valore;}

Aspetto del cursore del mouse. I seguenti cursori sono compatibili con tutti i browser più usati:
crosshair, default, help, move, pointer, text, wait, *-resize
(al posto dell'asterisco dovranno essere inserite le direzioni cardinali con cui si desidera ottenere l'effetto: N, NW, W, SW, S, SE, E, NE.

La funzione di questa proprietà è quella di definire il trattamento e la presentazione di un determinato elemento, intervenendo su di esso. Questa proprietà è di tipo ereditario.
block; inline; list-item; none

Gestisce i contenuti che fuoriescono da un riquadro.
visible; hidden; scroll; auto

Imposta la visibilità di un elemento.
visible; hidden

italic, normal

normal, small-caps

normal, lighter, bold, bolder, n°intero da 100 a 900

Dimensione del testo di un elemento

Definisce la priorità della lista di caratteri da usare per visualizzare un determinato elemento di testo

Imposta lo spazio tra le lettere di un testo.

Imposta lo spazio presente tra una riga di testo e la successiva.

Allineamento orizzontale di un testo. Ci sono 3 tipi di allinamente fondamentale (oltre a quello a sinistra di default) e sono: center, right, justify

Aggiunge un determinato tipo di decorazione ad un testo.
blink, line-through, none, overline, underline

Imposta la rientranza (distanza dal bordo) della prima linea del paragrafo di un testo

Trasforma il testo seguendo i seguenti valori, che servono rispettivamente a rendere maiuscole tutte le prime lettere di ogni parola, rendere tutto il testo minuscolo o rendere tutto il testo maiuscolo.
capitalise, lowercase, uppercase

Imposta lo spazio tra le varie parole che compongono un testo.

Questa proprietà viene utilizzata per distanziare un contenuto da ciò che lo circonda all'esterno dell'elemento. Il margin non ha un colore di sfondo e risulta in questo modo completamente trasparente. Senza specificazioni di alcun tipo la distanza sarà la stessa per tutti i lati del contenuto.

Specifica la distanza dal lato superiore esterno dell'elemento.

Specifica la distanza dal lato destro esterno dell'elemento.

Specifica la distanza dal lato inferiore esterno dell'elemento.

Specifica la distanza dal lato sinistro esterno dell'elemento.

E' possibile inserire differenti margini per ogni lato dell'elemento e risparmiare spazio usando la seguente scrittura. Le distanze sono ordinate secondo questo criterio: top, right, bottom, left.
margin:N°px N°px N°px N°px

Questa proprietà viene utilizzata per distanziare un contenuto da ciò che lo circonda all'interno dell'elemento. Il colore di sfondo del padding viene influenzato dal colore di sfondo dell'elemento a cui appartiene. Senza specificazioni di alcun tipo la distanza sarà la stessa per tutti i lati del contenuto.

Specifica la distanza dal lato superiore interno dell'elemento

Specifica la distanza dal lato destro interno dell'elemento

Specifica la distanza dal lato inferiore interno dell'elemento

Specifica la distanza dal lato sinistro interno dell'elemento

E' possibile inserire differenti margini per ogni lato dell'elemento e risparmiare spazio usando la seguente scrittura. Le distanze sono ordinate secondo questo criterio: top, right, bottom, left.
padding:N°px N°px N°px N°px

Rappresenta lo spessore dei bordi

Rappresenta lo stile dei bordi. Ci sono differenti stili, ognuno conferisce un aspetto diverso ai bordi.
dashed, dotted, double, groove, inset outset, ridge, solid, none.

Imposta il colore dei bordi

E' possibile inserire le differenti proprietà risparmiando spazio usando la seguente scrittura. In ordine vediamo la dimensione dei bordi, il colore, e lo stile.
border: N°px #HEX solid (sostituire "solid" con lo stile preferito)

Imposta il posizionamento dinamico dell'elemento.
left, right, none

Imposta la posizione sinistra di un elemento.
auto, valori di lunghezza [pt, in, cm, px]

Imposta la posizione superiore di un elemento.
auto, valori di lunghezza [pt, in, cm, px]

Permette di posizionare un elemento in relazione ad un altro elemento o allo corpo stesso della pagina.
static, relative, absolute, fixed

Imposta la posizione di un elemento sull'asse x (asse verticale)
auto, valori numerici

Imposta il colore di sfondo dell'elemento

Imposta l'immagine di sfondo dell'elemento.
url('HTTP')

Imposta il tipo di ripetizione dell'immagine inserita come sfondo.
repeat, repeat-x, repeat-y, no-repeat

Serve a far scorrere l'immagine insieme all'elemento oppure a fissarla nella pagina.
scroll, fixed

Imposta la posizione dello sfondo.
(x y), top, center, bottom, left, right

Imposta il tipo di stile del marker per i differenti punti della lista.
none, cicle, disc, square, armenian, decimal, decimal-leading-zero, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman, inherit

Imposta la posizione del marker dei differenti punti della lista.
inside, outside

Serve ad impostare un immagine come marker dei punti della lista.