Kasutamine

Järgnevalt kirjeldame ära kolm võimalust, kuidas stiilireegleid HTML elementidele rakendada.

CSS käsud elemendi sees (inline css)

Soovides kujundada vaid konkreetset HTML elementi, tuleb selle elemendi sees määrata atribuudiga style soovitud kujundus:

<p style="color: blue">See on sinist värvi tekst</p>

Nagu näha, koosneb stiilikirjeldus kahest kooloniga eraldatud osast (vaatleme ainult style parameetri järel jutumärkide sees olevat teksti, muu HTML kood meid hetkel ei huvita). Esimene osa näitab, mida me antud elemendi juures kujundada soovime. Konkreetsel juhul tähistab sõna color teksti värvi. Seda kirjelduse esimest osa nimetatakse atribuudiks. Antud juhul on siis tegemist CSS-i atribuudiga color. Kooloni järel on täpsustus, milline välimus antud atribuudi abil HTML elemendile antakse. Seega tähistab sõna blue, et antud CSS-i atribuut color peab muutma HTML elemendi <p> sees oleva teksti siniseks.

Ühes CSS-i kirjelduses võib sisalduda ka mitu erinevat atribuuti ja tema väärtust. Näiteks muudetakse järgmise käsuga lõigu tekst siniseks ja pannakse ka poolpaksu kirja:

<p style="color: blue; font-weight: bold">See on sinist värvi poolpaks kiri</p>

Atribuutide ja nende kirjelduste vahele pannakse semikoolon. Viimase väärtuse järel semikoolonit kirjutada ei ole vaja. Praeguses näites on samuti bold ilma lõpus oleva semikoolonita, kuna talle rohkem CSS-i kirjeldusi ei järgne.

Säärast HTML-elementide kujundamist on hea ja lihtne kasutada, kuid mugavuses võitu saadud tegelikult ei ole. Juhul, kui soovime kõik dokumendis olevad sinised lõigud punaseks teha, tuleb siiski iga lõigu juures olevat CSS-i kirjeldust muuta. Palju otstarbekam oleks määrata näiteks, et kõik dokumendis olevad lõigud on sinised. Selline kirjeldus tuleks lisada vaid dokumendis ühte kohta ning rakenduks kõikidele HTML dokumendi lõikudele. Järgnevad võimalused seda pakuvadki.

CSS dokumendi päises

Veebidokumendi <head>-osasse tuleb lisada style-käskude vahele antud dokumendi piires kehtivad stiilikirjeldused:

...
<head>
	...
	<style>
		p {color: blue; font-weight: bold}
	</style>
</head>
<body>
	<p>See on sinist värvi poolpaksu kirjaga lõik</p>
	<p>Ka see on sinist värvi poolpaksu kirjaga lõik</p>
</body>
...

Dokumendi päises asuval CSS-koodil on mõningad erinevused varemkirjeldatuga:

Eraldi failis asuv CSS

Ka dokumendi päises asuv stiilikirjeldus ei ole ideaalne: teda rakendatakse vaid konkreetse HTML faili ulatuses. Samas on aga sageli vaja ühte ja sama kujundust kasutada mitme erineva HTML dokumendi näitamisel. Näiteks oleks mõistlik ühe veebisaidi ulatuses kõikides HTML failides olevate lõikude tekstid siniseks värvida.

Selleks koondatakse stiilikirjeldused kokku ühte faili, mis lisatakse kõikidele HTML dokumentidele.

Olgu järgnev stiilikirjeldus salvestatud eraldi faili stiilid.css

p {color: blue; font-weight: bold}

Sellisel juhul tuleb veebidokumenti dok1.html lisada:

...
<head>
	...
	<link rel="stylesheet" type="text/css" href="stiilid.css" />
</head>
<body>
	<p>See lõik on sinist värvi ja poolpaksu kirjaga. Kujundus asub failis nimega stiilid.css</p>
</body>
...

HTML failile lisatakse stiilikirjeldus <link>-käsuga, käsus olev parameeter href näitab, millise nimega see fail on ja kus ta asuma peab.