Guida base al CSS

I Selettori CSS selezionano gli elementi HTML a cui associare un determinato stile.
Al selettore vengono associate delle dichiarazioni definendone proprietà e valori.
Ogni dichiarazione finisce con un punto e virgola e blocchi di dichiarazioni vengono racchiuse in parentesi graffe.

Per scrivere le parentesi graffe occorre tenere premuto il tasto ALT sinistro digitando sul tastierino numerico, il nunmero 123 per la parentesi graffa aperta e il numero 125 per la parentesi graffa chiusa. Il tutto avendo cura di tenere premuto il tasto ALT (quello di sinistra!) per tutto il tempo della digitazione dei numeri.

Per esempio, vogliamo che tutti gli elementi <p> siano allineati centralmente e di colore rosso. Scriviamo

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

Ogni volta quindi che nel codice HTML compare l'elemento <p>, questo sarà "stilizzato" secondo le direttive impostategli dal CSS.

SELETTORI ID (selettori identificatori)

I selettori ID utilizzano l'attributo ID di un elemento HTML per selezionare uno specifico elemento.
E' possibile usare solo un ID per pagina.
Per selzionare un elemento con un specifico ID, basta scrivere # seguito dall'ID dell'elemento.

Esempio del selettore ID: Vogliamo che ad ogni attributo ID paragrafo sia colorato di rosso. Nel foglio di stile esterno scriviamo:

#paragrafo {color: red;}

Salviamo le modifiche al foglio di stile esterno e poi andiamo nel documento HTML che usa quel foglio di stile e scriviamo due elementi <p> , uno con l'attributo ID e l'altro senza, così:

<p id="paragrafo">Questo verrà colorato di rosso perchè il suo id è "paragrafo"</p>

<p>Questo non verrà colorato di rosso</p>

Otterremo che per lo stesso elemento <p> uno seguirà lo stile imposto dall' id paragrafo. L'altro no.

SELETTORI DI CLASSE

I selettori di classe, seleziona un elemento con una specifico attributo di classe.
Per selezionare elementi con una specifica classe, bisogna scrivere un punto (.) seguito dal nome della classe.
Esempio: tutti gli elementi con la classe "centro" saranno allineati centralmente e colorati di rosso.

.centrale {text-align: center; color: red;}

Nel codice HTML, gli elementi che hanno come attributo la classe centrale, seguiranno le regole del CSS appena scritto.

<h1 class="centrale">Elemento h1  allineato centralmente e rosso</h1>
<p class="centrale">Paragrafo allineato centralmente e rosso</p>