{

osnove }
Uvod - 1
− Kao prvo i osnovno, da bi učenje CSS-a imalo nekog smisla
 morate znati HTML.
− CSS (Cascading Style Sheets) je jezik formatiranja pomodu koga
se definiše izgled (stil) Web strana.
− Kad se pojavio Web jedino je HTML definisao kompletan izgled,
strukturu i sadržaj Web stranica. Kada su u HTML 3.2 dodati tagovi
poput <font> počinju poteškode za Web programere, jer HTML
dokumenti počinju bivati sve vedi, i vrlo je teško bilo snalaziti se u
njima. Da bi se uprostio takav HTML dokument od verzije HTML 4.0
uveden je CSS (1996 godine).
− CSS ima daleko vede dizajnerske mogudnosti od čistog HTML-a.
Zato je danas CSS gotovo nezamenjljiv u dizajniranju Web stranica.
Uvod - 2
− Prva verzija HTML-a se pojavila 1990 godine.
− Prva verzija CSS-a se pojavila 1996 godine.
− Kao i HTML, CSS se takođe razvijao i unapređivao tokom godina, pa
je tako danas aktuelna verzija CSS 2.1 (u kombinaciji sa HTML 4.01.),
dok se radi na verziji CSS 3 koja sa HTML 5 čini nove WEB standarde
koji još uvek nisu standardizovani, ali se koriste na pojedinim
stranicama, jer ih sada sve više brauzer-a podržava i omogudava
njihovu upotrebu.

− Sa pojavom JavaScript-a Web stranice postaju dinamične.

Uvod - 3
Današnje Web stranice dele se na:
− HTML deo koji definiše sadržaj (strukturu) Web stranice. − CSS
deo koji definiše izgled Web stranice (kao na primer boja slova,
pozadine, margine i tako dalje).
 − JavaScript deo koji definiše dinamiku Web

stranice.

Web stranica
 Uvod - 4
Prednosti CSS-a:
− Olakšava pisanje Web stranica.
− Štedi prostor na hostu.
− Brže otvaranje stranica (jedna CSS datoteka se može
primeniti na više HTML stranica).
− Jednostavnije, brže i sigurnije održavanje i HTML i CSS
dokumenata.
− Jednostavnija prenamena Web stranica za različite tipove
brauzer-a i uređaja (npr. mobilni telefoni, TV i sl.)
CSS pravila - 1

− Svaki ispravan HTML dokument napisan prema Web standardima

treba da ima odvojen sadržaj (strukturu) od izgleda (stila).
− Znači, prvo treba napisati HTML kod (naslovi, paragrafi, slike,
odjeljci, forme i sl...) kao poseban dokument, a zatim taj dokument
treba povezati sa CSS dokumentom u kojem su definisani stilovi.
− U retkim slučajevima CSS kod se piše unutar HTML dokumenta.
− CSS dokument je najobičniji tekstualni dokument koji sadrži
instrukcije/naredbe za Web brauzere, a koje definišu stilove za
određene HTML elemente na Web stranici.
CSS pravila - 2
CSS pravilo (sintaksa):
Selektor { svojstvo1: vrednost1; svojstvo2: vrednost2; ...}
Selektor može biti:
− HTML element (tag) na koji de se opis stila odnositi.
− Klasa HTML elemenata na koju de se opis stila odnositi.
− Identifikaciona vrednost (ID) HTML elemenata na koji de se opis stila
odnositi.

Nizom parova svojstvo-vrednost definiše se izgled svakog ciljnog elementa.

Različita svojstva (atributi) zahtevaju različite tipove vrednosti, npr.: merne
dužine > 12px, 2em ili 1in; boja > black ili #000000; URL > slike/slika-1.jpg) ili
specifična ključna riječ > top, center, left)

CSS komentari se navode između znakova /* i */.

CSS pravila - 3

Ako je selektor HTML element (tag) :

p { svojstvo1: vrednost1;svojstvo2: vrednost2; ...}

 Ako je selektor Klasa HTML elemenata :

.imeKlase { svojstvo1: vrednost1;svojstvo2: vrednost2; ...}

Ako je selektor Identifikaciona vrednost (ID) HTML elemenata: #IDVrednost

{ svojstvo1: vrednost1; svojstvo2: vrednost2; ...}

CSS pravila - 4
− Opisi stilova postavljaju se između početne i završne oznake
stila (<style> ... </style>) u zaglavlju HTML koda Web
stranice.
− Opisi stilova se sastoje od jednog ili više pravila.

CSS pravilo:
 deklaracija deklaracija deklaracija

h1 {color: blue; font-size: 30px; font-family: arial;}

svojstvo vrednost svojstvo vrednost svojstvo vrednost

selektor
(ime
stila)

CSS pravila - 5

Primer 1:

CSS
 Selektor body govori web brauzer-u sledede: - sve margine na
<style> stranici trebaju biti 0px - boja pozadine treba biti plava

body {margin: 0px; background-color: blue;}

h1, h2 {font-family: "Arial"; font-weight: bold; font-size: 20px; }

</style>
Selektori h1 i h2 govore web brauzer-u sledede: - tekst treba biti
napisan u Arial fontu - debljina slova treba biti podebljana - veličina
CSS pravila - 6
teksta treba biti 20px
Primer 2: Napišite ga u Notepad-u i HTML
sačuvajte sa extenzijom .htm.

<html> /* 1. navodedi HTML tag ciljnih elemenata */

<head>
<title>Stilovi-primer</title>
<style type="text/css">
p {color: #0000ff;}
/* 2. navodedi Klasu elemenata */
.crvenitekst {color: #ff0000; text-align:
center;}
Komentar

Pravilo CSS stil

 /* 3. navodedi direktnu identifikacionu vrednost (ID) elementa
*/ #zelenitekst {color: #00ff00; text-align: right; font-size: 20px;}
</style>
</head>
<body>
 <p> Prvi pasus. Tekst je levo poravnat i plave boje. </p>
<p id="zelenitekst"> Drugi pasus. Tekst je desno poravnat i zelene boje.
</p> <p class="crvenitekst"> Tredi pasus. Tekst je centriran i crvene boje.
</p> </body>
</html>
Primer 2: Izgled stranice
 CSS pravila - 7
Jedan CSS dokument može izgledati ovako (naredbe se pišu iza
selektora, u više redova):
Selektor body govori web brauzer-u sledede:
- sve margine na stranici trebaju biti 0 px
- tekst treba biti napisan u Trebuchet MS fontu
- veličina pisma treba biti 12px

Selektor a govori web brauzer-u sledede:

- linkovi ne smeju biti podvučeni
 - boja pozadine linka treba biti crvena
- boja teksta linka treba biti bela

Selektor h1 govori web brauzer-u sledede:

- sve margine oko h1 elementa trebaju biti 0px
- debljina slova treba biti podebljana
- veličina teksta treba biti 20px

Selektor p govori web brauzer-u sledede:

- boja teksta celog pasusa treba biti siva
- veličina teksta treba biti 11px

CSS pravila - 8
CSS dokument može izgledati i ovako (naredbe se pišu iza
selektora, sve u istom redu):

CSS
body { margin: 0; font-family: "Trebuchet MS"; font-size: 12px; }

a { text-decoration: none; background-color: red; color: white; }

h1 { margin: 0; font-weight: bold; font-size: 20px; }

 p { color: #666666; font-size: 11px; }

Gde može da se nalazi CSS kod (stil)

CSS kod se može zadavati na tri standardna mesta: − Direktno
u HTML tag-u, koristedi argument style (inline). − U
zaglavlju dokumenta unutar taga <style>.

− U eksternoj datoteci, koja se linkuje tag-om <link>.

Stilovi u eksternoj datoteci imaju prednost u odnosu na preostala

dva načina (stilovi definisani u zaglavlju i inline stilovi), a to je da
pomodu eksterne datoteke možemo da utičemo na elemente više
dokumenata (stranica) i centralizovano da upravljamo stilovima i
izgledom dela ili celog sajta.
Primer inlajn stila
 Inlajn stil se ubacuje direktno u HTML tag, koristedi argument
style. Ovim se narušava namena CSS-a da se lista stilova primenjuje
na ceo Web sajt.

Primer 3: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm.

<html> <p> Prvi pasus. </p>

<head>
HTML
<title>Inlajn stil</title>
</head>
Inlajn stil
<body>

<p style="color: #0000FF; font-size: 24px;"> Drugi pasus.

</p> <p> Treci pasus. </p>
</body>
</html>
Primer 3: Izgled stranice
 Primer ugrađenog stila
Ugrađeni stil se ubacuje direktno u zaglavlje dokumenta, između
početne i završne oznake (taga) stila (<style> ... </style>).

Primer 4: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm.

<html> <p> Prvi pasus. </p>
<head> <h1> Drugi pasus. </h1>
<title>Ugrađeni stil</title> </body>
<style type="text/css"> </html>
body {background-color: gray;}
p {color: #0000FF; font-size: 24px;} HTML
h1 {color: #00FF00; font-family: "Arial"; font-size:
34px;} </style>
</head>
<body> Ugrađeni stil
Primer 4: Izgled stranice
 Primer eksternog stila
Da biste u potpunosti iskoristili prednosti CSS-a, treba da koristite
eksterni stil. Eksterni stil je tekstualna datoteka sa ekstenzijon .css.

Primer 5: Napišite ga u Notepad-u i sačuvajte sa extenzijom .css.

 CSS
body {background-color: #691; color: black;}

p {font-family: "Georgija"; font-size: 54px; font-size: 30px; color: #ccc;}

color: #0000FF; } h1 {font-family: "Verdana"; Lista stilova

Primena eksternog stila

Eksterni stil se ubacuje u HTML kod (dokument), korišdenjem
tag-a <link>. HTML datoteka i datoteka sa stilovima se nalaze u
istoj fascikli.

Primer 5: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm.

<html> type="text/css"/> </head>

<head>
<title>Eksterni stil</title>
HTML
<link href="externistil.css" rel="stylesheet"
<body> </html>
<p> Prvi pasus. </p> Link eksternog stila (u ovom primeru ime CSS
datoteke je
<h1> Drugi pasus. </h1> </body> externistil.css)

Primer 5: Izgled stranice

 Redosled slaganja (prioritet) i
interpretacije stilova
Prioritet i interpretacija (od najnižeg ka najvišem):
1. Browser default.
2. External style sheet.
3. Internal style sheet (unutar <head> taga).
4. Inline style (unutar HTML elementa)

Znači inline CSS (unutar HTML elementa) ima najvedi prioritet,

što znači da de „pregaziti“ svaku definicije u prethodne tri vrste
stilova. Stil definisan unutar head sekcije dokumenta je stariji od
eksternog fajla i browser default-a.
Svojstva
Neka od CSS svojstava (atributa) možemo kategorisati u sledede
grupe:
− definicija pozadine elementa,
− ivica,
− okvir,
− prikaz,
− dimenzije,
− font,
− margine,
− unutrašnji prazan prostor,
− pozicija,
− izgled pripadajudeg teksta.
Vrednosti
Vrednosti atributa mogu biti:
− predefinisane ključne reči,
 − brojevne vrednosti.
Primeri predefinisanih ključnih reči su recimo "red","left“ ...
Brojevne vrednosti se mogu zadavati na nekoliko načina: −
zadajudi samo brojnu vrednost,
− zadajudi brojevnu vrednost navodedi i jedinicu veličine (px,
em, pt, ...).
Ako zadajete samo brojnu vrednost, imate mogudnost da je
pišete na dva načina:
− u dekadnom sistemu,
− u heksadekadnom sistemu (#A4FD23), a ovaj sistem se
najviše koristi u definiciji boje.
Jedinice mere
CSS jedinice mere su:
− px - piksel, označava broj tačaka na ekranu
 − pt - point, najčešde se koristi za zadavanje veličina slova (1pt =
1/72 inča).
− pc - pika, jedinica mere koja se ređe zadaje. 1pc = 12pt. − mm, cm,
in - milimetri, centimetri ili inči se retko zadaju za stilove koji se
prikazuju na ekranu, ali su korisni kada se dokument priprema za
štampanje
− % - procenti predstavljaju relativnu jedinicu mere.
− em - relativna mera u odnosu na trenutnu veličinu fonta. Ako je
font veličine 12pt, onda de 2em predstavljati veličinu od 24pt. − ex -
još jedna relativna mera u odnosu na veličinu slova, 1ex je otprilike
jednak polovini veličine fonta.
U praksi se najčešde zadaju px, pt ili procenti.

Najznačajniji stilovi

Postoji nekoliko desetina različitih stilova koji kontrolišu prikaz

HTML dokumenta. Sve stilove grupišemo prema tome kakav
prikaz kontrolišu:
− pozadina,
− fontovi, tekst i boje,
− box i stilovi bordera (borders),
− liste,
− pozicioniranje.
CSS Pozadina i boje
Da bi definisali stilove za pozadinu odredjenog sektora koristimo
opciju background.

Redosled svojstava:
− background-color
− background-image
 − background-repeat
− background-attachment
− background-position
Boja pozadine

Za definisanje boj pozadine koristi se svojstvo background-color.

Boja pozadine za celu stranu se definiše u <body> tagu.

Primer 1:
body {background-color: #B0C4DE;}
Boja se navodi na jedan od tri načina:
– imenom - npr. red, yellow...
 – RGB vrednošdu - npr. rgb(255,0,0)
– Hex-a vrednošdu - npr. #FF0000
Slika kao pozadina -1

Za definisanje slike kao pozadine koristi se svojstvo background

image. Definiše se u <body> tagu.

Primer 1: body {background-image: url('pozadina.gif');}

Za kontrolu ponavljanja koristi se svojstvo background-repeat
(repeat-x, repeat-y, no-repeat).
Položaj slike se određuje svojstvom background-position (vertikala:
top/center/bottom; horizontala: left/center/right).
Da li se slika skroluje sa stranom ili ne skroluje određuje svojstvo
background-attachment (scroll, fixed).

Slika kao pozadina - 2

Primet 2: Body {
background-image: url('pozadina.png');
background-repeat: no-repeat;
background-position: top right;
}
 P
ri
m
et
3:

Body {
background-image: url('pozadina.png');
background-repeat: repeat-x;
background-position: top left;
background-attachment: fixed;
}
Fontovi - 1
Pomodu nekoliko različitih svojstava možete da birate font, da
podesite veličinu i da zadajete svojstva kao što su bold i italic.

Upotrebom svojstva font-family možete da izaberete font

(preporučujemo da odredite listu fontova a pretraživč de koristiti
prvi dostupni font sa te liste).

Pri
mer 1: p {font-family: Verdana, Tahoma, Arial, Helvetica;}
Fontovi - 2
Veličinu slova možete podesiti svojstvom font-size. Vednosti za
ovo mogu biti broj, procenat, ili generička vrednost (small,
medium, large, x-small, xx-small, x-large i xx-large). Numeričke
vrednosti možete podesiti u procentima, pixelima ili u tačkama.

Boju fonta možete podesiti svojstvom color.

 P
ri
m
e
r
2: p {
font-family: Verdana, Tahoma, Arial, Helvetica;
font-size: 14px;
color: #00FF00;
}
Fontovi - 3
Na izgled teksta možemo uticati još sa slededim svojstvima: −
Font-style: Vrednosti mogu biti normal, italic i oblique. −
Font-weight: Može imati vrednosti normal, bold, bolder, ...
lighter ili numeričku vrednost.
 −

Font-variant: može imati vrednost normal ili small-caps.

Primer 3: h1 {
font-family: Verdana, Tahoma, Arial, Helvetica;
font-size: 14px;
color: #00FF00;
font-style: italic;
font-variant: small-caps;
}
 Tekst - 1
CSS vam pruža mnogo opcija za definisanje stilova prikazivanja
teksta:

color – definiše boju teksta.

Primer 1: p
{color: #00FF00;}
direction – podešava direkciju teksta. Može imati
vrednosti: − ltr - left to right (sa leva na desno)
− rtl - right to left (sa desna na levo)

Primer 2:
 div {direction: rtl;}
Tekst - 2
line-height – podešava distancu između linija teksta. Može imati
vrednosti:
− normal - normalni razmak između linija
− number - brojna vrednost koja se matematički računa u
zavisnosti veličine fonta
− length - precizna vrednost koju možemo odrediti pikselima,
tačkama, centimetrima,..
− % - odredjeni broj ptocenata korišdene veličine fonta

Primer
3: h1 {line-height: 30px;}
 Tekst - 3
letter-spacing – povedava ili smanjuje distancu između slova.
Može imati vrednosti:
− normal - normalna distanca izmedju slova
− length - podešava ekstra razmak izmedju slova (može imati
i negativnu vrednost).

Primer 4:
h1 {letter-spacing: 2px;}
text-align – podešava poziciju teksta u elementu. Može imati
vrednosti: left, right, center i justify.

Primer 5:
 h1 {text-align: center;}
Tekst - 4
text-decoration – podešava dekoraciju teksta. Može imati
vrednosti:
− none - normalan tekst
− underline - linija ispod teksta
− overline - linija iznad teksta
− line-through - precrtan tekst
− blink - tekst koji blinka

Prim
er 6: h3 {text-decoration: underline;}
Tekst - 5
text-indent – Uvlaši prvu liniju teksta. Može imati vrednosti: − length -
definišete koliko de biti uvučena prva linija tačno u pikselima, tačkana,
centimetrima,...
− % - definiče koliko procenata de biti uvučena linija

Primer 7: p {text-
indent: 50px;}
text-shadow – podešava se efekat senke teksta. Može imati
vrednosti:
− none
− color - odredjena boja senke
− length - odredjena veličina senke

Primer
8: p {text-shadow: 2px 2px 2px #000;}
 Tekst - 6
text-transform – služi za kontrolisanje slova. Može imati
vrednosti: − none
− capitalize - podešava da prvo slovo svake reči bude velik
− uppercase - podešava da sva slova budu velika
− lowercase - podešava da sva slova budu mala

Primer
9: h2 {text-transform: uppercase;}
word-spacing – služi za povedavanja ili smanjivanje rezmaka
izmedju reči.

Primer
 10: p {word-spacing: 30px;}
CSS Tutorijali
1. http://moviesbk.com/video/OZpP5DoqzVE/1.CSS%20-
%20Osnove.html#.UU7tkhxg-58

2. http://www.youtube.com/watch?feature=player_embedded&v=OZpP5D
oqzVE
3. www.bubaj.com/index.php?css-osnove