\(\renewcommand{\vec}[1]{\mathbf{#1}} \DeclareMathOperator*{\sijoitus}{\Big/} \newcommand{\eval}[2]{\sijoitus_{\kern-0.7em#1}^{\kern0.7em#2}\!} \)

5.1.2.5 Class, id ja Css

Html-elementeillä voi olla useita erilaisia määritteitä, joista id ja class ovat erityisen tärkeitä, koska niillä säädetään tyyliohjeen vaikutusaluetta.

id

Kun elementtiin halutaan viitata sen ulkopuolelta, pitää elementissä (alkutagin sisällä) olla jokin tunniste (elementin "nimi"), jonka perusteella elementti löytyy. Jos halutaan viitata täsmälleen yhteen elementtiin, käytetään id-määritettä. Pidä huolta siitä, että kaikki id-arvot yhdellä sivulla ovat keskenään erilaisia. Muuten voi tulla sekaannuksia.

Esimerkiksi sivulle voidaan lisätä div-elementti seuraavasti:
<div id="outoruutu">Sisaltöä</div>
Nyt elementillä on id-arvo "outoruutu" ja tähän elementtiin (kun muilla ei ole samaa id-arvoa) voidaan kohdistaa tyyliohje. Tämä onnistuu lisäämällä CSS-tyyliohjeeseen risuaita, id:n arvo ja haluttu ohje seuraavaan tapaan:
#outoruutu { color: red; font-size: 200%; }

class

Määrite "class" määrittää luokan, johon elementti kuuluu. Tätä käytetään usein silloin, kun halutaan jonkin CSS-tyyliohjeen koskevan kaikkia kyseiseen luokkaan kuuluvia elementtiä. Tällöin tyyliohje aloitetaan pisteellä, jota seuraa heti luokan nimi ja sitten normaalisti aaltosulkeet jne.

Esimerkiksi nettisivulla voi olla seuraava div-elementti:

<div class="korostus">Sisaltöä</div>
Yllä oleva div-elementti kuuluu nyt luokkaan "korostus", jonka ulkonäön määrittelee CSS-tyyliohjeessa seuraava rivi:
.korostus { font-style: italic; font-weight: bold; color: red; }