Sissejuhatus

Kodulehekülgede loomiseks kasutatav HTML keel oli algselt mõeldud väga lihtsate veebidokumentide tegemiseks. 1990. aastate algul, kui Internet laiemalt levima hakkas ning populaarsust kogus, võimaldasid arvutite riistvara, kasutatavad programmid ja võrguühenduskiirus edastada peamiselt teksti- harvematel juhtudel ka pildilist infot.

Internet sarnanes pigem ülimahukale raamatule, kus oluline koht oli sõnalisel, mitte pildi kujul edastataval informatsioonil. Ka HTML oli välja töötatud just selle eesmärgiga, võimaldades väga lihtsalt luua tekstipõhiseid veebilehti. Interneti populaarsuse kasvades otsisid veebilehekülgede loojad võimalusi olemasolevat HTML-i ära kasutades luua kasutajate jaoks atraktiivsemaid lehekülgi. Internet muutus teadusprojektist äriliseks ettevõtmiseks.

Näiteks hakati veebisaitidel info paigutamiseks kasutama tabeleid, matkides seeläbi ajalehtedest inimestele harjumuspäraseks saanud mitmeveerulist tekstipaigutust. Pilte ei kasutatud enam vaid teksti ilmestamiseks või selgitavate jooniste tegemiseks. Piltide roll oli muuta lehekülg omanäoliseks, neid kasutati kujunduselementidena ning näiteks leheküljel liikumiseks vajalike nuppude ning menüüde loomisel.

Kodulehtede ülesehitus muutus keerukamaks ning veebitegijatel oli jätkuvalt soov kasutada ühtset kujundust kõikides ühe veebisaidiga seotud HTML-failides. Senini kasutusel olnud veebitegemise tehnikad seda aga ei võimaldanud. HTML oli mõeldud teksti struktuuri ("see on pealkiri, see on tekst, see on pilt jne.") esitamiseks, mitte kujundamiseks.

Veebi kujundamise probleemid

Koosnegu kodulehekülg kümnest HTML-failist. Olgu igas failis üks esimese taseme ning viis teise taseme pealkirja. Lehekülje loomisel otsustati, et kõik esimese taseme pealkirjad olgu sinised, teise taseme omad aga punased. Kui nüüd veebitegemise käigus selgus, et mõistlikum oleks hoopis esimese taseme pealkirjad roheliseks ning teise taseme omad kollaseks värvida, tuleks kokku teha igas failis kuus muudatust. Et aga faile oli kümme, on muudatuste koguarv tegelikult hoopis 60. Kui arvestada, et ühe muudatuse tegemiseks kulub näiteks pool minutit (õige koha ülesotsimiseks ning muudatuse sisseviimiseks kulunud aeg), saab kõik pealkirjade värvivahetused sooritatud poole tunniga.

Kuigi eelnev näide on pisut kunstlik, sest arvutiprogrammid võimaldavad kasutada ka teksti otsimise ja asendamise käsklusi, on suuremahuliste kodulehekülgede korral kogu protseduur siiski piisavalt tülikas. Mõistlikum oleks kodulehekülje kujundusega seotud info koondada kokku näiteks eraldi faili, kus seda kiiresti ja vaid ühes kohas muuta tuleks. Lehekülje kuvamisel loeb veebibrauser sellises stiililehe failis olevaid seadeid, ning kujundab konkreetse HTML dokumendi ekraanil just nende järgi. Sellise tegevuse eesmärk on hoida üksteisest lahus veebi ülesehitus ja tema kujundus.

Selleks, et brauser mingis failis olevat infot kasutada mõistaks, peab see olema kindla ja suhteliselt range ülesehitusega. Seega on ka CSS-i kirjutamise jaoks omad reeglid ning tema kasutamaõppimine sarnaneb mistahes uue märgikeele selgekstegemisele. Kuna kõiki käske korraga pähe õppida pole võimalik, sisaldavad artikli lõpus olevad viited CSS käsustiku ülevaadet ja tutvustusi.

Mis see CSS siis on?

Inglisekeelne lühend CSS tähistab standardit nimega Cascading Style Sheets, mida on eesti keelde tõlgitud kui kaskaad-stiililehed (kaskaadlaadistik). Stiilileht tähistab siinjuures spetsiaalse ülesehitusega faili, kus kirjeldatakse ära veebidokumendi erinevate osade välimus. Terminist stiililehed on näha, et selliseid stiililehti võib olla ka rohkem kui üks.

Mõiste teine osa – kaskaad – tähendabki kirjeldust, kuidas veebilehitseja erinevaid stiile lehekülje näitamisel kombineerima peab. Nimelt on võimalik paindlikkuse huvides ühe või teise HTML elemendi (näiteks pealkirja, lõigu, tabeli) välimust kirjeldada CSS-i abil mitmes erinevas kohas.

See tegevus sarnaneb näiteks koolis käitumishinde panemisele, kus klassijuhatajad küsivad enne lõpliku otsuse tegemist sageli arvamust paljudelt antud klassile ainetunde andvatelt õpetajatelt. Kõigi antud arvamuste põhjal kujundatakse igale õpilasele lõplik hinnang tema käitumisele. Analoogiliselt peab ka veebibrauser enne tabeli ekraanil näitamist kõik stiilikirjeldused kokku koguma ning sellest ühe lõpliku terviku moodustama.

Ühe HTML elemendi kujundust saab määrata kolmes kohas:

  1. Kirjutades CSS kujunduskäsud vahetult antud elemendi sisse

  2. Kirjutades kujunduskäsud veebidokumendi <head>-osasse

  3. Moodustades käskudest eraldi faili ning lisades selle vastava HTML-käsuga veebidokumendile

Järgnevalt vaatleme kõiki kolme võimalust täpsemalt.