CSS стилови су начин на који се подешава изглед модерних страница. Примјер стила:

h1 {
      font-size: 14pt;
}

Овај стил ће подесити све наслове h1 елементе на висину од 14pt. h1 је овдје селектор, дио који одређује на које елементе на страни се овај стил односи. После њега слиједе витичасте заграде ({ }) унутар којих се налази списак својстава које треба примјенити на ове елементе. Свако подешавање је сачињено од два дијела назива и вриједности који су раздвојени двотачком (:) и свако својство се МОРА за вршити са тачком зарезом (;).

Стилови не гађају само све елементе одређене врсте. Уколико се жели да се неки стил примјењује на само неке специфичне елементе то се може одрадити преко класа. Класе су начин да се маркирају елементи стране са ознакама које омогућавају њихово гађање стиловима. Класа се подешава на неки елемент подешавањем његовог class атрибута. Нпр уколико имамо ХТМЛ код:

<p>Tekst1</p>
<p class="plavo">Plavi tekst</p>

и стилове: 

p { font-weight: bold; }
.plavo { color: blue; }

Резултат ће бити да ће сви пасуси на страни бити написани масним болдираним словима, док ће елементи са класом плаво (попут другог пасуса) Бити обојани у плаво. Стилови нису ексклузивни већ се више може примјенити на један елемент, тако да у нашем примјеру на други пасус ће се примјенити обадва стила и он ће постати болдиран и плаве боје. 

Селектор другог стила се разликује од првог по томе што почиње са тачком. Тачка значи да оно што долази после ње није врста елемента већ назив класе. Примјери

div - селектује све див ХТМЛ елементе (нпр <div>Primjer</div>) 

.div - селектује све елементе класе div (нпр <p class="div">Primjer</p>)

div.abc - селектује све div елементе класе abc (<div class="abc">Primjer</div>)

.abc - селектује све елементе класе абц (<p class="abc">Primjer 1</p> <h1 class="abc">Primjer 2</h1>

Поред класа постоји још један финални начин да се "нанишане" селектори. То је преко ID атрибута. Овај атрибут је својеврсно име/матични број елемента на страни, стога ID треба бити уникатан и несмију два или више елемената да имају исти ID. ID се користе за обиљежавање специфичних уникатних дјелова стране попут заглавља и менија. Нпр:

<h1 id="naslov">Naslov Strane</h1>

стил

#naslov { 
    background: black; 
    text-align:center;
    font-size: 22pt;
    color: white;
}

ће подесити елемент који има ID са вриједношћу naslov тако да му је позадина црна, а текст бијели центриран и величине 22.

Селектори хијерархије:

Поред ових директних селектора често не желимо само подесити све елементе или све елементе неке класе, већ често желимо да подесимо само неке елементе који се налазе унутар неког другог елемента. Нпр ако имамо ХТМЛ:

<div id="#zaglavlje"><h1>Veliki naslov strane</h1></div>
<div><h1>Podnaslov</h1></div>

следећи стил 

#zaglavlje h1 { 
    background: black; 
    color: white;
    height: 100px;
}

ће бити примјењен само на први наслов јер се у селектору #zaglavlje налази иза h1 одвојено размакницом што значи да се односи само на h1 елементе у #zaglavlje елементу.

Када се неки елемент налази унутар другог елемента онда се назива ПОТОМКОМ тог елемента. Нпр <div><img .... /></div> img је потомак div тј. div је родитељ img.

Примјери:

ul li - селектује све ли елементе који су потомци ul елемента

ul.abc li - селектује све li  елементе потомке ul елемента класе abc 

table.sarena td - селектује све td елементе потомке табеле класе sarena 

table.mmm tr.plava td.krajnja - селектује све td елементе класе krajnja  који су потомци редова класе plava који су сами потомци табеле класе mmm.

.sarena .plava - селектује све елементе класе plava који су потомци елемената класе  sarena 

Овакви селектори нису осјетљиви на "генерационо" растојање између претка и потомка.

<div class='plava'><div><div><div></div></div></div></div>

Селектор .plava div ће селектовати СВЕ div елементе који се налазе у елементу класе plava без обзира на дубину.

<div class='plava'><div><div><div></div></div></div></div>

Са друге стране ако нас брине дубина и желимо да селектујемо директно дијете неког елемента умјесто размакнице можемо користити >. У претходном примјеру селектор 

.plava > div селектоваће само први div послије plava div-a.

<div class='plava'><div><div><div></div></div></div></div>