In questa lezione vi spiego:

• come è strutturato un foglio di stile;
• da quali parti è composto.

Regole

Un foglio di stile CSS è un insieme di regole, ovvero una collezione di stili già pronti, i quali vengono assegnati a diversi elementi della pagina (paragrafi, immagini, elenchi, ecc.).

Una regola è una espressione che definisce uno stile per la formattazione.

Ogni regola presenta la seguente struttura:

selettore { blocco delle dichiarazioni }

Esempio:

p { color:green; text-align:center; }

Selettori

Un selettore ha il compito di individuare gli elementi a cui è destinata la regola.

Ad esempio, se vogliamo colorare il testo di tutti i paragrafi della pagina, dobbiamo creare una regola che venga applicata soltanto ai paragrafi, senza toccare altri elementi.

Nell’esempio che vi ho fatto, per individuare solo i paragrafi, usiamo il selettore “p” che, appunto, rappresenta il tag per i paragrafi nel linguaggio HTML.

Oltre ai nomi dei tag HTML, un selettore prevede anche altri comandi, che vedremo in seguito, come ad esempio classi e ID.

Dichiarazioni

Nella regola CSS, dopo il selettore viene scritta una coppia di parentesi graffe:

selettore { ... }

Nelle graffe vanno inserite le dichiarazioni, ovvero espressioni di stile che modificano un singolo aspetto dell’elemento a cui è rivolta la regola: possono modificare la posizione, la dimensione, il colore, ecc.

Ciascuna dichiarazione è così strutturata:

proprietà: valore;

Esempio:

color: green;

Ciascuna proprietà ha particolari tipi di valori ammessi: alcune proprietà prevedono valori numerici con o senza unità di misura, altre prevedono parole, codici, ecc.

Esempio:

• text-align: center;
• font-size: 2em;
• width: 60%;
• color:#DC3;

Il punto e virgola alla fine della dichiarazione non è obbligatorio solo se è presente una sola dichiarazione nelle graffe, altrimenti è indispensabile perché le separa tra di loro.

Le dichiarazioni possono essere scritte in orizzontale:

p { color:green; text-align:center; }

oppure in verticale, usando una opportuna indentazione (rientro):

p {
  color:green;
  text-align:center;
}

L’indentazione viene usata più che altro per tenere il codice ordinato.

Video