Naučili smo kako povezati CSS stil s HTML dokumentom. Sad trebamo proučiti kako implementirati pojedini stil na dio ili na cijelu HTML stranicu.

U lekciji Sastavnice CSS-a vidjeli smo da se pojedini stil definira kao:

selektor {svojstvo:vrijednost}

Selektor identificira HTML element ili elemente na koje se primjenjuje navedeni stil. Postoji čitav niz selektora pa potpuno upoznavanje primjene svakog od njih nije nimalo banalan zadatak. Ovdje ćemo detaljnije obraditi nekoliko osnovnih, najčešće upotrebljavanih tipova:

• jednostavni selektori
• klasni selektori
• ID selektori
• kontekstni selektori
• pseudoklase.

Prije upoznavanja selektora, nekoliko riječi o strukturi HTML dokumenta. HTML dokument možemo prikazati kao stablo prema sljedećoj slici:

HTML dokument prikazan kao hijerarhijsko stablo.

Vidljivo je da elementi unutar stabla imaju svoje podređene i nadređene elemente. Primjerice, element tr je sadržan u elementu table, a element table sadržan u elementu body. Selektorom možemo precizno identificirati bilo koji od elemenata stabla.