Luokka eli class ja ID

Edellisessä osassa opimme muotoilemaan tekstiä. Ja ottaa säännöt käyttöön esim kappaleessa. Mutta mitä jos haluaisimme tehdä yhden kappaleen, jossa on erilainen ulkoasu kuin sen alla olevassa kappaleessa? Ratkaisuja on parikin, mutta aloitetaan luokalla. Luokan eli classin hyvä puoli on, että useampi elementti voi jakaa saman luokan.

Tehdään ensin tyyli esimerkkimme ekaa kappaletta varten. Luokan nimi alkaa aina pisteellä, mutta itse nimi voi olla mitä vain.

.eka {
color: red;
}

Sitten tyylitellään sen alle tuleva kappale:

.toka {
color: blue;
}

Lopuksi tarvitaan itse kappaleet ja niihin tieto käytetystä luokasta, se ilmoitetaan näin:

<p class = "eka">Tässä on jutun eka kappale, joka tulee punaisella</p>
<p class = "toka">Tässä on jutun toka kappale, joka tulee sinisellä</p>

Voit asettaa tämän luokan vielä vaikka otsikollekin: <h class="toka">Otsikonkin voi tyylitellä luokalla!</h1>

Jos haluat tyylitellä jonkin elementin ja olet tietoinen, ettet voi käyttää sille annettavaa tunnistetta eli ID:tä kuin yhden kerran kullakin sivulla, voit käyttää sitä.

Tee tyyli. ID:n täytyy alkaa aina risuaita-merkillä.

#esimerkki {
font-face: arial;
font-size: 80%;
}

Lisää id-valitsin haluamaasi elementtiin: <p id=”esimerkki”> jolloin se tyylitellään kuten olet säännössä määritellyt.

Voit myös kohdistaa asioita suoraan elementteihin joiden tiedät olevan/tulevan tietyn id:n sisään. Ensin CSS missä luodaan säiliö, jonka tausta harmaa ja vähän fyllinkiä (padding) reunuksen sisäpuolella. Kaikki id:hen nimeltä ”alaosa” tulevat otsikot ovat keltaisia ja kaikki kappaleet punaisia ja lihavoituja:

#Alaosa {
background-color: #ccc;
padding: 1em
}
#Alaosa h1 {
color: #ff0;
}
#Alaosa p {
color: red;
font-weight: bold;
}

Ja HTML-osuus:

<div id="Alaosa">
<h1>Chihuahua</h1>
<p>Chihuahua on maailman pienin koirarotu</p>
<p>Ja paras!</p>
</div>

Voit myös tehdä yhdistelmiä, missä tietyt säännöt kohdistuvat vain elementteihin, joilla on tietty luokka. Kirjoitetaan ensin CSS:

p.kotipaikka {
background: yellow;
}

Ja HTML näyttää tältä:
<p>Mun nimi on Nappi.</p>
<p class="kotipaikka">Asun Hämeenlinnassa.</p>

<p>Mun nimi on Ellu</p>
<p class="kotipaikka">Asun Helsingissä.</p>

Jos useammalla tagilla on sama tyyli, voit niputtaa ne näin:

h1, h2, h3 {
text-align: center;
color: red;
}

Samoin jos tiedät, että esim jokaista h1 otsikkoa seuraavan kappaleen tulee olla erilainen kuin muiden kappaleiden, voit kohdistaa tyylin juuri niihin ekoihin kappaleisiin käyttämällä plussaa elementtien välillä h1+p kun kirjoitat tyylisääntöä.

Kokeile myös kätevää uutta CSS3 ominaisuutta, missä voit asettaa tyylin mille tahansa elementille, jolla on tietty attribuuttiarvo. Esim input, sillä on monta muotoa, joita type-attribuutti säätelee. Jos asetat tyylin vain inputille, ottavat tekstikentät, valintaruudut ja napit sen käyttöön, mutta voit olla myös tarkempi ja kohdistaa tyylin vain esim txtikenttiin:

input[type="text"] {
background-color: pink;
}

Eikä tässä kaikki, voit käyttää samassa elementissä yhtä aikaa kahta luokkaa!

.punainen {
background: red;
}

.teksti {
font-family: arial;
}

Ja HTML

<p class=”punainen”>Tässä punataustaista tekstiä normi fontilla</p>
<p class=”teksti”>Tässä Arial fontilla kirjoitettua tekstiä</p>
<p class=”punainen teksti”>Tässä punataustaista tekstiä Arial fontilla kirjoitettuna.</p>