Uvod u CSS

Da bismo shvatili zašto je HTML postao ono što je danas, moramo nakratko zaviriti u ne tako davnu prošlost. Razvijen kao strukturni jezik, prvenstveno je bio namijenjen strukturiranom prikazu podataka na web stranicama. Njegova jednostavnost i primjenjivost dovele su do toga da ga je vrlo brzo prihvatio velik broj korisnika. U kratkoj povijesti računalnih tehnologija nijedan drugi računalni jezik nije u toliko kratkom vremenu stekao tako veliku popularnost.

Istovremeno s eksponencijalnim rastom broja web sjedišta rasla je i potreba web dizajnera da svoja sjedišta učine ljepšima i privlačnijima. Uočene nedostatke tadašnjeg HTML-a, kao što je, primjerice, izostanak oznaka koje su dokumente činile privlačnijima korisnicima, komercijalne tvrtke koje su proizvodile web preglednike pokušale su nadoknaditi tako što su, uz ionako slab utjecaj standardizacijskih organizacija, u jezik unosile svoje oznake. To je kulminiralo takozvanim „ratom preglednika” iz kojeg je Internet Explorer izišao kao pobjednik tako što je zavladao s preko 95% tržišta.

1995. godine W3C je definirao standardiziranu specifikaciju jezika HTML koja je u sebi sadržavala mnoge elemente koje su u jezik unijeli proizvođači preglednika.

• Za standardizaciju CSS-a brine se W3 konzorcij(W3C), organizacija zadužena za WWW standarde.

Ta je kratka i burna prošlost uzela svoj danak. Neke se činjenice nisu mogle sakriti. Nekompatibilnost preglednika kao posljedica samovolje proizvođača u prošlosti je, a u nekoj mjeri i danas, uzrokovala nemale probleme za većinu web dizajnera. Složenost kôda opterećenog oznakama za prikaz podataka dovela je do toga da je u dokumentu bilo više oznaka nego podataka. Nedostatak mogućnosti s jedne strane i neprestana potreba za privlačnim dizajnom s druge strane, neprestano su tjerali web dizajnere da osmišljavaju nove načine i izmišljaju nove trikove kako web sjedište učiniti ljepšim.

Izgled čistog HTML kôda s dizajnerskim dodacima.
Jasno je vidljiva količina oznaka
u odnosu na podatke koji se prikazuju.

Kako prilagoditi izgled stranice da ona bude jednakog prikaza u svim preglednicima? Kako formatirati dokument da elementi u njemu budu precizno smješteni? Kako na web sjedištu od stotinu stranica odjednom promijeniti, primjerice, boju znakova na svim stranicama?

Ovakva su se pitanja nizala uzdižući na površinu frustracije s kojima su se susretali autori web stranica.

• Pretraživanjem Interneta otkrijte što su to ratovi preglednika (browser wars) te kad su i kako najviše ometali korisnike, surfere.

Pitanja navedena u prethodnom poglavlju tražila su žuran odgovor. Iako je već 1990. Tim Berners-Lee – tvorac weba – izradio preglednik koji je u sebi imao elemente jezika za definiranje stilova, tek se 1993. i 1994. godine zahuktala rasprava o tome kako taj jezik mora izgledati. Håkon Wium Lie i Bert Bos autori su prve specifikacije CSS-a, predstavljene krajem 1994. godine.

CSS (eng. Cascading Style Sheets), odnosno kaskadni stilovi, jednostavan su mehanizam za dodavanje stilova – fontova, boja itd. – web stranicama. Svojim je dolaskom CSS izazvao pravu revoluciju na webu i to zahvaljujući nizu prednosti od kojih možemo razmotriti samo neke osnovne:

• Upotrebom CSS-a omogućilo se odvajanje prezentacije podataka i dizajna od strukture podataka. To znači da su sada dizajneri mogli samostalnije osmišljavati web sjedišta – praktički neovisno o kreatorima HTML kôda.
• HTML kôd postaje neusporedivo čitkiji i manji što znači da ga je bilo puno lakše nadzirati.
• Kaskadnim stilovima omogućeno je upravljanje web sjedištem s jednog mjesta uz poštivanje pojedinačnih odstupanja od zadanog stila. Odjednom je postalo moguće jednostavnom promjenom nekoliko parametara promijeniti izgled tisućama stranica.
• Predložen i standardiziran pod okriljem W3 konzorcija otpočetka je približno jednako implementiran kod različitih proizvođača web preglednika. To što nije u potpunosti jednako implementiran, lako se rješavalo uporabom različitih stilova za različite preglednike (ali ponovno na jednom mjestu za sve stranice).
• CSS je donio čitav niz načina za uređivanje prikaza podataka koji do tada nisu postojali u HTML-u.

CSS je, kao uostalom i sve ostale web tehnologije, u stalnom razvoju. Trenutna specifikacija predložena za upotrebu je CSS verzije 2, prva revizija, dok je od specifikacije CSS3 u stabilnom stanju samo nekoliko njezinih dijelova – modula. Te i sve ostale standarde i preporuke možete pronaći na CSS stranicama W3 konzorcija. Predlažemo da pregledavanje službenih standarda ostavite za kasnije kada će vam stečeno iskustvo u radu s CSS-om znatno olakšati snalaženje. U ovom ćemo se tečaju ograničiti na CSS 2.1 budući da on obuhvaća većinu mogućnosti potrebnih za osnovni rad s CSS-om.

• Svojom omiljenom tražilicom potražite u Hrvatskoj i svijetu web stranice koje potiču uporabu CSS-a.
• Jedan od primjera kako jednostavno, a lijepo, mogu izgledati stranice oblikovane CSS-om, možete pronaći na stranicama CSS Zen Garden.
• Na stranicama CSS Zen Gardenvažno je uočiti još jedan detalj: promjenom dizajna mijenja se samo CSS datoteka, dok HTML kôd ostaje isti. To dokazuje da je prezentacija podataka (naslovi, podnaslovi, tekst,...) odvojen od dizajna.

Mnogi će reći da je za kreiranje CSS datoteke dovoljno imati jednostavan program za uređenje teksta (npr. Notepad). Iako, gledano s tehničke strane, taj stav u potpunosti stoji, u praksi je puno bolje za rad upotrebljavati kvalitetan alat. Naime, u praksi se pokazalo da je jako teško otipkati desetak redaka čistog teksta, a da vam se pri tipkanju ne potkrade pokoja greška. Zato treba koristiti prednosti specijaliziranih editora koji imaju ugrađene efekte za bojanje pojedinih elemenata jezika i za automatsko dovršavanje ključnih riječi, što rad čini dosta lakšim. Osim toga, uz njih obično dolaze i popisi ključnih riječi te razne druge reference, što će dodatno olakšati rad.

Svi vodeći WYSIWYG alati (Adobe Dreamweaver, Microsoft Expression Web itd.) imaju ugrađene kvalitetne CSS editore. Međutim, ti su alati komercijalni i nisu svima dostupni. Iz iste kategorije postoji besplatan program Microsoft SharePont Designer 2007 koji također podržava rad sa stilovima. Osim njih, na tržištu postoji čitav niz lako dostupnih, pa čak i besplatnih, alata za izradu CSS-a, a popis većine možete pronaći na stranicama W3 konzorcija.

• Pogledajte popis CSS editoras kratkim opisima i linkovima na sjedištu W3 konzorcija.

Iz popisa možemo izdvojiti jedan alat koji se svojom jednostavnošću i kakvoćom ističe od ostalih. To je TopStyle, proizvod tvrtke Bradbury Software, koji je preuzeo jedan od njegovih autora, Stefan van As. Danas ovaj program dolazi u inačici „Pro”, a niz godina postojala je i besplatna inačica „Lite”. Iako je profesionalna inačica kvalitetnija i nudi dosta dodatnih opcija, mi ćemo se zadovoljiti nekoliko godina starom „Lite” inačicom koja je sasvim dovoljna za većinu poslova pri pisanju kaskadnog stila standarda CSS 2.1.

Ikona programa TopStyle Lite.

Više o programu TopStyle Lite doznajte u sljedećoj lekciji. Nakon nje slijedi lekcija o web preglednicima, a na kraju tečaja će biti riječi i o raznim naprednijim alatima za rad sa stilovima.

• Preuzmite jedan od editora s popisa i instalirajte ga na računalo.
• Ako ne možete ili ne smijete instalirati program na računalo, za pisanje CSS-a se možete poslužiti istim programom kao za pisanje HTML-a, Notepad++, koji prema ekstenziji datoteke prepoznaje jezik te tekst prema sintaksi tog jezika boji na odgovarajući način. Postoji i prijenosna verzija programa Notepad++ koju nije potrebno instalirati.
• 
  Ikona programa Notepad++.

Instalacija programa TopStyle Lite poprilično je jednostavna – dovoljno je izabrati ponuđene vrijednosti.

• Na ovom linku možete preuzeti program TopStyle Lite 3.5. U trenutku pisanja tečaja najpouzdaniji je priloženi link ovaj koji pokazuje na zbirku besplatnog softvera, ali pozivamo polaznike da prije preuzimanja provjere postoji li novija besplatna verzija programa.

Prozor TopStyle Lite programa podijeljen je na tri cjeline. Prvi, najveći dio prozora, predviđen je za CSS kôd.

Veći dio radne površine namijenjen je pisanju kôda.

Donji dio programskog prozora nudi prikaz postavljenih stilova s fontovima, bojama pozadina i ostalim svojstvima.

Prikaz izgleda postavljenih stilova.

Desno je višenamjenski prozor u kojem možete birati prikaz selektora ili svojstava pojedinog selektora. Nemojte se previše brinuti ukoliko vam u potpunosti nije jasna svaka funkcija koju program nudi. Već nakon prvih nekoliko koraka u svijet CSS-a većina funkcija će vam postati jasna.

Popis i izbornik svojstava pojedinog selektora.

Usporedba web preglednika i rasprava o njihovim dobrim i lošim stranama općenito je nezahvalan posao. Već i sama izjava da je nekakav dodatak kod jednog web preglednika dobar te da dodatak iste namjene kod drugog nije dobro izveden ili ne postoji, u javnosti već godinama izaziva ratove riječima, pogotovo kod poklonika pojedinog preglednika.

Preporuka je da svatko tko želi izrađivati web stranice treba imati instalirana barem dva web preglednika, da bi pri izradi mogao uspoređivati neizbježnu razliku u prikazu stranica.

• Na svom računalu imate barem jedan web preglednik – ako upotrebljavate operacijski sustav Windows, onda je to Internet Explorer, a inače su to vrlo vjerojatno preglednici drugih tvrtki, odnosno organizacija.
• Provjerite imate li instaliran još neki web preglednik te, ako ga nemate, izaberite i instalirajte barem još jedan: Firefox, Chrome, Opera, Safari...

Svoje web stranice trebate provjeravati u prozorima različitih veličina, za što vam najčešće ne treba mnogo različitih monitora jer prozor preglednika lako možete smanjiti. No, zgodno je ipak isprobati stranice na vrlo malim uređajima s ne uvijek idealnim vezama, kao što su pametni telefoni (smartphone).

Web stranica www.carnet.hr prikazana na mobitelu
s operacijskim sustavom Android.

• Uvjerite se u prethodne tvrdnje tako da posjetite nekoliko web sjedišta raznim preglednicima i u raznim veličinama prozora preglednika. Ako možete, upotrijebite i više različitih računala s više različitih operacijskih sustava.
• Profesionalno izrađena web sjedišta trebala bi vrlo slično izgledati u svim slučajevima, no sigurni smo da ćete naići i na web sjedišta s velikim razlikama uzrokovanim izborom preglednika i veličinom prozora.

Bez mjernih jedinica definiranje jednostavnih postavki poput boje i veličine fonta ne bi bilo moguće. Zato, prije nego što upoznamo načine definiranja navedenih postavki, recimo nekoliko riječi o jedinicama koje ćemo upotrebljavati u tu svrhu.

Određivanje boja i veličina objekata
neizostavno vodi do rada s brojevima.

Iako nam je dostupna čitava paleta mjernih jedinica i vrijednosti, u sljedećim lekcijama ćemo obraditi samo neke najčešće korištene načine definiranja boja i dužina.

Kad govorimo o bojama na zaslonu monitora, tada ustvari mislimo na RGB – red, green, blue – prikaz boje kod kojeg je svaka boja prikazana nijansom crvene, zelene i plave. RGB zapis moguće je napisati na više načina, a u praksi se najčešće susreću heksadecimalna inačica te zapisivanje boje njenim nazivom. Nešto o zapisivanju boja možda ste već naučili obrađujući slike (ili pročitali na tečaju Obrada slika pomoću GIMP-a) te vam ova lekcija nudi mali podsjetnik na naučeno, uz jedan praktični savjet.

Boja se zapisuje heksadecimalnim brojevima na sljedeći način: #rrggbb, gdje je rr nijansa crvene, gg nijansa zelene, a bb nijansa plave boje. Svaki od brojeva može biti od 00 do ff, pa se, primjerice, puna crvena boja zapisuje s #ff0000.

Osim punog brojčanog zapisa boja postoji i skraćen zapis koji se često susreće u praksi. Skraćeni zapis je #rgb koji preglednik pretvara u pun zapis udvostručujući brojeve: r postaje rr, g postaje gg, a b postaje bb. Tako se navedena crvena boja može zapisati kao #f00.

• Možda se čudite što se spominju brojčane vrijednosti, a pišu slova. Sjetite se da se radi o heksadecimalnom brojčanom sustavu u kojem postoje znamenke od 0 do 9 te a,b,c,d,e i f.

Budući da je standardom CSS 2.1 definirano samo sedamnaest naziva boja, preporučljivo je boje označavati njihovim heksadecimalnim kôdom. Budući da na prvi pogled možda izgleda složeno boju promatrati kroz njen kôd, svaki imalo bolji HTML ili CSS editor ima pomoćni alat za izbor nijansi boja – tzv. color picker.

Alat za izbor boja – dio TopStyle Lite programa.

• Osim color picker alata koji su sastavni dio programa za izradu HTML-a i CSS-a, te programa za obradu slika, postoje i dodaci web preglednicima koji obavljaju isti zadatak na web stranicama, te samostalni alati slične funkcije.

Kapaljka – uobičajeni izgled ikone skupljača boja.

Kod mjernih jedinica i vrijednosti za duljine situacija nije ništa manje složena nego kod boja. Postoji nekoliko različitih načina označavanja vrijednosti koji se ravnopravno koriste. Pogledajmo neke najčešće korištene mjerne jedinice za duljine.

• Jedinice za izražavanje duljine dužina odnose se i na vodoravne i na uspravne dužine. Primjerice, istim se jedinicama mjeri visina znakova i širina tablice.

point [pt] – tipografska jedinica koja dužinu od jednog inča definira sa 72pt. Duljina jednog inča je 2,54 cm pa uz malo računanja za veliko slovo standardnog fonta od 12pt, koji je uglavnom unaprijed zadan kod većine programa za obradu teksta, dobijemo vrijednost od 0,42 cm.

em [em] – relativna jedinica za definiranje veličine fonta. Po definiciji je ekvivalentna vrijednosti font-size za dani element. Primjerice, ukoliko za paragraf definiramo vrijednost font-size od 12pt, tada će unutar tog paragrafa 1em poprimiti vrijednost od 12pt, 2em vrijednost od 24pt itd.

piksel [px] – približite li dovoljno pogled vašem zaslonu, primijetit ćete da je podijeljen u rešetkastu strukturu sastavljenu od malih kvadratića. Ti se kvadratići nazivaju pikseli. Jedna od najvažnijih stvari koje povezujemo s pikselima je rezolucija koju koristimo na monitoru. Danas su u upotrebi monitori različitih veličina i oblika („obični” i široki, wide), ali možemo smatrati da je širina većine monitora između 1000 i 1600 piksela. Neke od poznatih rezolucija su 1280x1024, 1280x768, 1600x1200 i mnoge druge.

Koje mjerne jedinice treba upotrebljavati, ovisi o namjeni. Za web stranice predviđene isključivo prikazu na zaslonu dobro je koristiti piksel jer će njegova vrijednost uglavnom biti definirana stvarnom fizičkom veličinom piksela zaslona, dok je za web stranice namijenjene ispisu bolje koristiti point ili em koji su toj namjeni više prilagođeni.

• Provjerite rezolucije monitora na svim uređajima s kojih pristupate webu.
• Rezoluciju koju ste pronašli možete usporediti s rezultatom koji se ispisuje na web-stranici koja provjerava rezoluciju vašeg ekrana.