Algne HTML oli mõeldud dokumentide struktuuri kirjeldamiseks - märgendite abil taheti öelda "see siin on lõik", "see siin on pealkiri" jne. Kuid nagu palju muudki Internetis, arenes ka veeb oma algsest otstarbest peagi kaugemale. Kui veebist sai meedialiik, muutus oluliseks visuaalselt efektse väljanägemise saavutamine, mis aga muutus teinekord tõeliseks "mustaks maagiaks" - tulemus oli saavutatud ebastandardsete vahenditega "peedist pesumasinale trumli" tegemisega. Takkapihta hakkasid kaks juhtivat veebilehitsejat - Netscape ja Internet Explorer - suures võistlustuhinas juurutama omaenese uusi märgendeid, mida vaid konkreetne lehitseja toetas. Nii kippuski kujunema olukord, kus üha enam võttis võimust lehitsejaspetsiifiline veebiloome - lehtedel hakkas kohtama silte "Best viewed with IE" või "Optimized for Netscape at 800 x 600". Veeb hakkas kaotama üht oma peamist tõmbenumbrit - standardsust ja ühtmoodi mõistetavust. Ka hakkas uute märgenditega üha enam kaduma algne üsna selge vahe struktuuri ja kujunduse vahel (eriti süüdistatakse selles HTML 3.2-s sissetoodud font-märgendit).
Olukorra parandamiseks pakkus W3C (World Wide Web Consortium) välja uue tehnoloogia, mis pidi tegema taas selge vahe kujunduse ja struktuuri vahele - HTML-i kõrvale pakuti välja uus standard, mis pidi võtma kogu kujunduspoole enda peale. Standardi nimeks sai Cascading Style Sheets ehk kaskaad-stiililehed - "kaskaad" viitab võimalusi tuletada ühtedest lehtedest teisi (sarnaselt objektorienteeritud programmeerimisega).
CSS-i "käimatõmbamine" võttis omajagu aega - päris pikalt oli ka siin probleeme erinevate tõlgendustega eri veebilehitsejate poolt, mistõttu ka CSS-iga lehed nägid pahatihti eri veebilehitsejates isemoodi välja. HTML 4 ja eriti XHTML-i ajaks aga oli algsele CSS1-le (CSS tase 1) lisandunud täiendavate võimalustega CSS2 - muuhulgas sisaldab see ka spetsiaalselt ekraanilugejatele mõeldud stiilimääranguid - ning järk-järgult on CSS-ist saanud veebikujunduse standard.
Stiilileht koosneb reeglitest. Reeglid määravad üksikute elementide esitamise vormi.
Reegel koosneb selektorist (määrab sisuliselt HTML-märgendi, mille kuvamise viisi käesoleva reegliga määratletakse - näiteks lõigumärgend <p>) ja definitsioonidest, mis määravad kuvamisvormi eri aspektid (tähesuurus, värvid, kirjastiil, reavahe, joondus jpm). Definitsioonideosa ümbritsetakse looksulgudega ning need eraldatakse teineteisest semikooloniga. Seega on reegli üldkuju järgmine:
selektor
{
definitsioon1;
definitsioon2;
...
definitsioon N
}
Märkus: paigutus on vaba - kogu reegli võib kirjutada ka ühele reale või jaotada eri ridadele mõnel teisel viisil.
Definitsioon koosneb omadusest ja selle väärtusest (definitsiooni ja reegli paar sarnaneb HTMLi märgendites kasutatavale argumendi ja väärtuse paarile, kuid kirjaviis on veidi teistsugune). Olgu näitena toodud reegel, mis sätestab lõigumärgendi <p> kuvamise vormi:
p {font-size: 8pt; color: red}
Lühike reegel nagu see tasub paigutada ühele ja samale reale. p on siin selektor, määrates käsitletavaks märgendiks lõigumärgendi <p> (NB! <>-märke stiililehe selektorile ei lisata). Definitsioone on selles reeglis kaks. Esimene koosneb omadusest font-size ja selle väärtusest 8pt - seega määratakse lõigu teksti suuruseks 8 punkti. Teine definitsioon määrab samal moel lõigu tekstivärviks punase.
2003-2024 Kaido Kikkas.
Käesoleva dokumendi paljundamine, edasiandmine ja/või muutmine on
sätestatud GNU Vaba Dokumentatsiooni Litsentsiga (versioon 1.2 või
uuem).
Litsentsi ingliskeelne täistekst