CSS

CSS (ingliskeelne lühend sõnadest Cascading Style Sheets – kaskaadlaadistik) on küljendamisel kasutatav märgistuskeel, milles märgitakse üles peamiselt veebilehtede kujundust. CSS leiab enim kasutust HTML- ja XHTML-lehtede kujunduse loomisel, samuti XML-,SGML-, XUL- ja SVG-lehtedel. 

CSS-i kombineerimine XHTML-iga võimaldab lehe sisu ja kujunduse teineteisest eraldada. See annab parema ülevaate veebilehe ülesehitusest, on abiks lehekülje hilisemal muutmisel ning võimaldab luua laadilehti eri kasutustüüpide jaoks, sh printimiseks. Lihtsamaks muutub kogu veebilehe haldus ja eelkõige kujunduse muutmine.

Süntaks
CSS-il on lihtne süntaks, milles kasutatakse ingliskeelseid märksõnu erinevate laadiomaduste nimede täpsustamiseks.

Selektor

Selektor deklareerib, mis märgenduse juurde laadi rakendatakse.

Selektorid võivad olla rakendatud: 
 spetsiifilise tüübi kõikidele elementidele
 elementidele, mis on täpsustatud atribuutiga, konkreetsemalt: 
id-le: unikaalsele identifikaatorile dokumendi sees,
klassile: identifikaatorile, mida võivad kasutada dokumendi mitu elementi,
 elementidele sõltuvalt sellest, kuidas nad on paigutatud dokumendi puus.

Ühele selektorile saab lisada mitu atribuuti. 

Allolev tabel annab ülevaate kõikide CSS-i versioonide selektoritest. Tulbas "CSS-i versioon" on kirjas versioon, millal selektorit esmakordselt defineeriti.

Deklaratsioon

Deklaratsiooniväli sisaldab deklaratsioonide listi, mis pannakse sulgudesse. Iga deklaratsioon koosneb atribuutist, koolonist(:) ja väärtusest. Kui deklaratsiooniväljal on mitu väärtust, tuleb need üksteisest eraldada semikooloniga(;).

Kasutamine

Enne CSS-i, kõik ettekandelised atribuudid kasutati HTM-märgenduse sees. CSS annab autoritele võimaluse paigutada suurema osa sellest informatsioonist teise faili, laadilehele, mis lihtsustab HTML-dokumenti.

Näide selle kohta, kuidas oli HTML-is defineeritud punast värvi pealkiri. 
<h1><font color="red"> Esimene peatükk </font></h1>  

Sama näide, aga kasutades CSS-i. 
<h1 style="color:red"> Esimene peatükk </h1>   

Eelis ei ole eriti selge, kuid see muutub selgemaks, kui CSS-i laadi omadused on paigutatud eraldi CSS-faili. 
Eeldame, et dokumendis on järgmine laadielement: 
<style>
<h1 {color: red;}
</style> 
Kõik dokumendis olevad h1 pealkirjad muutuvad punaseks, ilma et teha HTML-failis mingeid muudatusi. Kui autor soovib muuta kõik h1 pealkirjad siniseks, siis ta peab muutma värvi punasest siniseks ehk
<style>
<h1 {color: blue;}
</style> 

Laadid võivad olla paigutatud ka eraldi CSS-faili ning laaditud, kasutades järgmist süntaksi
<link type="text/css" rel="stylesheet" href="path/to/file.css"/>

CSS-i eelised

Sisu ja vorm on eraldatud

CSS kergendab sisu erinevates formaatides avaldamist nominaalsete parameetrite põhjal. Nominaalsete parameetrite hulka kuuluvad konkreetse kasutaja eelistused, erinevad veebibrauserid, selle seadme tüüp, mida kasutatakse sisu kuvamiseks, kasutaja geograafiline asukoht ja palju muud.

Terviklikkus

CSS võimaldab mõjutada ja disainida lehekülje elemente sisu puutumata. Olukorras, kus on vaja muuta või lisada elemente, võib muudatusi teha globaalses laadilehes. See säästab aega ja raha.

Ülekandekiirus

Seespidine või välispidine laadileht täpsustab laade mitmele HTML-elemendile, mille juures on märgitud vastav klass, tüüp või relatsioon. See tähendab, et veebilehekülje koostaja ei pea iga elemendi juures kirjutama laadispetsifikatsioone, piisab ühest korrast. See on efektiivsem kui iga elemendi juures informatsiooni kordamine.

Kui veebilehe kujundus on paigutatud ühte faili, siis peab kasutaja selle alla laadima vaid ühe korra. Teised leheküljed näevad juba varem allalaaditud laadilehte.

Kättesaadavus

Ilma CSS-ita peaksid disainerid paigutama kogu informatsiooni ühte HTML-faili, mis raskendaks lehe arusaamist halva nägemisega inimeste jaoks.

Eestikeelne termin
CSS-i ingliskeelse täistermini lahtiseletus on "kaskaadlaadistik"  . Toortõlget "kaskaadsed stiililehed" kohtab harvemini.

Vaata ka
XSL

Viited

Välislingid

 W3C CSS-i koduleht: CSS-i spetsifikatsioonid ja juhised.
 HTML, XHTML ja CSS – artiklid, juhendid, vahendid
 Instant CSS Code

Märgistuskeeled