La sintassi di una regola CSS è composta da due blocchi principali:
SELETTORE { BLOCCO DICHIARAZIONI }
Una dichiarazione é formata da: PROPRIETA' : VALORE;
Il selettore serve a definire la parte del documento cui verrà applicata la regola;
Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe ( CTRL+SHIFT+ALT+[ e ] );
La proprietà definisce un aspetto dell’elemento/selettore da modificare (margini, colore di sfondo, larghezza, etc);
Proprietà e valore devono essere separati dai due punti.
Le dichiarazioni vanno invece separate con un punto e virgola;
Nelle definizione delle regole è possibile fare uso di proprietà singole e proprietà a sintassi abbreviata;
Con le shorthand properties è possibile invece definire con una sola dichiarazione un insieme di proprietà.
/* PROPRIETA' SINGOLE*/
div {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}
/* SHORTHAND PROPERTIES Sintassi abbreviata */
div {margin: 10px 5px 10px 5px;}
/* Così scrivendo il valore 10px sarà applicata a tutte e quattro le proprietà*/
div {margin: 10px;}
/* Invece scrivendo cosi attribuiremo 10px a top&bottom e 20px a left&right*/
div {margin: 10px 20px;}
I commenti non sono interpretati dal browser. Sono utili nei CSS, come nei linguaggi di programmazione, per aggiungere annotazioni esplicative di vario tipo a beneficio di chi scrive e consulta il codice.
/* cosi si commentano i codici css */