Alle CSS spesifikasjoner består av to deler: En velger og en deklarasjon. Deklarasjonen i seg selv består også i to deler: Et navn og en verdi.

velger { navn : verdi; }

De vanligste velgere (selector på engelsk) er et eksisterende HTML-flagg, som plasseres innenfor <style>-flagget eller i en egen css inkludert fil. Spesifikasjonene som defineres i en css inkludert fil eller innenfor sidens <style>-flagg gjelder for hele dokumentet (eller alle dokumentene som inkluderer css filen).

Deklarasjonen består av et navn og en verdi, separert av kolon (. Flere definisjoner er separert med et semikolon (. Dersom man vil at en CSS definisjon skal gjelde for alle HTML flagg av en type, f.eks. <p>-flagget, benytter man følgende CSS kode:

p 
{ 
   color: blue; 
} 

Videre kan man, dersom man ønsker å påføre samme stiler til flere HTML flagg, definere stiler for alle de ønskede flagg samtidig:

p, u, a, i, b 
{ 
   color: blue; 
} 

Eksemplene overfor viser den vanligste formen for velgere, type velgere. Men det finnes en rekke andre typer velgere.

Klasse velgere
CSS inkluderer muligheten til å opprette CSS klasser. Klasser gjør det mulig å opprette et sett med definisjoner som kan benyttes av alle eller noen utvalgte HTML-flagg. Et slikt sett kalles en klasse, og defineres ved å legge til et punktum før klassens navn. Klasser kan gjelde for samtlige HTML-flagg, eller for et eller flere utvalgte flagg.

p.spesiell 
{ 
   color: blue; 
} 
.overskrift 
{ 
   color: black; 
   border: 1px solid; 
   font-weight: bold; 
} 

Den første velgeren overfor definerer en klasse innenfor <p>-flagget, med blå tekst. Den andre velgeren oppretter en klasse som gjelder for samtlige HTML-flagg. Hvliken klasse et HTML-flagg tilhører er definert i flaggets class parameter: <p class="spesiell">, eller <b class="overskrift>.

Ved å definere klasser for et gitt HTML-flagg, er det mulig å beholde samme klassenavn over flere HTML-flagg med forskjellige definisjoner:

p.spesielll 
{ 
   color: blue; 
   margin: 1px; 
} 
h1.spesiell 
{ 
   color: blue; 
   margin: 4px; 
   border: 1px solid; 
} 
b.spesiell 
{ 
   color: blue; 
   margin: 2px; 
   font-weight: 900; 
} 

På denne måten kan du benytte deg av klassen spesiell over flere HTML-flagg, men med forskjellige resultater, som kan være ønskelig i flere situasjoner.

Attributt velgere

En attributt velger lar deg velge en stil for en spesiell attributt innenfor et HTML-flagg. Dette er spesielt interesant når det kommer til hyperkoblinger og <a>-flagget. Ved hjelp av attributt velgere kan du bestemme at pekere skal være røde før en peker er besøkt, blå når musen er over pekeren, grønn når pekeren klikker på den og gul etter at en peker er besøkt.

a:link 
{ 
   color: red; 
} 

a:hover 
{ 
   color: blue; 
} 

a:active 
{ 
   color: green; 
} 

a:visited 
{ 
   color: yellow; 
} 

En annen mulighet er å definere stiler for enkelte pekere. F.eks. kan du definere alle pekere som peker til nettsiden http://www.devsiden.info/ som fet med blå bakgrunn.

a[link="http://www.devsiden.info/"] 
{ 
   background: blue; 
   font-weight: 400; 
} 

ID velgere

ID velgere er veldig like klasse velgere, med ett unntak. Kun ett element i HTML dokumentet kan benytte ID definisjonen. En ID velger defineres med #.

#spesiell 
{ 
   color: blue; 
} 

ID attributten kan gis til et HTML-flagg ved hjelp av ID parameteren: <p id="spesiell">, men husk at kun ett element på HTML dokumentet kan benytte seg av ID attributten.