CSS-kod sastoji se od CSS-pravila.
Evo primjera jednostavnog CSS-pravila:
p {
color: red;
}
Ovo pravilo postavlja svim p elementima boju teksta na crvenu.
Dio pravila koje određuje (odnosno selektira) elemente na koje se pravilo odnosi zove se selektor.
Svako pravilo moramo započeti selektorom, a najjednostavniji selektor je upravo naziv elementa:
p {
}
Nakon selektora dolaze vitičaste zagrade.
CSS nije osjetljiv na prazan prostor pa vitičaste zagrade nije obavezno pisati u zasebnim redovima, ali se to preporuča radi čitljivosti.
Unutar vitičastih zagrada najprije se navodi svojstvo koje se postavlja.
U ovom primjeru radi se o boji teksta (CSS-svojstvo color):
p {
color:
}
Nakon što se navede svojstvo koje se želi postaviti, dolazi dvotočka, a iza nje vrijednost na koju se postavlja to svojstvo (u ovom primjeru radi se o nazivu boje):
p {
color: red;
}
Svojstvo i vrijednost zajedno čine deklaraciju. Unutar jednog pravila može biti više deklaracija:
p {
color: red;
font-size: 12px;
}
Kao što je već rečeno, svako CSS-pravilo započinje selektorom, a selektor određuje za koji HTML-element vrijedi to pravilo.
U selektoru se mogu koristiti nazivi, klase ili identifikatori elemenata.
Najjednostavniji selektor je upravo naziv elementa.
Želi li se da se pravilo odnosi na p elemente, napisat će se:
p {
color: red;
}
Ako se želi da se pravilo odnosi na elemente h1, napisat će se:
h1 {
color: blue;
}
Dva (ili više) pravila koja sadrže iste deklaracije mogu se radi preglednosti napisati kao jedno pravilo.
p, h1 {
color: red;
}
CSS-pravilo može se dodatno precizirati navođenjem roditeljskih elemenata.
p strong { color: red; }
Selektor za takvo pravilo može se čitati zdesna nalijevo.
Dakle, to pravilo vrijedit će za elemente strong, ali samo za one koji se nalaze unutar elementa p.
Osim prema klasama i identifikatorima, HTML-elementi mogu se selektirati i po drugim atributima.
Jedan od najčešćih slučajeva gdje je to korisno su elementi input.
Ako se u HTML-kpdu nalazi element input tipa text, kao u ovom primjeru: sljedeće će se pravilo primijeniti samo na elemente input tipa text:
input[type="text"] {
color: red;
}
Dakle, u selektoru je (u uglatim zagradama) potrebno navesti naziv atributa (type), a zatim i njegovu vrijednost (text).
U CSS-u postoji i posebni selektor, tzv. univerzalni selektor pomoću kojeg se mogu odabrati svi elementi.
* { color: red; }
Oznaka za univerzalni selektor je * (zvjezdica).
To pravilo postavit će boju svih elemenata u HTML-dokumentu na crvenu.