Sada da predjemo pozadine u slikama:
Znaci pozadina se moze zadati ne samo u boji vec i u slici. Sada cu da navedem opise stilova stvorene za to.
body { background-image: url(slika.jpg); } - Ovom komandom ce cela pozadina biti u nekoj slici. Kao sto vidite, slika se ponavlja.. Sada cete nauciti kako to da popravite.
Sliku mozete da stavljate i preko background-color pa cak i u neki odeljak gde je obojena pozadina teksta.
Ovako dodajemo da se slika pojavi samo jednom, a ne da se baca po celoj stranici
Code:
body {
background-image: url(slika.jpg);
background-repeat: no-repeat; - Komanda da se slika pojavi samo jednom na stranici
}
Ovako dodajemo da se slika prostire duz cele leve strane stranice
Code:
body {
background-image: url(slika.jpg);
background-repeat: repeat-y; - Komanda da slika stoji samo vertikalno
}
Ovako dodajemo da se slika prostire na vrhu stranice
Code:
body {
background-image: url(slika.jpg);
background-repeat: repeat-x; - Komanda da slika stoji samo horizontalno
}
Pomeranje slika:
Code:
body {
background-image: url(slika.jpg);
background-position: left bottom; - Ovom komandom ce slika stajati u donjem levom cosku. (bottom - dno, left -levo)
}
Code:
body {
background-image: url(slika.jpg);
background-position: right center; - Ovom komandom ce slika stajati desno u centru (center - centar, right - desno)
}
Code:
body {
background-image: url(slika.jpg);
background-position: 200px 50px; - Ovom komandom pomeramo sliku u pikselima
}
body { background-attachment: fixed; } - Sa ovom komandom slika se spusta zajedno sa stranicom. (na tockic
)
Znaci sta smo ovde naucili ?
background-image: - Dodajte sliku
background-repeat - Namesta kako ce se slika pojavljivati na stranici
background-position: - Pozicija slike.
Efekti Linka
Sada cu vas nauciti kako da napravite da kada predjete misem preko <a href> teksta, da se tekst oboji, da se promeni pozadina ili nesto drugo (Ovo se najcesce koristi za navigacije..
Znaci kada predjete misem preko teksta da bi se nesto desilo trebamo da dodamo opis stila po imenom hover. Objasnicu vam kako se on dodaje. Znaci za njega nista ne pisete u HTML dokumentu nego samo u CSS dokumentu. Ako npr. zelite da promenite da kad se predje misem preko <a href="http://www.facebook.com/">Facebook</a> da se pozadina oboji u crvenu i da tekst promeni boju u crnu iz bele. Ovako to odazovemo u CSS dokumentu. Znaci da kazemo da se <a href="http://www.facebook.com/">Facebook</a> nalazi u div header. I onda cemo to ovako da namestimo:
#header a:hover {
background-color: red;
color: black;
}
Vezbanje
Code:
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body {
background-image: url(slika.png);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
#header img {
background-repeat: no-repeat;
}
</style
</head>
<body>
<div id="header">
<img src="slika.png" alt="" />
<h1>Boris tadic</h1>
</div>
</body>
</html>
Za ovu vezbu pronadjite neku sliku i dajte joj ime slika i format .png.
I za kraj cu da vam dam neke trikove koje nebiste umeli sami da napravite
Tj. dacu vam neke kodove.
Sneg na sajtu 
Code:
<script src=http://astuforum.free.fr/js/neige_lettre.js></script>
Dodje u element <head>
Muzika na sajtu 
Code:
<object width="0" height="0"><param name="movie" value="http://www.youtube.com/v/XbQGcshrAfI&hl=en_US&fs=1&&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XbQGcshrAfI&hl=en_US&fs=1&&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="0" height="0"></embed></object>
Obratite paznju na link Video klipa u codu 
Ovo dolazi iznad pocetne oznake za oznacavanje css dokumenta.
I da napomenem.
- nemorate da pazite na razmake dok pisete sajt. Znaci to da li vam je sve u jednom redu ili sa razmacima uopste nije bitno
Tutorial sam ja pravio i pisao sam ga 4 sata i nemojte da mi govorite kako sam ga kopirao ! ! ! ! ! !
Kada sve ovo naucite i procitate i provezbate (nekoliko meseci potrebno) bicete sposobni da napravite vasu web stranicu 
Edit tutorial.
Poziciranje
Relativno poziciranje
Ovim elementom pomeramo u tekst u odnosu na njegovo prvobntno stanje
Primer koda:
Code:
em {
position: relative;
top: 30px;
left: 60px;
background-color: blue;
}
Ovim poziciranjem ce ostati praznina na mestu sa kojeg smo pomerili neki tekst
(Nekoristi se vise toliko relativno poziciranje)
Apsolutno poziciranje
Primer koda:
Code:
em {
position: absolute;
top: 30px;
left: 60px;
background-color: blue;
}
Sada primecujemo da za razliku od relativnog poziciranja. Tekst se baca i preko ostalih sadrzaja stranice
BORDER - Ivice.
Ivice okvira:
Ivice okvira zadajemo sledecim komandama:
Code:
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
A ovo su vrednosti:
none - nema okvira
solid - samo ravna crta kao u gore primerima
double - dupla linija
dotted - Isprekidana linija (Tackice)
dashed - Isprekidana linija (Linije -)
groove - Sivi okvir (Manje vidljiv)
ridge - Sa jedne strane okvira je do kraja ivice linija, a sa druge strane okvira je malo dalje od ivice linija
inset - 3D okvir 1
outset - 3D okvir 2
Sledeci elementi sluze za debljinu ivice:
Code:
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 12px;
Elementi za ivicu
Code:
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
Sledeci elementi sluze za menjanje boje ivica
Code:
border-top-color: blue;
border-right-color: blue;
border-bottom-color: blue;
border-left-color: blue;
Naravno sve mozemo napisati skraceno.
border: 1px dashed #F26521;
Skraceno pisanje.
Sve u CSS-u moze da se napise skraceno... Primer: background. Imamo ih nekoliko: background-position, background-color, background-image, bakcground-attachment. Sve mozemo da ih napisemo skraceno tako sto cemo staviti samo: background: i onda nabrajati sve sto nam treba... Isto ovo vazi i za border.