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>
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>