Nakon ~sto smo vidjeli detaljno kako mo~zemo adresirati pojedine elemente unutar XHTML dokumenata, pogledajmo detaljnije mehanizam kojim zaista preciziramo kako se oni renderiraju.
Prisjetimo se, svako pravilo u CSS stilskoj kartici ima oblik selektor { deklaracija }. Deklaracije se, kao i selektori, mogu grupirati, no prvo pogledajmo pojedinu deklaraciju. Ona slu~zi postavljanju nekog svojstva sadr~zaja adresiranog elementa, na odre~denu vrijednost. Najjednostavnije deklaracije su upravo takve: ime-svojstva: vrijednost. Ime svojstva je obi~cno sastavljeno od dvije (ili vi~se) rije~ci, odvojenih crticom ("-"), od kojih prva (prvih nekoliko) obi~cno predstavlja grupu kojoj to svojstvo pripada, a druga (zadnja) predstavlja ime samog svojstva unutar grupe. Svojstva su grupirana na osnovu sli~cnosti efekata koje proizvode, radi lak~seg pam~tenja, te da bi se mnoga svojstva iste grupe mogla postaviti odjednom, tzv. pokratama.
Pokrata je specijalna deklaracija, oblika grupa: vrijednost1 vrijednost2 ..., koja slu~zi postavljanju svih (ili ve~tine) svojstava grupe odjednom. Na primjer, border: thin dotted red je pokrata za sljede~te tri deklaracije:
border-width: thin;
border-style: dotted;
border-color: red;
, dakle deklaracija kojom se istodobno postavlja vrijednost svojstva border-width na thin, border-style na dotted, te border-color na red.
Vidimo da se deklaracije tako~der mogu grupirati, odvojene to~cka-zarezom (";"). Kao posljedica toga, obi~cno se pi~su svaka u svom redu, s to~cka-zarezom na kraju, pa se onda i onoj zadnjoj stavi ";" na kraj. To je u redu, i korisno ako ~zelimo uniformnost u pisanju (na taj na~cin, jo~s kad deklaracije uvu~cemo jednim tabom na po~cetku, CSS sekcije poprili~cno li~ce na C funkcije -- CSS ~cak dopu~sta i komentare u C stilu, /* komentar */), ali nije obavezno -- ako postavljamo samo jedno svojstvo, i ne planiramo dodavati ostala na isti selektor, mo~zemo slobodno izostaviti ";" na kraju. No izme~du pojedinih deklaracij~a u istoj sekciji, mora do~ti to~cka-zarez.
Jo~s ne~sto o vrijednostima svojstava. Naravno, svako svojstvo ima svoju semantiku, i kao posljedica toga, svoje mogu~tnosti onoga ~sto mo~zemo postaviti za vrijednosti. No neke vrste vrijednosti (boja, duljina, url, postotak) se pojavljuju ~cesto u raznim svojstvima, pa ih je dobro skupiti na jednom mjestu. To su:
Duljina je ili 0, ili u obliku predznak broj jedinica, bez razmaka izme~du pojedinih dijelova. Predznak je '+' ili '-', ili '' (prazan string, tad se podrazumijeva '+'). Broj je bilo kakav niz znamenki, koji mo~ze sadr~zavati decimalnu to~cku. Jedinica je ono ~cime mjerimo, i mo~ze biti relativna ili apsolutna. Apsolutne jedinice imaju smisla tek kad znamo to~cno na kojem/kakvom mediju ~te se renderirati na~s dokument: podr~zane su in, cm, mm, pt i pc.
Relativne jedinice je puno bolje koristiti, jer pomo~tu njih mo~zemo lak~se skalirati dokumente na npr. ekran dlanovnika. One su relativne s obzirom na veli~cinu fonta danog elementa (osim kad postavljamo s~amu veli~cinu fonta, u kom slu~caju se odnose na veli~cinu fonta elementa unutar kojeg se dani element neposredno nalazi). To su em i ex. em se odnosi na maksimalnu, a ex na prosje~cnu veli~cinu fonta u pitanju (obi~cno nisu sva slova jednake veli~cine). Pod "veli~cinom" se smatra visina ili ~sirina, ovisno o tome postavlja li se "vertikalno" (poput razmaka izme~du linij~a) ili "horizontalno" (poput razmaka izme~du rije~ci) svojstvo.
Postoji jo~s jedna jedinica koja je zapravo relativna, iako ne u punom smislu rije~ci. To je px (piksel). Veli~cinu piksela odre~duje sustav unutar kojeg se dokument renderira (rezolucija ekrana, dimenzije monitora...), iako CSS sugerira reskaliranje piksel~a u slu~caju da oni jako odstupaju od "referentnog piksela", koji je definiran preko vidnog kuta i trebao bi stvoriti isti "dojam veli~cine", bez obzira na medij na kojem se dokument vizualno renderira.
Neki primjeri duljin~a kao vrijednosti CSS svojstava:
To je veli~cina koja se tako~der obi~cno odnosi na duljinu, uvijek je relativna, i postavlja se naj~ce~s~te u odnosu na veli~cinu fonta trenutnog elementa (iako ima i izuzetaka). Na primjer, ako se odnosi na veli~cinu fonta, vrijednost "120%" je samo drugo ime za "1.2em".
Napomena u vezi postavljanja boj~a: CSS pru~za sasvim dovoljno efekata za formatiranje i bez kori~stenja boj~a, i sasvim je mogu~te dati prepoznatljiv stil svakom pojedinom vizualnom XHTML elementu bez ikakvog spominjanja boj~a u stilskoj kartici (~stovi~se, standardi pristupa~cnosti nala~zu da boje nikada ne budu jedino svojstvo razlikovanja semanti~cki razli~citih elemenata, te da se dokument mora mo~ti dobro vidjeti i bez informacij~a o bojama -- nezanemariv broj ljudi ne razlikuje boje, ili ih ne razlikuje dovoljno dobro). Me~dutim, ukoliko postavimo boju na nekom elementu, trebamo je postaviti na svima. Mnoge te probleme rje~sava mehanizam naslje~divanja, koji ka~ze da npr. em element unutar p elementa zelene boje ima tako~der zelenu boju, ako nije druga~cije re~ceno. Postoje i druga pravila, poput toga da
npr. oko crvenog teksta ide crveni okvir, ako nije druga~cije re~ceno. No to je korisno samo kad trebamo prekopirati neku boju s jednog elementa/svojstva na drugi. Kad trebamo neku suplementnu boju, na primjer odrediti dobru boju pozadine za zeleni tekst, CSS nam ne mo~ze pomo~ti. ~Cesta je gre~ska postaviti shemu boj~a podrazumijevaju~ti da je recimo pozadina bijela, ili da je boja "obi~cnog" teksta na stranici crna. No to ne mora biti tako na svim browserima i u svim okru~zenjima. Crna slova na bijeloj pozadini su sasvim u redu, ali ako ho~temo fino podesiti boje nekih drugih elemenata, nemojmo presko~citi tu deklaraciju:
BODY {
color: black;
background: white;
}
A:visited {
color: #333;
}
Boja se u CSSu mo~ze specificirati na jedan od 5 na~cina:
#RGB. Na primjer, potpuno crna je #000, dok je ~cisto crvena #f00. Ukoliko ~zelimo malo ubla~ziti tu boju, mo~zemo dodati malo svjetlosti u ostalim kanalima (#f33), ili smanjiti svjetlost u crvenom kanalu (#c00). Tradicionalno se boje dodaju ili oduzimaju u koracima po 3: dakle, 0,3,6,9,c,f -- no nitko nam ne brani da i finije podesimo boju, poput #644.Koji na~cin koristiti, za CSS je poptuno svejedno. Drugi je definitivno najkoncizniji i sasvim dovoljno mo~tan za ve~tinu potreb~a, prvi je najjednostavniji za ljude koji su zadovoljni sa samo 16 boj~a, a peti je najrje~citiji. Naravno, mo~zemo ih i mije~sati -- drugi se lako pretvori u tre~ti ako se poka~ze potreba za ve~tom precizno~s~tu.
Ponekad unutar CSSa trebamo navesti lokaciju na Internetu, naj~ce~s~te odakle u~citati neku sliku. To mo~zemo navesti kao url(lokacija), na primjer url(../images/background.png). Naravno, mo~zemo navesti i apsolutnu adresu, koja normalno po~cinje s http://. Primijetimo da nema navodnika oko URLa, i oni nam u ve~tini slu~cajeva nisu potrebni. Treba jo~s re~ti da su relativne adrese relativne u odnosu na direktorij u kojem se nalazi .css datoteka, ne direktorij XHTML dokumenta koji se trenutno renderira.