WWW-ohjelmointi

Id ja luokka

Koska HTML-elementeille voidaan antaa ainutkertaisia nimiä id-attribuutilla ja useammin käytettäviä luokkamääreitä class-attribuutilla, niihin voidaan viitata CSS-säännöissä.

Säännöissä voi viitata elementtiin joko suoraan HTML-tagin nimellä, sen id-attribuutilla tai class-attribuutin arvolla taikka näiden yhdistelmillä.

Id-määre

id-attribuutilla nimettyihin elementteihin voi viitata valitsimella, jossa on “risuaitamerkki” # sekä id-attribuutin nimi:

#paaotsikko {color: red; border-bottom: 2px solid black;}
#kappale a {background-color: #faa;}
<h1 id="paaotsikko">Pääotsikko</h1>
<p id="kappale">Teksti, jossa <a href="http://petrit.net/www-ohjelmointi">linkki</a>.</p>
<p>Teksti, jossa <a href="http://petrit.net/www-ohjelmointi">linkki</a>.</p>

Pääotsikko

Teksti, jossa linkki.

Teksti, jossa linkki.

Luokkamääre

class-attribuutissa mainittuun luokkaan voi CSS-säännöissä viitata pisteellä . ja luokan nimellä.

.huomio {background-color: #ff0;}
p.kappale a {background-color: #faa;}
<p class="huomio">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec quis risus non velit imperdiet laoreet. Nulla molestie a ante id pharetra.
Morbi finibus sed elit tincidunt laoreet. Etiam elementum malesuada nisl ut sodales.</p>
<p class="jokumuu kappale">Teksti, jossa <a href="http://petrit.net/www-ohjelmointi">linkki</a>.</p>
<p>Teksti, jossa <a href="http://petrit.net/www-ohjelmointi">linkki</a>.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis risus non velit imperdiet laoreet. Nulla molestie a ante id pharetra. Morbi finibus sed elit tincidunt laoreet. Etiam elementum malesuada nisl ut sodales.

Teksti, jossa linkki.

Teksti, jossa linkki.