You are on page 1of 16

Tabele su se značajno koristile za izradu layouta web 

stranice, ali sada umesto njih to rade stranice stilova. 
Tabele su još uvek korisne ali ih treba koristiti za uređi‐
vanje tabelarne informacije unutar redova i kolona. Pored 
toga što zamenjuju tabele po pitanju uređivanja 
rasporeda na stranici, stranice stilova su pravi izbor kada 
treba primenjivati fontove, kontrolisati margine, 
određivati bordure i fino podešavati gotovo svaki vidljivi 
aspekt web stranica. 

Koncept je jednostavan: kreirate jedan dokument stilo‐va 
kojim se određuju fontovi, boje, pozadine i druge odlike 
koje određuju jedinstveni izgled web sajta. Zatim, svaku 
stranicu povežete sa stranicom stila, umesto da u svakoj 
ponavljate te iste deklaracije. Kada se odlučite da treba 
da promenite globalni font ili kolornu šemu, to lako 
postižete kroz ceo sajt izmenom jednog ili dva stila. Tako, 
stranica stila u stvari predstavlja grupaciju instruk‐cija za 
formatiranje i može istovremeno da kontroliše izgled 
mnogih HTML stranica.  
Stranice stilova idu mnogo dalje od jednostavnog raz‐
dvajanja sadržaja web stranica i način na koji je formati‐
ran. CSS stranice stilova omogućavaju postavljanje velikog 
broja odlika formatiranja koji ranije nisu bili mogući sa 
bilo kakvim naporom. U ove spada egzak‐tnost 
kontrolisanja pisma, međuslovna belina i prored, margine 
i bordure stranice, kao i proširena podrška za ne‐Evropske 
jezike i slovne znake. Takođe, omoguća‐vaju zadavanje 
vrednosti u poznatim jedinicama kao što su inči, 
milimetri, tačke, i picas. Stranice stilova mogu da se 
koriste i za precizno pozicioniranje grafike ili teksta bilo 
gde na web stranici. 

CSS je jezik koji definiše konstrukciju stilova kao što su 
fontovi, boja, pozicioniranje,..., koji se koriste za 
opisivanje načina kako će se informacije na web stranici 
prezentovati. CSS stilovi mogu da se čuvaju direktno u 
HTML dokumentu ili u odvojenoj datoteci. Kako god bilo, 
stranica stilova sadrži pravila koja se primenjuju na 
elemente određenog tipa. Kada se koriste eksterno, 
pravila stranica stilova postavljaju se u eksternom 
dokumentu sa ekstenzijom .css.  
Pravilo stila je instrukcija za formatiranje koja se 
primenjuje na nekom elementu na web stranici, kao što je 
pasus ili link. Pravila stilova sastoje se od jednog ili više 
svojstava i njihove pridružene vrednosti. Interna stranica 
stila postavlja se direktno unutar web stranice, dok 
eksterna leži u odvojenom dokumentu i jedno‐stavno se 
linkuje za web stranicu posebnim tagom. 
U ovom primeru, primenjena je zelena boja na tag <div> 
preko atributa stila color. Prema tome, tekst unutar taga 
<div> prikazuje se zelenom bojom. S obzirom da su oba 
taga <p> naslednici taga <div>, stil teksta zelene boje 
prenosi se na njih kao preko kaskade. Međutim, prvi <p> 
tag preinačuje stil boje u plavu boju. Krajnji rezultat je taj 
da je prvi pasus plave boje, ali drugi zadržava kaskadnu 
zelenu boju.  

Nadalje ćemo koristiti često termin element, koji 
predstavlja deo informacije (sadržaja) web stranice, kao 
što je slika, pasus, link... 

Tagovi se koriste za kodiranje elemenata, tako da 
elemente možete zamisliti kao kompletan tag sa opisnom 
informacijom (atributi, tekst, slike, itd.) unutar taga. 

Kao i mnoge druge tehnologije CSS je evoluirao tokom 
godina. Prvobitna verzija CSS, poznata pod nazivom 
Cascading Style Sheets Level 1, ili CSS1, kreirana je još 
1996. Dve godine kasnije nastao je CSS2, i premda se čini 
da je to bilo davno,tek nedavno su browseri uspeli da 
dostignu ovaj nivo. Uz snagu CSS‐a, podrška browsera je 
oduvek bio problem. Na sreću, browseri su konačno 
sustigli veći deo CSS2 tako da se može bez bojazni 
primenjivati. Na ovom kursu govorićemo o CSS2. 

Kompletna refenca za jezike CSS1 i CSS2 možete naći 
http://www.w3.org/Style/CSS/, a takođe možete saznati i 
koji su stilovi deo koje verzije CSS‐a. 

Uprkos svojoj kompleksnoj moći, CSS se lako kreira. 
Pogledajte obe stranice na ekranu. Obe stranice imaju 
više zajedničkih atributa koji mogu da se postave u 
zajedničku stranicu stilova: 

 Obe koriste font Book Antiqua za opšti tekst, 
ProseAntique za hedinge. 
 Koriste sliku parchmnt.gif za podlogu web stranice. 
 Sav tekst je obojen bojom maroon. 
 Sadrže široke margine i uvlačenje teksta. 
 Postoj dovoljno beline između redova teksta (prored). 
 Fusnote su centrirane i ispisane manjim fontom. 
 
 

Neka od ovih svojstava, boja teksta, slika u pozadini i 
centrirani sitni tekst, mogu da se postignu i sa običnim 
(zabranjenim) HTML tagovima. Međutim, druga 
formatiranja kao što su prored, margine,... izvan su 
dometa HTML/XHTML standarda. Sada se svi mogu vrlo 
lako kreirati u stranicama stilova. 

Naravno, ovde prepoznajete izvesne HTML tagove. body, 
p, h1, h2, a i div, svi oni koriste se u stranicama stilova i 
odgovaraju istim tagovima u HTML dokumentima u 
kojima biste koristili stranicu stilova. Posle naziva svakog 
taga u velikim zagradama nalaze se specifikacije koji 
određuju kako će se sadržaj obuhvaće tim tagom 
prikazati. 
U ovom slučaju, body bi trebalo da se prikaže veličinom 
teksta 12pt i fontom Book Antiqua, i ako je moguće u boji 
maroon sa proredom od 16pt. Stranica bi trebalo da ima 
margine 10pt, a u pozadini slika prikazana relativnom url 
adresom – parchmnt.gif.  
Bilo koji pasus koji počinje sa tagom <p> biće uvučen 
dodatnih 24pt sa obe strane (margine). Bilo kakav tekst 
unutar <h1> ili <h2> prikazaće se podebljan u fontu 
Lucinda Handwriting sa veličinama od 30pt i 22pt, 
respektivno. Ako korisnik nema fonta ProseAntique, 
koristiće se Lucida Handwriting. 
“pt” posle svake vrednosti označa meru u tačkama (na 
jednom inču ima 72 tačke). Ako želite drugačije, merne 
jedinice koje možete da koristite su inči, centimetri, 
pikslei, širine slova “m” (em),... 
Svak pravilo stila završava se tačkom‐zarez – “;”. Tačka‐
zarez koristi se za razdvajanje pravila stila. Običaj je 
završiti svako pravilo sa “;” tako da jednostavno možete 
dopisati drugo posle njega. 
Deklaracija u HTML kodu podrazumeva da je stranica stila 
smeštena u datoteku pod nazivom hhh.css unutar istog 
foldera. Sve dok browseri podržavaju stilove, sva svojstva 
u stranici stila primenjivaće se na sadržaj web stranice bez 
bilo kakve potrebe za HTML kodova formatiranja. Ovo 
potvrđuje konačni cilj XHTML‐a, a koji je da se razdvoji 
sadržaj web stranice od spcifičnog formatiranja 
potrebnog za njegovo prikazivanje.  
Kôd u ovom lisitingu je interesantan jer ne sadrži nikakvo 
formatiranje. Drugim rečima, nema ničega u HTML kodu 
što diktira kako će se tekst i slike prikazivati. Nikakve boje, 
fontovi, ništa. Ipak, stranica je pažljivo formatirana i 
oslikana na ekranu zahvaljujući linku ka eksternoj stranici 
stilova, hhh.css. Prava korist ovakvog pristupa jeste što se 
lako može kreirati sajt sa više stranica koje odražavaju isti 
konzistentni izgled i osećaj. A, takođe, tu je i korisnost 
izolovanja vizualnog stila iz web stranice u odvojeni 
dokument, tako da promena utiče na sve stranice. 

Ranije CSS nije uživao široku podršku browsera. Dodatno, 
podrška CSS‐u u svakom browseru nije bez grešaka. Da 
biste saznali kako koj browser podržava CSS možete 
pogledati na sajtu 
http://www.westciv.com/style_master/ 
academy/browser_support/  
ili 
http://www.webresourcesdepot.com/ html5‐and‐css3‐
browser‐compatibility‐chart/ 
 

 
Sada imate osnovno znanje o CSS‐u i kako se korišćenjem 
pravila stilova utiče na izgled web stranice. Sledeće 
sekcije pružaju kratki pregled nekih najznačajnijih 
svojstava stilova, omogućavaju vam da počnete da 
koristite CSS u vašim stranicama.  
CSS sadrži razna svojstva stilova pomoću kojih se 
kontrolišu fontovi, boje, poravnanja, margine, itd. 
Svojstva stilova u CSS‐u mogu generalno da se grupišu u 
dve glavne kategorije: 
 Svojstva uređenja (layouta)  
 Svojstva formatiranja 
Svojstva uređenja sastoje se od svojstva koja utiču na 
pozicioniranje elemenata na web stranici. Na primer, 
layout svojstva omogućavaju kontrolu širine, visine, 
margina, paddinga i poravnanja sadržaja, čak idu do toga 
da omogućavaju postavljanje sadržaja na tačne pozicije na 
stranici. Ovo je nešto što je potpuno nemoguće da se 
uradi u samom HTML kodu. 
Interni stilovi su veoma pogodni ako želite da definišete 
pravilo stila koje će se koristiti više puta unutar jedne web 
stranice. Međutim, u nekim slučajevima može da se desi 
da je potrebno da primenite jedinstven stil na samo je 
specifičan element. Ovo zahteva upotrebu inline pravila 
za stil. Na primer, možete kreirati i primeniti pravilo stila 
unutar <p>, <div>, ili <span> tagova preko atributa style. 
Ovakav tip stila poznat je pod nazivom inline stil, jer se na 
licu mesta u HTML kodu definiše i primenjuje. 
Inače, tagovi <span> i </span> su prazni tagovi i sami 
nemaju nikakvu funkciju osim što se njima može 
obuhvatiti određena oblast sadržaja na koji biste mogli da 
primenite atribut style. Razlika između <div> taga i taga 
<span> je u tome što tag <div> predstavlja blok element, 
a time sve posle njega prelazi u novi red, dok tag <span> 
to nije. Prema tome, tag <span> bi trebalo da se koristi za 
modifikovanje bilo kog dela teksta unutar rečenice ili 
pasusa bez primene preloma reda. 
Tek da shvatite koje su vam opcije u vezi sa primenom 
CSS stilova na web stranicama, na ekranu su prikazana tri 
pristupa koja možete da koristite: 
Kao što se može videti, postoji ogromna fleksibilnost kada 
je u pitanju način na koji se primenjuju CSS pravila za 
stilove. Preporuka je da se koristi pristup eksternom CSS 
datotekom ukoliko kreirate sajt sa više stranica koje treba 
održavati tako da budu sličnog izgleda. 
Interni stil je dobra opcija kada je u pitanju jedna stranica 
u kojoj želite da organizujete i eventualno ponovo 
upotrebite neke zajedničke stilove. 
Konačno, in‐line pravila za stilove su priručna samo kada 
je potrebno definisati jedinstven stil na jednom elementu 
na web stranici. 

 
Selektori su jedan od najvažnijih aspekata CSS‐a, jer se 
koriste za izbor elemenata na HTML stranici na na koje 
može da se primene stilovi. Selektori mogu da se definišu 
na razne načine. 
Univerzalni selektor je specijalan slučaj primene znaka 
"*", koji odgovara svim elementima. Primer, 
* { margin: 0; padding: 0; } 
Selektori tipa elementa, su selektori kojima odgovara 
svaka pojava datog elementa na web stranici sa 
odgovrajućim imenom tipa elementa. Primer, 
p { color: blue; } 
Seletor tipa id koristi se za definisanje stilova jedan, 
jedinstven element. Ovi selektori definišu se svojim 
nazivom sa prefiksom "#". Primer, 
#citat { font‐style: italic; text‐align:center; } 
Selektor tipa klase je naziv označen sa tačkom („.“) kao 
prefiksom. Ovi selektori mogu da se primenjuju na bilo 
koji HTML element koji poseduje atribut class. Svi 
elementi kojima je pridružena data klasa, imaće identično 
formatiranje. Primer, 
‐ gemerička klasa 
.plavo { color: #0000ff; } 
U ovom primer, svaki HTML element koji sadrži tekst i 
kome je pridružena pova klasa obojiće tekst u plavo.  
‐ klasa pridružena konkretnom elementu 
p.plavo { color: #0000ff; }  
ovaj poslednji primer, primenjuje plavu boju teksta samo 
na HTML elemente pasusa. 
Razlika između ID i klase je u tome što se ID može koristiti 
za identifikaciju samo jednom elementa, dok sa klasom 
mogu da se identifikuju više elemenata. 
text‐align  
Poravnava tekst levo, desno i na centar, a moguće je 
poravnavanje obostrano pomoću vrednosti justify.  
text‐align‐last  
Određuje kako će se poravnati poslednji red teksta. 
Radi samo za elemente kod kojih je svojstvo text‐align  
podešeno na justify. 
text‐decoration  
Koristan je isključivanje podvučenosti linkova; 
jednostavno se setuje na none. Podržane vrednosti su 
underline, overline i line‐through.  
text‐decoration‐color  
Poravnava tekst levo, desno i na centar, a moguće je 
poravnavanje obostrano pomoću vrednosti justify.  
text‐indent  
Tekst se uvlači mimo margine za zadatu vrednost. 
Podržane merne jedinice su (px, in, cm, mm, pt, pc), a 
možete zadati i procenat širine prozora browsera (na 
primer, 20%). 
text‐shadow  
Ovo svojstvo tekstu pridružuje jednu ili više senki. Više 
senki se određuje razdvajanjem „zapetom“ posle 
definisanja jedne senke. h‐senka je horizontalna 
lokacija senke u odnosu na tekst, v‐senka je vertikalna 
lokacija, rasipanje predstavlja ivicu senke (može biti 
oštra ili rasuta) i boja senke. 
text‐transform  
Određuje promenu velikih‐malih slova. Vrednost 
capitalize menja svako prvo slovo reči u veliko slovo. 
font‐variant  
Određuje da li tekst treba da bude prikazan „malim 
velikim slovima“ (small‐caps).  
word‐spacing  
Povećava ili smanjuje belinu između reči.  
letter‐spacing  
Povećava ili smanjuje belinu između slovnih znakova.  
Pojavom HTML5 standarda uvedeni su semantički 
elementi kao što su <header>, <footer>, <section>, 
<article>, <aside>, <nav>, <audio>, <video>, <canvas>, i 
mnogi drugi. 

HTML element <article> se koristi za prikazivanje članaka. 
Da budemo još određeniji, sadržaj unutar <article> je 
nezavisan od ostalog sadržaja na sajtu (mada, može da 
bude povezan). Pod „nezavisan“ se smatra da sadržaj 
može da stoji samostalno. Primer upotrebe <article> 
mogao bi da bude stavka na forumu, novinski članak, 
stavka u blogu ili komentar posetioca sajta. 

HTML tag <section> se koristi za prikazivanje sekcije 
unutar članka (unutar <article>). Bilo koja web stranica ili 
članak može da sadrži više sekcija. Na primer, osnovna 
stranica neke firme može da sadrži sekciju u kojoj 
upoznajemo kompaniju, sekciju sa najnovijim 
obaveštenjima i sekciju sa informacijama za kontakt. 

Element <header> predstavlja zaglavlje dokumenta ili 
sekcije i može u sebi da sadrži naslove, podnaslove, 
informacije o verzijama, kontrole navigacije, i td. 
Namena elementa <header> je da najčešće sadrži naslov 
sekcije (<h1> do <h6>, ili element <hgroup>). Međutim, 
ovo nije obavezno. Element <header> takođe može da se 
koristi da obuhvati tabelu sadržaja sekcije, upit za 
pretraživanje ili neke relevantne logotipe. 
Element <header> ne može da se postavi unutar 
elemenata <footer>, <address> ili drugog <header> 
elementa.  
Element <footer> koristi se za definisanje podnožja HTML 
dokumenta ili sekcije. Podnožja obično sadrže informacije 
kao što su ime autora dokumenta, informacije o zaštiti 
prava kopiranja, linkove ka uslovima korišćenja, polisa o 
privatnosti, i tako dalje. 
Kontakt informacije unutar elementa <footer> bi trebalo 
da se označe tagom <address>. Iako su podnožja obično 
postavljena na dnu dokumenta, to nije obavezno (iako 
možete da ga postavite unutar elementa <header> ili 
unutar drugog <footer> elementa, on ne može da sadrži 
element <header>). 
Dokument/sekcija može da sadrži i više podnožja.  
Element <aside> koristi se za predstavljanje manjeg 
sadržaja izvučenog iz konteksta okolnog teksta u okviru 
članka ili web stranice. Ova vrsta sadržaja često se 
predstavlja u bočnim stupcima. Primer ovog elementa je 
je tkzv., call‐out, koji služe da vode čitaoca kroz članak ili 
da istaknu ključnu temu. 

Element <nav> koristi se za deklarisanje sekcije za 
navigaciju unutar HTML dokumenta. Sajtovi poseduju 
posebne sekcije posvećene navigacionim linkovima – 
linkovima koji omogućavaju korisniku da se kreće kroz 
sajt. Takve linkove svakako treba postaviti unutar <nav> 
tagova. 

Element <figure> koristi se za označavanje ilustracija, 
dijagrama, fotografija, listinga, i td. Element <figure> 
može da se koristi da se uz sliku (ili video) postavi i naslov 
iste. Unutar ovog elementa može da se postavi element 
<figcaption> koji obezbeđuje naslov za sadržaj unutar 
elementa <figure> 
Svojstvo display oslanja se na poznati koncept relativnog 
pozicioniranja, što znači da se elementi pozicioniraju 
relativno u ondosu na lokacije drugih elemenata na 
stranicu. CSS takođe podržava apsolutno pozicioniranje, 
što omogućava postavljanje elementa na egzaktnu 
lokaciju nezavisno od drugih elemenata.  
Pomoću svojstava width i height korisnik ima kontrolu na 
veličinom pravougaone oblasti elementa. Kao i mnoga 
druga svojstva CSS‐a koja se odnose na veličinu, width i 
height mogu da se zadaju u različitim mernim jedinicama: 
in – inči 
cm – centimetri 
mm – milimetri 
px – pikseli 
pt – tačke. 
Jedinice se mogu mešati ili uklapati na proizvoljan način 
unutar stranice stila, ali je generalno dobra ideja da se 
držite jedne iste jedinice unutar sličnih svojstava stilova. 
Na primer, možete sve određivati u pt za fontove, ili px za 
dimenzije. Primer prikazan podešava element da bude 
širine 200 piksela. 

Kontrola pozicije HTML elemenata. 

CSS svojstva formatiranja koriste se za kontrolu izgleda 
sadržaja web stranice, nasuprot kontroli fizičke pozicije 
sadržaja. Jedno od najpopularniji svojstava formatiranja je 
border, pomoću kojeg se postavlja vidljiva granica oko 
elementa u obliku pravougaonika ili delimičnog 
pravougaonika. Sledeća svojstva omogućavaju sredsva za 
opisivanje bordura nekog elementa: 
border‐width  Širina ivice bordure. 
border‐color  Boja ivice bordure. 
border‐style  Stil prikaza ivice bordure. 
border‐left  Leva bordura. 
border‐right  Desna bordure. 
border‐top  Gornja bordura. 
border‐bottom  Donja bordura. 
border  Sve strane bordure. 
Svojstvo border‐width koristi se za određivanje širine 
bordure. Obično se izražava u pikselima: 
border‐width:5px; 
Svojstva border‐left, border‐right, border‐top, border‐
bottom omogućavaju prikaz pojedinačnih bordura, a 
svojstvo border poslednji omogućava ili isključuje prikaz 
svih bordura. 

Kod upotrebe samog border, potrebno je definisati i 
sledeće stilove odvojene razmakom: 

 border‐width, border‐style i border‐color.  

Na primer, 

border: 10px  double  red; 

Novitet u CSS3 jeste zaobljenje u temenima 
pravougaonih elemenata. Ovo se postiže svojstvom 
border‐radius 

border‐radius: 30px; 
Takođe, još jedan novitet jeste da se koristi slika za 
borduru.  

border‐image : url(slika.png)  30  30  stretch; 

Na ekranu se vidi mala sličica koja je upotrebljena 
za borduru <div> elementa i to sa vrednošću 
stretch. 

 

 
 

 

 
 

 

U ovom primeru, samo prvi pasus se ispisuje 
podebljanim fontom, veličine 40px, dok svi ostali 
pasusi na ovoj web stranici ispisuju se uobičajenom 
veličinom i sa uobičajenim fontom.