{ osnove }

Uvod - 1
Kao prvo i osnovno, da bi uenje CSS-a imalo nekog smisla
morate znati HTML.
CSS (Cascading Style Sheets) je jezik formatiranja pomodu koga se definie izgled (stil) Web strana.

Kad se pojavio Web jedino je HTML definisao kompletan izgled, strukturu i sadraj Web stranica. Kada su u HTML 3.2 dodati tagovi poput <font> poinju potekode za Web programere, jer HTML dokumenti poinju bivati sve vedi, i vrlo je teko 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 takoe razvijao i unapreivao 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 vie brauzer-a podrava i omogudava njihovu upotrebu. Sa pojavom JavaScript-a Web stranice postaju dinamine.

Uvod - 3
Dananje Web stranice dele se na:

HTML deo koji definie sadraj (strukturu) Web stranice. CSS deo koji definie izgled Web stranice (kao na primer boja slova, pozadine, margine i tako dalje). JavaScript deo koji definie dinamiku Web stranice.

Web stranica

Uvod - 4
Prednosti CSS-a: Olakava pisanje Web stranica. tedi prostor na hostu. Bre otvaranje stranica (jedna CSS datoteka se moe primeniti na vie HTML stranica). Jednostavnije, bre i sigurnije odravanje i HTML i CSS dokumenata. Jednostavnija prenamena Web stranica za razliite tipove brauzer-a i ureaja (npr. mobilni telefoni, TV i sl.)

CSS pravila - 1
Svaki ispravan HTML dokument napisan prema Web standardima treba da ima odvojen sadraj (strukturu) od izgleda (stila). Znai, 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 sluajevima CSS kod se pie unutar HTML dokumenta. CSS dokument je najobiniji tekstualni dokument koji sadri instrukcije/naredbe za Web brauzere, a koje definiu stilove za odreene HTML elemente na Web stranici.

CSS pravila - 2
CSS pravilo (sintaksa):
Selektor { svojstvo1: vrednost1; svojstvo2: vrednost2; ...}
Selektor moe 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 definie se izgled svakog ciljnog elementa. Razliita svojstva (atributi) zahtevaju razliite tipove vrednosti, npr.: merne duine > 12px, 2em ili 1in; boja > black ili #000000; URL > slike/slika-1.jpg) ili specifina kljuna rije > top, center, left)

CSS komentari se navode izmeu 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 izmeu poetne i zavrne oznake stila (<style> ... </style>) u zaglavlju HTML koda Web stranice. Opisi stilova se sastoje od jednog ili vie pravila.

CSS pravilo:
deklaracija deklaracija deklaracija

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

svojstvo vrednost selektor (ime stila) svojstvo vrednost svojstvo vrednost

CSS pravila - 5
Primer 1:

CSS
<style>
Selektor body govori web brauzer-u sledede: - sve margine na 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 - veliina teksta treba biti 20px

CSS pravila - 6
Primer 2: Napiite ga u Notepad-u i sauvajte sa extenzijom .htm.
<html> HTML <head> <title>Stilovi-primer</title> <style type="text/css"> Komentar /* 1. navodedi HTML tag ciljnih elemenata */ p {color: #0000ff;} /* 2. navodedi Klasu elemenata */ CSS stil Pravilo .crvenitekst {color: #ff0000; text-align: center;} /* 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 moe izgledati ovako (naredbe se piu iza selektora, u vie redova):
Selektor body govori web brauzer-u sledede: - sve margine na stranici trebaju biti 0 px - tekst treba biti napisan u Trebuchet MS fontu - veliina pisma treba biti 12px

Selektor a govori web brauzer-u sledede: - linkovi ne smeju biti podvueni - 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 - veliina teksta treba biti 20px

Selektor p govori web brauzer-u sledede: - boja teksta celog pasusa treba biti siva - veliina teksta treba biti 11px

CSS pravila - 8
CSS dokument moe izgledati i ovako (naredbe se piu 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 moe da se nalazi CSS kod (stil)

CSS kod se moe 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 naina (stilovi definisani u zaglavlju i inline stilovi), a to je da pomodu eksterne datoteke moemo da utiemo na elemente vie 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 naruava namena CSS-a da se lista stilova primenjuje na ceo Web sajt.
Primer 3: Napiite ga u Notepad-u i sauvajte sa extenzijom .htm.
<html> <head> <title>Inlajn stil</title> Inlajn stil </head> <body> <p> Prvi pasus. </p> <p style="color: #0000FF; font-size: 24px;"> Drugi pasus. </p> <p> Treci pasus. </p> </body> </html>

HTML

Primer 3: Izgled stranice

Primer ugraenog stila

Ugraeni stil se ubacuje direktno u zaglavlje dokumenta, izmeu poetne i zavrne oznake (taga) stila (<style> ... </style>).
Primer 4: Napiite ga u Notepad-u i sauvajte sa extenzijom .htm.
<html> <head> <title>Ugraeni stil</title> <style type="text/css"> body {background-color: gray;} p {color: #0000FF; font-size: 24px;} h1 {color: #00FF00; font-family: "Arial"; font-size: 34px;} </style> </head> <body> <p> Prvi pasus. </p> <h1> Drugi pasus. </h1> </body> </html>

HTML

Ugraeni 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: Napiite ga u Notepad-u i sauvajte sa extenzijom .css.

CSS
body {background-color: #691; color: black;} p {font-family: "Georgija"; font-size: 54px; color: #0000FF; } Lista stilova

h1 {font-family: "Verdana"; font-size: 30px; color: #ccc;}

Primena eksternog stila

Eksterni stil se ubacuje u HTML kod (dokument), koridenjem tag-a <link>. HTML datoteka i datoteka sa stilovima se nalaze u istoj fascikli.
Primer 5: Napiite ga u Notepad-u i sauvajte sa extenzijom .htm.
<html> HTML <head> <title>Eksterni stil</title> <link href="externistil.css" rel="stylesheet" type="text/css"/> </head> <body> Link eksternog stila <p> Prvi pasus. </p> (u ovom primeru ime CSS datoteke je <h1> Drugi pasus. </h1> externistil.css) </body> </html>

Primer 5: Izgled stranice

Redosled slaganja (prioritet) i interpretacije stilova

Prioritet i interpretacija (od najnieg ka najviem): 1. Browser default. 2. External style sheet. 3. Internal style sheet (unutar <head> taga). 4. Inline style (unutar HTML elementa)
Znai inline CSS (unutar HTML elementa) ima najvedi prioritet, to znai 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) moemo kategorisati u sledede grupe: definicija pozadine elementa, ivica, okvir, prikaz, dimenzije, font, margine, unutranji prazan prostor, pozicija, izgled pripadajudeg teksta.

Vrednosti
Vrednosti atributa mogu biti: predefinisane kljune rei, brojevne vrednosti. Primeri predefinisanih kljunih rei su recimo "red", "left ... Brojevne vrednosti se mogu zadavati na nekoliko naina: zadajudi samo brojnu vrednost, zadajudi brojevnu vrednost navodedi i jedinicu veliine (px, em, pt, ...). Ako zadajete samo brojnu vrednost, imate mogudnost da je piete na dva naina: u dekadnom sistemu, u heksadekadnom sistemu (#A4FD23), a ovaj sistem se najvie koristi u definiciji boje.

Jedinice mere
CSS jedinice mere su: px - piksel, oznaava broj taaka na ekranu pt - point, najede se koristi za zadavanje veliina slova (1pt = 1/72 ina). pc - pika, jedinica mere koja se ree zadaje. 1pc = 12pt. mm, cm, in - milimetri, centimetri ili ini 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 veliinu fonta. Ako je font veliine 12pt, onda de 2em predstavljati veliinu od 24pt. ex - jo jedna relativna mera u odnosu na veliinu slova, 1ex je otprilike jednak polovini veliine fonta. U praksi se najede zadaju px, pt ili procenti.

Najznaajniji stilovi
Postoji nekoliko desetina razliitih stilova koji kontroliu prikaz HTML dokumenta. Sve stilove grupiemo prema tome kakav prikaz kontroliu: 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 definie u <body> tagu.

Primer 1: body {background-color: #B0C4DE;}

Boja se navodi na jedan od tri naina: imenom - npr. red, yellow... RGB vrednodu - npr. rgb(255,0,0) Hex-a vrednodu - npr. #FF0000

Slika kao pozadina -1

Za definisanje slike kao pozadine koristi se svojstvo backgroundimage. Definie 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).
Poloaj slike se odreuje svojstvom background-position (vertikala: top/center/bottom; horizontala: left/center/right). Da li se slika skroluje sa stranom ili ne skroluje odreuje 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;

}

Primet 3: Body {
background-image: url('pozadina.png'); background-repeat: repeat-x; background-position: top left; background-attachment: fixed; }

Fontovi - 1
Pomodu nekoliko razliitih svojstava moete da birate font, da podesite veliinu i da zadajete svojstva kao to su bold i italic.
Upotrebom svojstva font-family moete da izaberete font (preporuujemo da odredite listu fontova a pretraiv de koristiti prvi dostupni font sa te liste).

Primer 1: p {font-family: Verdana, Tahoma, Arial, Helvetica;}

Fontovi - 2
Veliinu slova moete podesiti svojstvom font-size. Vednosti za ovo mogu biti broj, procenat, ili generika vrednost (small, medium, large, x-small, xx-small, x-large i xx-large). Numerike vrednosti moete podesiti u procentima, pixelima ili u takama.

Boju fonta moete podesiti svojstvom color.

Primer 2: p {

font-family: Verdana, Tahoma, Arial, Helvetica; font-size: 14px; color: #00FF00;

}

Fontovi - 3
Na izgled teksta moemo uticati jo sa slededim svojstvima: Font-style: Vrednosti mogu biti normal, italic i oblique. Font-weight: Moe imati vrednosti normal, bold, bolder, ... lighter ili numeriku vrednost. Font-variant: moe 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 prua mnogo opcija za definisanje stilova prikazivanja teksta: color definie boju teksta.

Primer 1: p {color: #00FF00;}

direction podeava direkciju teksta. Moe 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 podeava distancu izmeu linija teksta. Moe imati vrednosti: normal - normalni razmak izmeu linija number - brojna vrednost koja se matematiki rauna u zavisnosti veliine fonta length - precizna vrednost koju moemo odrediti pikselima, takama, centimetrima,.. % - odredjeni broj ptocenata koridene veliine fonta

Primer 3: h1 {line-height: 30px;}

Tekst - 3
letter-spacing povedava ili smanjuje distancu izmeu slova. Moe imati vrednosti: normal - normalna distanca izmedju slova length - podeava ekstra razmak izmedju slova (moe imati i negativnu vrednost).

Primer 4: h1 {letter-spacing: 2px;}

text-align podeava poziciju teksta u elementu. Moe imati vrednosti: left, right, center i justify.

Primer 5: h1 {text-align: center;}

Tekst - 4
text-decoration podeava dekoraciju teksta. Moe imati vrednosti: none - normalan tekst underline - linija ispod teksta overline - linija iznad teksta line-through - precrtan tekst blink - tekst koji blinka

Primer 6: h3 {text-decoration: underline;}

Tekst - 5
text-indent Uvlai prvu liniju teksta. Moe imati vrednosti: length - definiete koliko de biti uvuena prva linija tano u pikselima, takana, centimetrima,... % - definie koliko procenata de biti uvuena linija

Primer 7: p {text-indent: 50px;}

text-shadow podeava se efekat senke teksta. Moe imati vrednosti: none color - odredjena boja senke length - odredjena veliina senke

Primer 8: p {text-shadow: 2px 2px 2px #000;}

Tekst - 6
text-transform slui za kontrolisanje slova. Moe imati vrednosti: none capitalize - podeava da prvo slovo svake rei bude velik uppercase - podeava da sva slova budu velika lowercase - podeava da sva slova budu mala

Primer 9: h2 {text-transform: uppercase;}

word-spacing slui za povedavanja ili smanjivanje rezmaka izmedju rei.

Primer 10: p {word-spacing: 30px;}

CSS Tutorijali
1. http://moviesbk.com/video/OZpP5DoqzVE/1.CSS%20%20Osnove.html#.UU7tkhxg-58
http://www.youtube.com/watch?feature=player_embedded&v=OZpP5D oqzVE www.bubaj.com/index.php?css-osnove

2. 3.