Svaki od elemenata koji je dodan na web stanicu može biti oblikovan pomoću CSS-a.
CSS selektor služi kao veza između HTML elementa i njegovog CSS oblikovanja (kao što je boja, veličina, oblikovanje, položaj…).
Osnovni selektori su selektor elementa, identifikatora i klase. CSS svojstva umećemo unutar vitičastih zagrada.
Osnovni selektori su selektori elemenata. Imamo selektore odlomaka, naslova, poveznica, tablica, simboličkih i numeričkih popisa… Selektor elementa sastoji se od oznake elementa bez šiljatih zagrada.
Pogledajmo primjer:
HTML
<h1>Moj naslov</h1>
CSS
h1 { color: blue; }
body { background-color: lightblue; }
U ovom primjeru smo pomoću selektora elementa naslova h1 dodijelili boju teksta (color: blue;) a odlomku body dodijelili pozadinsku boju (svojstvo background-color: lightblue 😉
Selektor klase koristimo kod oblikovanja html elemenata koji imaju zadanu vrijednost svojstva klase. Pomoću selektora klase možemo oblikovati jedan ili više elemenata za zadanu vrijednost svojstva klase.
U primjeru ispod jedan naslov ima svojstvo klase, a drugi nema i kada iskoristimo CSS selektor klase, CSS svojstva će se primjeniti samo na naslov koji ima svojstvo klase
HTML
<h1 class="boja">naslov</h1>
<h1>naslov</h1>
CSS selektor klase
.boja { color: red; }Selektori identifikatora se razlikuju od selektora klase po tome što označavaju samo jedan element.
Primjer oblikovanja elemenata pomoću selektora klase i identifikatora:
HTML
<h1 class="boja">Naslov</h1>
<p id="naslov" class="boja">Odlomak s pozadinskom bojom</p>CSS selektor identifikatora
#naslov {
background-color : yellow;
}Lista svojstava koje možete dodijeliti putem CSS-a je ogromna, a listu možete vidjeti OVDJE