Cascading Style Sheets (CSS) je programski jezik, ki omogoča določanje oblike elektronskih dokumentov. S preprostimi navodili, predstavljenimi v jasnih izvornih kodah, lahko po želji prilagodite elemente spletne strani, kot so postavitev, barva in tipografija. Zaradi oblikovanja teksta po stopnjah, ostaneta semantična struktura in vsebina dokumenta popolnoma nedotaknjena. CSS je bil razvit sredi 90. let prejšnjega stoletja in zdaj velja za standardni jezik za oblikovanje slogov na svetovnem spletu.
CSS je eden od osnovnih jezikov svetovnega spleta, prav tako kot HTML. Medtem ko s HTML jezikom napolnite spletno stran z besedilom in ga semantično strukturirate, s CSS določite obliko te vsebine. Čeprav se HTML in CSS uporabljata skupaj, CSS navodila za oblikovanje in HTML elementi obstajajo ločeno. To pomeni, da lahko stroj prebere elektronski dokument brez CSS-a. S pomočjo CSS-a je vsebina, ki se odpre v brskalniku, vizualno pripravljena in tako predstavljena na privlačen način.
CSS je standard, ki ga konzorcij World Wide Web Consortium nenehno razvija. Zato je treba vedno odkriti nove funkcije in praktične aplikacije. Splošno uporabljen jezik slogov je bil ustvarjen v devetdesetih letih prejšnjega stoletja. Takrat zamisel o uporabi nizov slogov za prikaz spletne vsebine ni bila več povsem nova. Toda CSS se je od drugih predstavitvenih elementov, ki so že obstajali v jeziku HTML, razlikoval v enem pomembnem pogledu: zdaj je uporabnikom omogočal, da so lahko določili pravila oblikovanja za skupine elementov v več dokumentih in v eni sami slogovni vrstici.
Dobra spletna stran ne živi le zaradi vsebine, temveč tudi zaradi oblikovanja. Če zasnova ni uporabniku prijazna ali privlačna, uporabniki hitro izgubijo zanimanje. Pri tem vam CSS ponuja številne možnosti oblikovanja, ki niso na voljo v čistem HTML jeziku.
S CSS-om lahko na primer centralno nadzorujete določene specifikacije. To pomeni, da so podobni elementi (na primer vse hiperpovezave ali slike) v istem dokumentu prepoznani in oblikovani z enim samim ukazom. Ni nujno, da so navodila za oblikovanje v obliki notranjega slogovnega lista v samem HTML dokumentu. Če navodila CSS shranite v zunanji slogovni list, tj. ločeno datoteko, lahko to uporabite tudi za druge dokumente.
Poleg osnovnih navodil za predstavitev, ki določajo barve, oblike in tipografijo HTML elementov, CSS zdaj vključuje tudi bolj zapletene module. Z njimi lahko na primer določite animacije ali različne predstavitve glede na izhodni medij. Na ta način lahko isti HTML dokument enako pripravite za vse možne medije. Ker sta vsebina in oblikovanje v tem dokumentu ločena, je koda spletne strani zaradi tega jasnejša. Sorodni slogovni jezik SASS ponuja še več možnosti, vendar ne nadomešča CSS v celoti.
S CSS navodili določite, kateri elementi v elektronskem dokumentu naj imajo katere vrednosti ali lastnosti. V osnovni strukturi je navodilo sestavljeno iz izbirnika (selector) in zavitih oklepajev. V teh oklepajih naštejete lastnosti in njihove vrednosti, ki so med seboj ločene s podpičji. Vsako navodilo je sestavljeno iz imena lastnosti, dvopičja in določene vrednosti. CSS v spodnjem diagramu zagotavlja, da je naslov h1 prikazan v rdeči barvi in velikosti pisave 30 pik:
h1 {color:red; font-size:30px;}Kako vključiti CSS v spletno mesto?
Kot smo že omenili, je mogoče CSS v elektronski dokument vključiti z notranjimi in zunanjimi slogovnimi listi. Poleg tega je na voljo tudi slog v vrstici, pri katerem so želene lastnosti nameščene neposredno v izvorno kodo HTML dokumenta. V nadaljevanju so predstavljeni trije možni načini vključevanja CSS v HTML.
Pri tem so CSS navodila opredeljena v zunanjih datotekah s končnico ".css" in vključena v HTML datoteko s pomočjo oznake "link". To je najpogostejši način, saj sta vsebina in oblikovanje jasno ločena, spremembe pa so enostavne. Povezava se vzpostavi v glavi HTML dokumenta na naslednji način:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>To je naslov</h1>.
<p>To je odstavek</p>
</body>
</html>Tu so vsa CSS navodila v sami HTML datoteki. Upoštevajte, da ti podatki veljajo le za ustrezen dokument. Za notranje slogovne liste vstavite element "style" v območje "head" v HTML dokumentu na naslednji način:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {barva:modra; velikost pisave:12px;}
</style>
</head>
<body>
<h1>To je naslov</h1>
<p>To je odstavek</p>
</body>
</html>Tako kot pri notranji vrstici slogov so tudi tu CSS navodila v sami HTML datoteki. Vendar pa obstaja pomembna razlika: ustrezni atributi se namreč nahajajo neposredno v začetni oznaki elementa in se ne uporabljajo za noben drug element. Ta metoda je še posebej uporabna, če ne želite pripravljati splošnih navodil za oblikovanje.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; font-size:12px;">To je naslov</h1>.
<p>To je odstavek</p>
</body>
</html>Kot je razvidno iz zgornjih primerov, je uporaba CSS-a mogoča le skupaj s klasično HTML strukturo. Ker HTML strukturira vsebino z odstavki, seznami in tabelami, CSS pa zagotavlja vizualno oblikovanje, se ta dva spletna jezika dopolnjujeta in sta tesno povezana. Struktura HTML dokumenta temelji na načelu škatle, v kateri so posamezni elementi nameščeni drug na drugem kot škatle. Vsako "polje", ki zavzema prostor na spletnem mestu, ima naslednje lastnosti:
Z določitvijo velikosti, oblike in barve se te "škatle" ustrezno oblikujejo. Poleg teh preprostih atributov so na voljo tudi zahtevnejša CSS navodila za vstavljanje senc v besedila, filtriranje slik ter poudarjanje polj obrazcev in drugih elementov.
