CSS Fogli di stile per il sito scolastico Bobby WorldWide Approved AAA

ASSOCIARE I CSS ALLE PARTI DI UN DOCUMENTO

In (X)HTML esistono due attributi fondamentali applicabili a tutti gli elementi: sono class e id.

Prima di creare un selettore dobbiamo decidere se classificarlo come class o come ID. In un documento (X)HTML l'attributo id è usato per identificare in modo univoco un elemento. In pratica, se assegno ad un paragrafo l'id "menu", non potrò più usare questo valore nel resto della pagina. Di conseguenza, l'ID #menu dichiarato nel CSS trasformerà solo quel paragrafo specifico. Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo.

La strategia dovrà dunque essere questa. Se uno stile va applicato ad un solo specifico elemento usate un ID. Se invece prevedete di usarlo più volte ovvero su più elementi definite nel CSS una classe.

Chiariti i concetti di base, passiamo ad analizzare usi e sintassi.

1) Classe

Per definire una classe si usa far precedere il nome da un semplice punto:

.prova

Questa è la sintassi di base. Un selettore classe così definito può essere applicato a tutti gli elementi di un documento (X)HTML, la cui sintassi corrispondente sarà la seguente:

<div class="prova">..........</div>

Esempio di questa e delle altre modalità in questa pagina di esempio.

2) ID

La sintassi di un selettore ID è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #:

#contenuto

Con questa regola:

La corrispondenza con il documento (X)HTML sarà la seguente:

<div id="contenuto>............</div>

Pagina di esempio anche per l'ID.