Ime lekcije	Osnove Cascading Style Sheets (CSS)
Uporabljene tehnologije	CSS, HTML
Kaj se boste naučili	Kako oblikovati tekst v HTML strani s pomočjo Cascading Style Sheets (CSS)
Kaj se boste še naučili	Kako oblikovati HTML element (odstavek, bullet ali naslov (heading)) Kako pobarvati tekst, ozadje teksta ali kako za ozadje teksta uporabiti sliko Kako nastaviti velikost HTML elementa Kako pozicionirati tekst v odstavku
Pred to lekcijo preberi	Osnove HTML

Če ste dobro preučili osnove HTML, ste opazili, da je oblikovanje teksta na Web straneh hudo omejeno. S HTMLjem lahko npr. naredimo:

	odstavke (s pomočjo ukaza <P>)
	bullete in oštevilčene sezname s pomočjo ukazov <OL>, <UL> in LI>
	naslove s pomočjo ukazov <H1> ... <H6>
	formatiranje teksta z ukazi kot je <FONT>, <B>, <I> ...

Zelo težko pa je v HTMLju narediti stvari, ki so v urejevalnikih teksta zelo enostavne, npr. obarvano ozadje teksta, tekst, zamaknjen v levo ali desno, rob okoli teksta ipd. 

Nekatere od teh zahtev lahko zasilno rešimo s pomočjo tabel, vendar je oblikovanje teksta s pomočjo tabel navadno zamudno in nerodno.

Da bi oblikovalcem Web strani olajšali delo, je bil razvit standard Cascading Style Sheets (CSS), ki naj bi oblikovalcem Web strani nudil približno takšne možnosti kot so na razpolago v urejevalnikih teksta.

Standard CSS naj bi podpirali vsi moderni browserji, celo tako stari browserji kot sta Netscape 4 in Internet Explorer 4. Na žalost imata ta dva browserja množico programskih napak, zaradi katerih so rezultati, ki jih boste videli v teh dveh browserjih, navadno naključni. Če se boste odločili in svoje strani oblikovali s pomočjo tehnologije CSS je veliko bolje da svojim uporabnikom predlagate nadgradnjo browserja kot pa da poskušate najti magično kombinacijo, ki bo vašo stran pravilno prikazala v obeh zgoraj naštetih browserjih (in v vseh novejših).

Osnove CSS

Osnovna ideja CSS je zelo enostavna - vsakemu elementu HTML strani lahko določimo stil ki definira njegove barve, fonte, formatiranje (levi, desni rob), obrobe, položaj na strani ... Stil posameznega elementa določimo zelo enostavno - v HTML tag (npr. <P>, <B>, <H1> ...) dodamo parameter style=definicija-stila, kjer v definiciji stila naštejemo naše zahteve, vsako v obliki parameter=vrednost;. Seveda moramo zaradi znakov, uporabljenih v definiciji stila (podpičje in enačaj) definicijo stila obdati z narekovaji.

Stil lahko določimo celotnemu dokumentu (če definiramo stil za BODY tag), posameznim odstavkom (če definiramo stil ukazu <P>) ali posameznim elementom teksta (npr. posameznemu poudarjenemu tekstu, če definiramo stil ukazu <B>).

Nastavitve barve HTML elementov

V prejšnjem primeru ste videli, kako lahko nastavimo barvo HTML elementa (v našem primeru poudarjenega teksta). HTML elementom lahko nastavimo tudi barvo ozadja ali pa za ozadje uporabimo celo sliko s pomočjo definicij stila iz naslednje tabele:

Barvo HTML elementa lahko podamo na več načinov:

	z imenom barve (npr. red)
	s heksadecimalno vrednostjo barve v obliki #RRGGBB (npr. #325CE0). Teh vrednosti ste verjetno že navajeni iz ukaza <FONT>
	naštejemo vrednosti vseh treh komponent barve (rdeča - R, zelena - G in modra - B) v razponu od 0 do 255 (podobno kot heksadecimalna vrednost barve, le nekoliko bolj razumljivo) v obliki rgb(R,G,B), npr. rgb(50,92,224).
	Naštejemo procentualno vrednost rdeče, zelene in modre barve v obliki rgb(R%,G%,B%), npr. rgb(30%,40%,80%).

 Pot do slike ozadja moramo podati tako da, URL (relativen ali absoluten) vložimo v tekst url(). Če je slika ozadja v istem imeniku kot HTML stran, lahko uporabimo npr. url(ozadje.gif), če je slika ozadja v drugem imeniku bomo verjetno napisali nekaj podobnega kot url(../images/ozadje.gif), če pa bomo sliko ozadja dobili iz drugega strežnika, bomo morali uporabiti absoluten URL, npr. url(http://www.myserver.com/images/ozadje.gif).

Pazljivi opazovalci bodo v prejšnjem primeru opazili vsaj dve napaki:

	Tekst ni centriran v sliki ampak glede na celotno širino zaslon
	Slika ozadja je odrezana, saj je odstavek velik le toliko kot je velik tekst v njem.

Nastavitev velikosti HTML elementa

Zadnji primer v prejšnjem razdelku nas ni zadovoljil, ker je bila slika ozadja odrezana - nekako bi morali povedati kako visok in kako širok naj bo odstavek. To naredimo z naslednjimi definicijami stila:

Višino in širino (oziroma sploh vse dolžinske enote v CSSju) lahko podamo na mnogo različnih načinov, najbolj pogosti so našteti v naslednji tabeli:

Nadaljujmo torej prejšnji primer, ki ga bomo dopolnili tako, da bomo podali višino in širino odstavka.

Rezultat je že boljši - vidi se celoten banner in tekst je lepo centriran v njem. Moti le to, da je tekst napisan na zgornjem robu bannerja in ne v njegovi sredini. 

Pozicioniranje teksta v HTML elementu

Pozicijo teksta v HTML elementu (npr. teksta znotraj okvirja, ki določa odstavek), določimo z naslednjimi parametri:

parameter	vrednost
line-height	velikost vrstice teksta
text-align	left - levo poravnan tekst right - desno poravnan tekst center - centriran tekst justify - tekst s poravnanim levim in desnim robom. Te vrednosti ni priporočljivo uporabljati, saj dobimo lepo poravnan tekst praviloma le s pomočjo deljenja besed, ki ga browserji ne podpirajo.

 S pomočjo teh dveh parametrov bomo popravili naš banner.