Omenil sem že, da lahko CSS uporabimo v pomoč različnih jezikom, vendar se bom kot rečeno osredotočil le na souporabo z HTMLjem, torej uporabo v spletu. CSS kodo lahko v jezik HTML implementiramo na tri načine.

1. Stavkovni (inline) CSS

Skoraj vsem HTML elementom lahko dodamo stavkovna CSS pravila. Sintaksa je naslednja:

Naš prvi naslov je obarvan rdeče

V sami napovedi HTML elementa torej dodamo CSS napoved style=” “, pri čemer v narekovaje napišemo vse željene deklaracije. Ker je jasno na kateri element se CSS pravilo nanaša, nam selektorjev seveda ni potrebno pisati. V zgornjem primeru smo naslovu določili, da bo velikosti 12px in rdeče barve. Pozor: pravilo bo obveljalo samo za naš točno določen naslov, naslednjim elementom bo potrebno ponovno pisati svoja pravila.

Inline CSS napovedi se v praksi ne uporabljajo, saj rušijo enega načelnih pravil CSSja, ki pravi, da je potrebno ločiti vsebino od predstavitve. Ponavadi jih uporabljamo zgolj za testiranja posametnih deklaracij.

2. Vloženi CSS

V kolikor se pravkar učite CSSja bo “vložena” implementacija (napoved) CSS-a najbrž največkrat uporabljen način. Napoved je klasična, saj se zgodi v glavi HTML dokumenta, kamor dodamo vsa CSS pravila. V kolikor ste že kdaj delali z JavaScriptom boste postopek bržkone prepoznali:

Potrebujemo torej napoved preko style type=”text/css”stavka, naprej pa pišemo klasična CSS pravila. Le-ta se bodo nanašala na elemente znotraj tega dokumenta. V našem primeru bodo vsi h1 in h2 naslovi pobarvani rdeče, h3 naslovi pa se bodo prikazali v modri barvi.

3. Zunanji CSS

Zadnja in hkrati najbolj uporabna (in uporabljena) možnost je implementacija CSS-ja preko zunanje datoteke. Datoteka se mora končati na končnico .css, v njej pa enega za drugim pišemo CSS pravila. Do datoteke dostopamo preko kode v glavi HTML dokumenta:

V tem primeru bodo torej vsa pravila iz “cssdatoteka.css” obveljala za dokument v katerem to datoteko kličemo. Odgovorov na vprašanje, zakaj je ta način implementacije CSS-ja najboljši, je več. Naštel pa bom tri najbolj očitne:

• Ločena datoteka pomeni, da bomo do spremembe prišli z enim samim spreminjanjem pravil v .css datoteki. Vse HTML strani morajo le klicati to datoteko in pravila bodo obveljala tudi za njih.
• Hkrati to prinese dejstvo, da vašemu brskalniku ne bo vedno znova potrebno “nalagati” CSS pravil. Ko vaš brskalnik enkrat najde “.css” datoteko in jo kasneje druge datoteke na vaši strani kličejo, brskalnik uporabi že “potegnjeno” CSS datoteko.
• Na koncu je potrebno omeniti seveda preglednost in profesionalnost. Izgled strani je v vsakem primeru potrebno ločiti od vsebine.

Razložil sem vam tri metode implementacije CSS jezika v vašo spletno stran. Katero boste uporabili je vsekakor vaša osebna odločitev, vendar vam polagam na srce, da se kaj kmalu odločite za zunanjo implementacijo. V naslednjem koraku si bomo ogledali na kaj in kako točno lahko CSS vpliva.