U ranijim lekcijama smo se bavili isključivo HTML jezikom i njegovim svojstvima. Videli smo kako se unosi sadržaj na stranice, a sada ćemo se upoznati sa CSS-om, njegovim osnovnim pravilima i stilizacijom elemenata.
Šta je CSS
Iako je već 1990. Tim Berners-Lee – tvorac weba – izradio preglednik koji je u sebi imao elemente jezika za definisanje stilova, tek se 1993. i 1994. godine zahuktala rasprava o tome kako taj jezik mora izgledati. Nakon Wium Lee i Bert Bos autori su prve specifikacije CSS-a, predstavljene krajem 1994. godine.
CSS[1] (Cascading Style Sheets) je jezik koji se koristi za opis prezentacione semantike dokumenta pisanog u opisnom jeziku (markup language). Jednostavnije rečeno, opisuje, tj. uređuje izgled i formatiranja bilo kog elementa na stranici. On nam omogućuje da, kreirajući CSS opise, stilizujemo elemente HTML i drugih dokumenata.
CSS je nastao dosta kasnije nego što je to slučaj sa HTML-om. U početku, HTML stranice nisu bile vizuelno stilizovane. Potom smo koristili HTML tagove za stilizaciju, ali je sve to bilo previše komplikovano i nepraktično. Zato je osmišljen CSS jezik koji ostavlja HTML strukturi da prikazuje sadržaj, a CSS taj sadržaj stilizuje. U početku, mnogi autori su kombinovali HTML i CSS stilizaciju, ali danas, kada je CSS potpuno sazreo, možemo u potpunosti poštovati pravilo razdvojenosti sadržaja (HTML) i stilizacije (CSS).
CSS nam omogućuje da kreiramo opise pomoću kojih ćemo stilizovati određene elemente. Na primer, CSS-om možemo definisati da pozadina strane bude plava i da sav tekst na njoj bude u fontu Arial i to u crvenoj boji. Takođe, možemo postaviti da svi paragrafi imaju određene margine i tako dalje.
U CSS-u ne pišemo tagove niti postavljamo bilo kakav HTML sadržaj. On služi isključivo za uređivanje i stilizaciju sadržaja u HTML i drugim dokumentima.
CSS je odvojen od HTML jezika i njegovih tagova. Ukoliko imamo kreiranu HTML stranicu, nije potrebno da prepravljamo taj kôd kako bi uneli CSS kôd. Njega unosimo ili u posebnom fajlu (sa ekstenzijom .css) ili u head delu HTML dokumenta.
Osnova razumevanja funkcionisanja CSS jezika je da zamislimo nevidljiv okvir (box) oko svakog elementa na strani. CSS-om kreiramo opise pomoću kojih stilizujemo taj okvir, ali i same elemente unutar njega.
CSS sintaksa[2] se sastoji iz CSS opisa[3] (CSS Rule). Sami CSS opisi su obavezno sastavljeni iz dva dela. Razlikujemo selektor (selector) i deklaraciju (declaration).
Selektor ukazuje na koji element (ili više njih, odvajamo iz zarezom) se odnosi taj CSS opis.
Deklaracija postavlja stilizaciju za element na koji se odnosi CSS opis.
Kada kreiramo CSS opis, postavljamo selektor, zatim unosimo razmak i postavljamo vitičaste zagrade u kojima pišemo deklaracije.Kao na sledećem primeru:
h1 { color:red; }
Primer kôda iznad predstavlja jedan jednostavan CSS opis.
Deklaracije se takođe sastoje iz dva dela, a to su svojstvo (property) i vrednost (value). Pišemo svojstvo, postavljamo dve tačke (:) i zatim vrednost. U istom opisu možemo pisati više deklaracija, samo ih odvajamo znakom tačka-zarez (;). Pogledajmo primer:
Ukoliko želimo da postavimo da paragrafi naše stranice budu u fontu Tahoma i da imaju veličinu 12px, pisaćemo:
p {
font-family:Tahoma;
font-size:12px;
}
U ovom primeru postavili smo selektor p koji označava da se taj opis odnosi na sve paragrafe u dokumentu (na <p> tagove u HTML-u). Postavili smo vitičaste zagrade i u njima pisali dve deklaracije koje se odnose na izbor fonta (font-family) i izbor veličine teksta (font-size). Primećujete da između svojstva i vrednosti u deklaraciji stoji uvek znak :(bez razmaka), a da posle deklaracije uvek stoji znak ; (koji označava kraj vrednosti).
Važno je pomenuti da novi redovi i razmaci u CSS jeziku ne igraju preterano značajnu ulogu, ali treba poštovati neku strukturu radi preglednosti kôda. Uobičajeno je da se pišu selektor i početna zagrada u jednom redu. Zatim, na sledećim redovima sve deklaracije (po jedna po redu) i na kraju zatvaramo zagradu u novom redu, kao na primeru iznad.
CSS selektori razlikuju velika i mala slova tako da moramo voditi računa o tome.
Neke vrednosti mogu imati više vrednosti (odvajamo zarezom), ili mogu imati više grupa vrednosti (odvajamo razmakom) ili mogu sadržati string (tekst) i tada pišemo vrednost pod znacima navoda. Može doći i do kombinacije tih načina pisanja. Pogledajmo primere za ove slučajeve:
p {
font-family:”Times New Roman”, Arial;
margin:10px 0 0 0;
}
Pre nego što krenemo dalje, dobro zapamtite ove termine koje smo pominjali do sada u ovoj lekciji jer ćemo se uvek vraćati na njih. Dakle, da ponovimo: CSS jezik se sastoji iz opisa. Svaki opis je sastavljen iz selektora i deklaracija. Deklaracija se sastoji iz svojstva i vrednosti.
CSS opisi
[1] (Cascading Style Sheets) je jezik koji se koristi za opis prezentacione semantike dokumenta pisanog u opisnom jeziku (markup language). Jednostavnije rečeno, opisuje, tj. uređuje izgled i formatiranja bilo kog elementa na stranici. On nam omogućuje da, kreirajući CSS opise stilizujemo elemente HTML i drugih dokumenata.
[2] Način pravila pisanja određenog jezika. U slučaju web razvoja govorimo o sintaksama programskih ili opisnih jezika (HTML, CSS…)
[3] Skup deklaracija kojima se uređuje određeni sadržaj na HTML strani. Pozivanjem u HTML kodu strane, parametri dizajna iz pravila se primenjuju na sadržaje koji su povezani sa pravilom.