Detaljni CSS vodič za početnike

Sadržaj:

1. Uvod …………………………….. ……………. …. …. ….. str. 1

2. Gdje pohraniti CSS specifikaciju? …. … …… ….. str. 4
3. Selektori i njihovi trikovi.. ….. …… ….. ….. …. str. 6
4. CSS klase: najbolji način za definiranje stilova ……. …. str. 7
5. Korištenje <DIV> i <SPAN> tagova za umetanje CSS stilova.. str. 8
6. Pomoću kojih vrijednosti možemo zadavati CSS stilove? ….. str. 9
7. Koje sve stilove imamo na raspolaganju? …. ….. …… str. 10
8. Box stilovi i rubovi (borders) …… …… … ….. …… str. 12
9. Praktični primjeri: popularni CSS stilovi …… …… ….. str. 13
10. Alati za pisanje CSS stilova i korisni linkovi….. ….. …… str. 14

1. Uvod: 7 razloga zašto je CSS dobar za vaš site

Razlog broj 1: odvajanje prezentacije od sadržaja

HTML je prvotno kreiran da browseru kaže stvari poput "Ovo je naslov", "ovo je tablica s
podacima", "Ovo je link". Onda se web razvio i nastala je potreba da se stranice uljepšaju i tako je
HTML počeo govoriti "prikaži link u fontu Arial veličine 3 i još to podebljaj". Ljepotu weba platili smo
nedostatkom da se sadržaj 'zagađuje' instrukcijama o tome kako prikazati taj sadržaj.

CSS iz web dokumenata uklanja definicije izgleda i sprema ih na posebno mjesto. Odvajanje
prezentacije od sadržaja prava je filozofija weba!

Razlog broj 2: CSS je vrlo jednostavan

CSS pravila vrlo su jednostavna. Sve što trebate naučiti je kako zadati pravilo i kako to pravilo
umetnuti u HTML dokument. Osnovna pravila možete naučiti za nekoliko minuta i pisati ih u
običnom text editoru.

Razlog broj 3: CSS je moćniji i fleksibilniji od HTML-a

CSS uvodi nove lijepe efekte koje HTML nema. Tako možete povećati razmak između redova u
tekstu, dodati tablici točkasti rub, maknuti podcrtu linku, umjesto crne točkice za bullet koristiti
neku vašu sliku, promijeniti kursor...

Osim kozmetičkih dodataka, pomoću CSS-a moguće je pozicionirati objekte na stranici, tako da se
jednog dana više nećete morati mučiti s tablicama! Pozicioniranje se rjeđe koristi zbog nekih
bugova, ali postojanje ove mogućnosti promijenit će način na koji svi razmišljamo o dizajnu web
stranica.

Razlog broj 4: jednostavno i brzo održavanje

CSS specifikaciju spremate u poseban file. Ako želite npr. odrediti da svi linkovi na vašem siteu
budu crvene boje, taj stil kreirate u CSS fileu i svi linkovi na siteu bit će crveni. Ako sutradan
promijenite mišljenje i poželite zelene linkove, dovoljno je promijeniti jednu riječ u CSS fileu -
posao od tri sekunde!

1
Razlog broj 5: CSS značajno smanjuje veličinu web stranica
...što znači da će se vaše web stranice i brže učitavati!

Primjer: da biste korištenjem HTML tagova neki link obojali u zeleno, podebljali ga, odredili mu font
i veličinu, u dokumentu će pisati sljedeće:

<a href="nekilink.htm">
<font face="Verdana, Arial, Helvetica, sans-serif"
size="2"
color="#009933">
Neki link
</font></a>

Pomoću CSS-a to može izgledati ovako:

<a class="stil2" href="nekilink.htm">

Neki link</a>

Puno manje slova, zar ne? Specifikacija zelene boje, podebljanja, veličine i vrste fonta stajat će u
zasebnom CSS fileu pod imenom stil2.

Razlog broj 6: <FONT> tag će jednog dana nestati iz HTML standarda

Nemojte se previše naviknuti na <FONT> tag. Najnoviji HTML 4.0 već je označio <FONT> tag kao
nepotreban i moguće je da će u idućim verzijama biti potpuno izbačen. Osim ovog taga postoji
čitava lista tagova koji se više ne preporučuju.

Razlog broj 7: CSS danas ima sve bolju podršku vodećih browsera
Najnoviji Internet Explorer 6.0 ima 100%-tnu podršku za CSS specifikaciju verzije 1. Njegove
starije verzije 5.0 i 5.5 solidno podržavaju CSS, a ni Operi 5 ne ide loše.

Netscape je ovdje loš primjer, jer tek njegov Netscape Communicator 6.0 dobro podržava CSS.
Međutim, ta se verzija zbog sporosti i bugova vrlo malo koristi, a verzija 4.7 doslovno očajno
prikazuje CSS.

Ako se odlučite za CSS, korisnici sa starijim browserima i browserima koji loše prikazuju CSS ne bi
trebali imati problema s korištenjem web stranica. One možda neće biti tako lijepe kako ste ih vi
zamislili i kreirali, ali funkcionalnost ne bi trebala biti narušena.

Što je to CSS?

CSS, Cascading Style Sheets, se dodaje HTML dokumentu te nam dozvoljava

jednostavnu kontrolu stila i izgleda web stranice. CSS nam nudi mnogo fleksibilnosti i
stvaranje efekata koji s običnim HTML tagovima nisu mogući.

Umetanje Style Sheet-a

Cascading Style Sheet se4 može umetnuti u HTML na 3 načina.

 dodavanjem direktno u HTML tag, što se zove "inline" style sheet.

2
  kao dio HTML dokumenta (upisivanje u HTML dokument u <head> područje) – to
se zove "internal" style sheet
 kao odvojeni dokument koji linkom pozivamo iz HTML dokumenta – to je
"external" style sheet

Inline Style Sheet

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov Dokumenta</title>
</head>
<body>
<p style="style elementi idu ovdje">
</p>
</body>
</html>

Inline style nije naručito praktičan jer morate pisati CSS za svaki tag.

Internal Style Sheet

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov Dokumenta</title>
<style type="text/css">
style elementi idu ovdje
</style>
</head>
<body>
</body>
</html>

External Style Sheet

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov Dokumenta</title>
<link href="ime-css-dokumenta.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>

Vanjski (external) file povezan je s našim HTML dokumentom pomoću:

<LINK href="filename.css" rel="stylesheet" type="text/css">

3
Svi style elementi biti će smješteni u poseban, odvojeni CSS dokument te mu se
dodaje .css extenzija.

External file koristite ako imate puno web stranica. Ako npr. želite promijeniti boju ili
veličinu texta na svim vašim stranicama nećete morati mijenjati sve HTML dokumente nego
samo onaj sa .css extenzijom.

CSS nije ništa drugo nego skup pravila - stilova koja govore browseru kako prikazati određeni
HTML tag. Idemo prvo pogledati kako izgleda to pravilo.

Osnovna CSS sintaksa: selektor {stil: vrijednost }

Svako CSS pravilo napisat ćete u sljedećem obliku (kôd se radi preglednosti obično piše u nekoliko
linija):

selektor {
ime-stila1: vrijednost1;
ime-stila2: vrijednost1 vrijednost2
}

Selektor definira kojem HTML tagu želite dodati CSS stil i u vitičastoj zagradi određujete kako će
taj stil izgledati. Stil određujete tako da naznačite ime stila i dodijelite mu vrijednost (pogledajte
sintaksu: stil i njegovu vrijednost odvajate dvotočkom).

Ako definirate više stilova, odvajate ih točka-zarezom. Točka-zarez ne piše se iza posljednjeg
navedenog stila.

Jednom stilu možete dodijeliti više vrijednosti i tada ih samo navodite bez interpunkcija.

Primjer:

TABLE {
background-color: white;
border: 2px solid gray
}

Ovime smo kao selektor odabrali tag TABLE i odredili da će svaka tablica u našem dokumentu imati
bijelu pozadinu i rub širine 2 piksela iscrtan punom crtom sive boje.

Primijetite da su stilu border dodane tri vrijednosti koje smo odredili bez upotrebe interpunkcija.

Ova osnovna sintaksa je vrlo jednostavna - zapamtite gdje idu zagrade, dvotočke i točke-zarezi i
ne možete pogriješiti. S vremenom ćete naučiti i koje izraze koristiti kao ime-stila i vrijednost -
postoji samo nekoliko desetaka mogućnosti koje se mogu pojaviti na tim mjestima.

2. Gdje pohraniti CSS specifikaciju?

Postoje 3 načina da pohranite CSS pravila:

1. izvan HTML dokumenta (external style sheets)

4
 Ljepota i snaga CSS-a leži upravo u mogućnosti da se svi stilovi koje ćete koristiti na
cijelom siteu pohrane izvan HTML dokumenta. To nam omogućuje da promjenom stila na
jednom jedinom mjestu promijenimo prikaz po cijelom siteu!

Ovom metodom sve stilove spremamo u zaseban CSS dokument - običan file s .css
ekstenzijom kojeg možete napisati u Notepadu i snimiti npr. u root direktorij u kojem se
nalazi i vaš homepage. U njemu ćete definirati sva CSS pravila koja vam trebaju na siteu i
nazvati file npr. mojsite.css.

Eksterni .css file treba povezati s HTML dokumentom. To se radi uglavnom pomoću
<LINK> taga u <HEAD> sekciji:

<HEAD>
<TITLE> Naslov stranice </TITLE>

<LINK rel="stylesheet" type="text/css"

href="http://www.webmajstori.net/stil.css">
</HEAD>

Postoji još jedna mogućnost pozivanja eksternih CSS dokumenata: pomoću @import
funkcije koja se umeće slično kao i <LINK> tag. Međutim, tu funkciju slabo podržava
Netscape i posljedice njenog korištenja su različite od korištenja <LINK> metode.
Preporučujemo vam da zasad kao početnici zaboravite @import funkciju. Više o toj metodi
možete saznati na službenoj W3C stranici sa CSS specifikacijom.

Jednom kad povežete HTML dokument s .css fileom, stilovi definirani u njemu primjenjuju
se na tagove pomoću class atributa - o tome ćemo nešto kasnije.

2. unutar <HEAD> taga HTML dokumenta (embedded, document-level style sheets)

CSS definiramo unutar specijalnog <STYLE> taga:

<HEAD>
<TITLE> Naslov stranice </TITLE>
<STYLE type="text/css">
P { font-size: large; color: red }
</STYLE>
</HEAD>

Primijetite da unutar <STYLE> taga obavezno morate definirati tip stila: ovdje je to
type="text/css".

Ova metoda definiranja CSS stilova dobra je ako različitim HTML stranicama želite dodati
različite stilove.

unutar samog HTML taga (inline styles)

Stilove možemo umetati u gotovo svaki HTML tag pomoću atributa style i direktnog
specificiranja stila na sljedeći način:

<P style="font-size: large; color: red">

Neki tekst paragrafa prikazan
velikim slovima i crvenom bojom
</P>

5
 Pažnja! Nemojte pomiješati <STYLE> tag koji smo koristili u metodi pod 2) i style atribut
koji koristimo ovdje. Radi se o dvije različite stvari (jedno je tag, a drugo atribut).

Ova metoda je vrlo jednostavna, ali nije uvijek pogodna. Budući da ovako zadajete stil za
svaki HTML tag posebno, cijeli dokument može postati vrlo kompliciran za održavanje.
Ovakvim zadavanjem stilova gubite većinu prednosti zbog kojih se CSS koristi.

Inline stilovi mogu biti korisni ako vam određeni stil treba samo na jednom jedinom mjestu
i nigdje više - tada bi bilo glupo taj stil definirati globalno i nepotrebno povećavati veličinu
CSS dokumenta.

Inline stilovi imaju najviši prioritet od svih metoda za umetanje CSS stilova - specifikacija u
inline stilu će pregaziti sve ostale CSS specifikacije. Upravo u tu svrhu se inline stilovi
najčešće i koriste.

3. Selektori i njihovi trikovi

Selektore ste susreli u prvom koraku ovog vodiča kad ste naučili kako korektno napisati CSS
pravilo. Tada smo rekli da selektor nije ništa drugo nego određeni HTML tag kojeg navodite ispred
vitičastih zagrada.

Proširimo sad osnovnu sintaksu CSS-a!

Nizanje selektora
Jedan te isti stil možemo primijeniti na nekoliko selektora (HTML tagova) odjednom:

H1, H2, H3 {
color: blue; text-align: center
}

Svi naslovi sadržani u heading tagovima H1, H2 i H3 bit će plavi i centrirani. Svaki put kad isti skup
stilova želite primijeniti na nekoliko različitih tagova, koristite nizanje selektora. Primijetite samo da
kod nizanja selektore morate odvojiti zarezom.

Kontekstualni selektori
CSS vam omogućuje da određene stilove primijenite samo kad se neki HTML tag nalazi u
određenom kontekstu, tj. u određenoj okolini. Zamislite da želite sadržaj u italic tagu <I> obojan
zelenom bojom, ali samo u naslovima. Tada biste napisali sljedeći stil:

H1 I { color: green }

Svaki put kad browser naleti na italic tekst unutar H1 naslova, on će taj tekst prikazati zelenom
bojom. Italic tekst u ostatku sadržaja neće biti zelen. Na ovaj način možete uvjetovati prikazivanje
stilova. Zapamtite samo da u ovom slučaju ne smijete koristiti zareze jer će to browser
protumačiti kao nizanje.

Kontekstualne selektore možete kombinirati s nizanjem:

H1 I, H2 I, H3 I {
color: green; font-weight: bold
}

6
Svaki italic tekst unutar H1, H2 i H3 naslova bit će zelen i podebljan.

4. CSS klase – najbolji način definiranja stilova

Dosad smo CSS pravila pisali tako da smo selektirali neki HTML tag i odredili koje stilove će on
poprimiti. Na taj način smo određeni skup stilova uvijek ograničavali na određene tagove. Međutim,
CSS stilove možemo koristiti i univerzalno i tada koristimo klase.

Klasa je skup CSS pravila koji se definira imenom klase. Da biste napisali CSS pravilo pomoću
klasa, kao selektor ćete navesti ime klase koje sami zadajete i u vitičastim zagradama definirati
stilove koje će ta klasa imati. Da biste vidjeli efekte koje ste u klasi definirali, ime klase trebate
pozvati u HTML dokumentu pomoću class atributa.

Generičke klase
Generička klasa nije vezana za pojedini HTML tag i može se upotrebljavati na neograničenom broju
lokacija unutar HTML dokumenta. Definiramo je proizvoljnim imenom kojemu prethodi točka:

.zeleno { color: green }

Generičku klasu pozivate pomoću class atributa:

<A href="nekilink.htm" class="zeleno">

Ovo je primjer linka </A>

Napomena: ime klase možete pozvati i bez stavljanja u navodnike, međutim pravila dobrog
pisanja HTML-a nalažu da se vrijednosti svih atributa pišu u navodnicima.

Klase specifične za pojedine HTML tagove

Određenu klasu možete vezati uz pojedini HTML tag. U tom slučaju ispred točke navodite tag na
koji će se klasa primjenjivati:

P.zeleno { color: green }

Ovime ste definirali klasu zeleno i dodijelili klasu HTML tagu <P>. Svaki put kad želite neki
paragraf obojati zeleno, trebat ćete unutar HTML dokumenta pozvati klasu na sljedeći način:

<P class="zeleno">
Zeleni tekst paragrafa <P>

Pseudo-klase
Pseudo-klase vam omogućuju da definirate izgled pojedinih HTML tagova u određenim stanjima.
u CSS1 specifikaciji postoji samo 5 pseudo-klasa od kojih su najpoznatije one koje određuju izgled
linkova, tj. izgled <A> taga.

Pseudo-klase se (umjesto točkom) od HTML taga odvajaju dvotočkom.

Pseudo-klase su zasad definirane samo za <A> i <P> tagove:

7
A:link - određuje izgled HREF neposjećenog linka
A:active - određuje izgled HREF aktivnog linka
A:visited - određuje izgled HREF linka kojeg smo već posjetili

P:first-line - kontrolira izgled prve linije paragrafa

P:first-letter - kontrolira izgled prvog slova paragrafa

Najkorištenije pseudo-klase su one za <A> tag. Tako možemo odrediti da link ne bude podcrtan i
da bude crven:

A:link {
text-decoration: none; color: red
}

Korištenje ID oznaka kao klasa

Kao klasu možete koristiti ID oznake, međutim postoji jedna velika razlika. Dok istu klasu možete
koristiti na više mjesta i za više HTML tagova, ID oznake ne možete višestruko koristiti. One se
koriste da bi se određenom elementu dodijelio specifičan stil koji neće imati nijedan drugi element
u HTML dokumentu.

Sintaksa je jednostavna. Na istom mjestu gdje biste inače definirali klasu, definirajte ID oznaku:

#crno { color: black }

ID oznaku pozivate pomoću ID atributa unutar raznih HTML tagova:

<H3 id="crno">
Ovo je naslov crne boje. </H1>

Neki browseri će vam možda dozvoliti da ID oznaku koristite na više mjesta, ali to definitivno nije
željeno ponašanje i bolje je da koristite klase.

Napomenimo također da ne možete biti sigurni da će vam Internet Explorer uvijek dobro prikazati
stilove određene pomoću ID oznaka jer je prikaz ID oznaka u IE bugovit.

5. KORIŠTENJE <DIV> I <SPAM> TAGOVA

Ova dva HTML taga jesu odličan način da bilo kojem HTML elementu ili dijelu HTML koda dodate
CSS stil. Do sad ste stilove primjenjivali na određenim HTML tagovima, no stil možemo primijeniti i
na jedno jedino slovo teksta.

<DIV> i <SPAN> koriste se da bismo određene HTML elemente grupirali zajedno i primijenili CSS
stilove na njih. Razlika između ova dva taga je u tome što se <SPAN> koristi unutar teksta za
primjenu stila na određena slova, dok <DIV> označava početak i kraj određene sekcije (division)
dokumenta i uvijek umeće prekid unutar teksta, postavljajući sadržaj u novi red.

Da bismo primijenili stilove na HTML elemente grupirane u <DIV> i <SPAN> tagove, koristimo
class atribut unutar tih tagova:

<P>
SPAN tag možemo primijeniti

8
<span class="zeleno"> unutar teksta </span>
bez umetanja prekida.
</P>

To izgleda u browseru ovako:

SPAN tag možemo primijeniti unutar teksta bez umetanja prekida.

Pokušajte u istom ovom primjeru <SPAN> tag zamijeniti s <DIV> tagom i pratite što će se
dogoditi. Generalno, text će u browseru biti prikazan s prekidom linije tamo gdje je umetnut
<DIV> tag:

DIV tag
odvaja tekst
od okolnog sadržaja.

6. VRIJEDNOSTI KOJE ZADAJU CSS STILOVE

Stilovima dodjeljujemo vrijednost i za to imamo na raspolaganju 4 načina: numeričke vrijednosti,

boju, URL i rezervirana imena.

Numeričke vrijednosti
Numeričke vrijednosti zadajemo pomoću brojeva koje kombiniramo s različitim mjernim
jedinicama:

pixel (px) - point (pt) - pica (pc) - Em (em) - Ex (ex) - Inches (in)
millimeters (mm) - centimeters (cm) - percentage (%)

Primjer:

TABLE { border: 2px }

Boja
Boju zadajemo pomoću RGB vrijednosti (npr. #000000) ili navođenjem imena boje. Imena poput
blue ili green dodijeljena su samo osnovnom setu od 16 boja.

Primjer:

TABLE {
background-color: white
}

daje tablici bijelu pozadinu isto kao i

TABLE {
background-color: #FFFFFF
}

9
URL
URL se zadaje drukčije nego u HTML standardu.

Primjer:

.pozadina {
background-image: url(poz.gif)
}

URL se poziva navođenjem rezervirane riječi url i definiranjem putanje u okrugloj zagradi. Ne
smijete ostaviti razmak između riječi url i otvorene zagrade.

Putanja koji se definira u zagradi može biti apsolutna (u tom slučaju navodi se puna putanja
zajedno s http://) ili relativna (s obzirom na URL definiranog CSS-a).

Kad zadajemo putanju relativno, relativnost se odnosi na lokaciju datoteke u kojoj je definiran CSS
stil. Ako stilove pohranite u vanjsku .css datoteku, putanja će biti relativna u odnosu na tu .css
datoteku. Ako pak koristite embedded ili inline CSS stil, putanja je relativna u odnosu na HTML
dokument u kojem je definiran CSS stil.

Rezervirana imena
Često se vrijednosti stilova zadaju imenima koja su predefinirana u CSS standardu. Neka od tih
imena su imena boja koja smo već spomenuli.

Rezervirana imena koja ćete često koristiti su npr. imena za veličinu teksta (large, medium, small),
imena raznih efekata (dotted, underline, bold) itd.

7. KOJE STILOVE IMAMO NA RASPOLAGANJU?

Postoji nekoliko desetaka različitih stilova koji kontroliraju prikaz vašeg HTML dokumenta. Sve
stilove grupiramo prema tome kakav prikaz kontroliraju:

 fontovi, tekst i boje

 pozadina
 box i stilovi rubova (borders)
 liste
 pozicioniranje

Fontovi, tekst i boje

Nećemo ulaziti u popisivanje svih mogućih stilova koji postoje, nego ćemo samo navesti što sve u
ovoj kategoriji možete kontrolirati pomoću CSS-a.

Sve na što ste navikli u HTML <FONT> tagu nalazi se i ovdje: određivanje fonta (Arial, Verdana...),
zatim efekti poput podebljanog ili kurzivnog teksta, veličina, boja.

10
Tekst se može uljepšati nekim novim efektima kao što je visina reda teksta, razmak između slova,
riječi i redova, poravnavanje i uvlačenje teksta, te efekti poput podcrtavanja, precrtavanja itd.

Primjer definiranja stila teksta unutar jednog taga:

P.sirokitext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
color: #000000;
letter-spacing: 4px
}

Pozadina
Umjesto da izgled pozadine eksplicitno određujete u <BODY> tagu kao do sada, primijenite CSS!
Možete odrediti boju, pozadinsku sliku, način prikaza pozadine (fiksirana ili pokretna slika,
ponavljanje samo po x- ili y-osi) te čak poziciju pozadine.

Primjer klase koja definira sliku kao fiksiranu pozadinu:

.pozadina {
background-image: url(poz.gif);
background-repeat: no-repeat;
background-attachment: fixed
}

Ovako definiranu klasu jednostavno pozovite iz <BODY> taga li nekog drugog taga:

<BODY class="pozadina">
...
</BODY>

Liste
Liste su u CSS-u dobile nove efekte, poput mogućnosti određivanja neke gif sličice koja će se
prikazivati umjesto bulleta.

Primjer liste koja umjesto kao bullet koristi neku sliku:

UL {
list-style-image: url(bullet1.gif)
}

Pozicioniranje
Ova sposobnost CSS-a nije dovoljno iskorištena zbog loše implementacije u browserima. CSS će se
jednog dana koristiti za pozicioniranje HTML elemenata u trodimenzionalnom prostoru.

Zasad ćemo samo spomenuti da se pozicioniranje dosta koristi u izradi DHTML efekata i bit će
najbolje da ovu kompleksnu temu obradimo jednom kad budemo pričali o DHTML-u.

11
Ako se želite detaljnije upoznati sa CSS pozicioniranjem, skočite do zadnjeg koraka ovog vodiča i
pogledajte koje vam linkove preporučujemo.

8. BOX STILOVI I RUBOVI

Tematika box stilova je malo složenija pa ćemo je obraditi

posebno.

Box stilovi omogućuju sasvim nove efekte. Da biste ih

razumjeli, potrebno je znati da CSS svaki element HTML
stranice tretira kao da je oko njega opisan pravokutnik
(box). Pogledajmo to zajedno na slici:

Svaki od ovih svojstava: width, border, padding i margin

mogu se zasebno kontrolirati.

Padding je razmak između elementa i ruba (bordera).

Margin je vrijednost koja određuje razmak između elemenata u HTML dokumentu. Kad nekom
elementu odredite marginu, vi zapravo povećavate prostor koji taj element zauzima i dodajete mu
nevidljivi rub (na slici je taj nevidljivi rub izražen većim iscrtkanim pravokutnikom).

Ako su vrijednosti margine i paddinga na nuli, element zauzima samo prostor određen njegovom
vlastitom širinom (element width). Povećavate li njihove vrijednosti, element zauzima sve više i
više mjesta.

Za svaki element može se definirati pozadina i svi stilovi pozadine - naglasimo samo da će se
pozadina prostirati na prostoru kojeg odredite s vrijednošću za padding.

Rubovi (borders)
Do sada smo u standardnom HTML-u kod rubova (borders) mogli odrediti samo širinu i boju. CSS
nam omogućuje da svaki rub (lijevo, desno, gore i dolje) ima vlastita svojstva poput boje, širine i
efekta. Posebno su zanimljivi efekti rubova: osim pune crte, sad možemo imati točkasti,
isprekidani, dvostruki rub, te još neke zgodne efekte.

Primjer dodavanja zelene pozadine, iscrtkanog ruba i paddinga tekstu:

.txtpozadina {
background-color: green;
padding: 5px;
border: 2px dashed
}

Primijenimo li ovaj stil na tekst "Obojano!", dobivamo:

Obojano

Primijetite da je zbog vrijednosti stila padding prostor koji zauzima pozadina proširen za 5 piksela
ispod, iznad, lijevo i desno od riječi "Obojano".

12
 9. POPULARNI CSS STILOVI

Nepodcrtani link
Sljedeći stil redefinira <A> tag:

A { text-decoration: none }

Efekt kod prelaska mišem preko linka

Želite li da vam link dobije npr. podcrtu i postane zelen, koristite pseudo-klasu:

A:hover {
text-decoration: underline;
color: green
}

Hover pseudo-klasa je dio CSS2 specifikacije i nije podržana u Netscape 4.x browserima.

Tekst s obojanom pozadinom

Recimo da želite određenom tekstu dati zelenu pozadinu i proširiti tu pozadinu za 5 pixela. Kreirat
ćete neku klasu (ovdje je to klasa s imenom .txtpozadina) i pomoću <SPAN> taga primijeniti taj
stil na određeni tekst:

.txtpozadina {
background-color: green;
padding: 5px;
}

Tekst sa zelenom pozadinom širokom 5 pixela!

Evo kako ubaciti ovaj predefinirani stil u HTML:

<SPAN class="txtpozadina">
Tekst sa zelenom pozadinom širokom 5 pixela!
</SPAN>

Promijenite izgled kursora / mouse pointera!

Ovaj stil ne spada u CSS1, već u CSS2 specifikaciju, što znači da promjena kursora možda neće biti
vidljiva u starijim browserima.

Bez obzira želite li redefinirati izgled kursora u cijelom dokumentu ili na nekom dijelu dokumenta
(npr. samo kad se miš nalazi iznad tablica), ubacite u svoju CSS klasu npr. sljedeći stil:

cursor: crosshair

Ovo će kursor promijeniti u križić.

13
Pogledajmo to na gornjem primjeru gdje smo tekstu dodali zelenu pozadinu i proširili pozadinu za 5
piksela. Idemo odrediti da mouse pointer postane križić kad prijeđemo mišem preko tog teksta sa
zelenom pozadinom! Samo ćemo u postojeću klasu ubaciti definiciju kursora:

.txtpozadina {
background-color: green;
padding: 5px;
cursor: crosshair
}

Isprobajte to na donjem tekstu:

 Tekst sa zelenom pozadinom širine 5 pixela!

Stil cursor ima nekoliko mogućih vrijednosti, a zanimljive su:

hand
wait (pointer se pretvara u pješčani sat)
help (kraj pointera se pojavljuje upitnik)

10. ALATI ZA PISANJE CSS STILOVA

Notepad
Nećete vjerovati, ali za pisanje i najkompliciranijeg CSS stila bit će vam dovoljan Notepad. Iako se
ne radi o najelegantnijem rješenju jer ipak morate sve ručno upisivati, korištenje Notepada će vas
najbolje naučiti kako pravilno pisati CSS kod.

Dreamweaver kao predstavnik vizualnih HTML editora

Dreamweaver ima solidno i vrlo jednostavno sučelje za izradu CSS stilova. Stilovi su vam već
navedeni i vi samo morate odrediti njihovu vrijednost odabirom iz padajućih menija. Umetanje CSS
klasa je također vrlo jednostavno i izvodi se s dva-tri klika mišem.

Nedostatak Dreamweavera (kao i svih ostalih vizualnih web editora) jest taj što CSS kod neće biti
tako čitljiv kao da ste ga ručno napisali u Notepadu. Cijeli kod bit će dosta zgusnut. Također,
Dreamweaver nije savršen i ako puno prčkate po CSS kodu pomoću Dreamweavera, moguće je da
će krajnji rezultat biti nepravilan kod i da ćete ga ručno morati ispravljati.

CSS editori
Postoji nekoliko alata koji su namijenjeni isključivo pisanju CSS-a. Jedan od boljih je i TopStyle koji
doduše nije besplatan, ali je po riječima iz CNet-a vrijedan svoje cijene. Ima sve napredne opcije
koje imaju moderni editori i još puno više.

Mi smo imali prilike isprobati besplatni alat pod imenom StyleWorx koji je sasvim zadovoljavajući
za početnike: ima syntax highlighting, podršku za CSS1 i CSS2 stilove i dosta je konfigurabilan.

Korisni linkovi za proširivanje znanja o CSS-u

Službena CSS1 specifikacija nalazi se na stranici organizacije koja je CSS izradila i standardizirala -
CSS1 specifikacija na stranicama W3C-a.

14
Odličnu školu CSS-a s kompletnim objašnjenjem svakog pojedinog stila, referencom, brdom
primjera i kvizevima naći ćete na W3Schools školi CSS-a. Tamo žete naći i CSS2 specifikaciju u
kojoj su primjeri novih, do sad malo korištenih stilova.

CSS guru Eric Meyer izradio je tablicu podrške CSS-a u raznim browserima. Ako želite biti sigurni
da će vaš CSS stil biti vidljiv u svim browserima, obavezno provjerite ovu tablicu!

VIDEO CSS TUTORIAL na hrvatskom jeziku:

http://www.xtorials.com/category/tutoriali/video-tutorial/

15