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.
Per definire una classe si usa far precedere il nome da un semplice punto:
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:
Esempio di questa e delle altre modalità in questa pagina di esempio.
La sintassi di un selettore ID è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #:
Con questa regola:
La corrispondenza con il documento (X)HTML sarà la seguente:
Pagina di esempio anche per l'ID.