div class=""

id = yksilöivä tunniste, nimi johon voidaan viitata

class = luokka, tyylitiedostoon määritelty ominaisuusryhmä vaikkapa tyyliin

.keltainen
{
   font-family:verdana,arial,helvetica;
   font-size: 10pt;
   font-weight: bold;
   color: #FFFF00;
}

Siinä missä useampi elementti voi kuulua samaan luokkaan yhtä aikaa, voi myös yksittäinen elementti kuulua useaan luokkaan samanaikaisesti. Esimerkki:

CSS:
p.lorem { color: yellow; }
p.ipsum { background-color: black; }

HTML:

Tähän tulee keltaista tekstiä mustalla taustavärillä.


Lisäksi ID-valitsimella on suurempi spesifisyys (= "painoarvo") kuin luokkavalitsimella, joten ristiriitatilanteissa ID-valitsimen avulla ilmoitetut määritykset voittavat. Esimerkki 1:

CSS:
#lorem { color: red; }
.ipsum { color: blue; background-color: black; }

HTML:

Tähän tulee punaista tekstiä mustalla taustavärillä.


----------

Esimerkki 2:

CSS:
#lorem p { color: yellow; background-color: black; }
div .ipsum { color: red; font-style: italic; }

HTML:

   
   Tähän tulee keltaista kursivoitua tekstiä mustalla taustavärillä.
   


On siis tärkeää huomata, että molemmat tyylisäännöt otetaan huomioon p-elementin muotoilussa. Kuitenkin ristiin menevien määritysten kohdalla (tässä tapauksessa color-ominaisuus) suuremman spesifisyyden saava valitsin voittaa.

Valitsimen spesifisyys:
http://www.w3.org/TR/CSS21/cascade.html#specificity