Jotta tyylejä voidaan käyttää tehokkaasti, on ymmärrettävä CSS-valitsimet, jotka määrittävät, mihin HTML-elementteihin tyylit kohdistetaan. Tarkastellaan tärkeimpiä valitsintyyppejä.

Tunnistevalitsin

Yksi tapa käyttää tyylejä on hyödyntää elementin tunnistetta (tagia). Tunnistevalitsimella määritellyt tyylit vaikuttavat kaikkiin kyseisen tunnisteen elementteihin. Tämä on hyödyllistä, kun halutaan yhtenäinen tyyli koko verkkosivustolle.

Syntaksi: HTML:ssä on p-elementti:

<p>It was all in my head.</p>

Tyylien lisäämiseksi CSS-tiedostoon käytetään tunnisteen nimeä (p) valitsimena:

p {
  property: value;
}

Käynnistetään seuraava esimerkki ja tarkistetaan, miten se toimii.

Luokkavalitsin

Tarkempi tapa tyylitellä elementtejä on käyttää luokkavalitsimia. Näillä valitsimilla kohdistetaan tyylejä tietyn luokan omaaviin elementteihin, mikä mahdollistaa valikoivan tyylittelyn.

Syntaksi: HTML:ssä lisätään class-attribuutti kuvaavalla luokkanimellä:

<p class="text">This song is another hit.</p>

CSS:ssä viitataan luokkanimeen pisteellä (.) määriteltäessä tyylejä:

.text {
  property: value;
}

Tarkastellaan seuraavaa esimerkkiä ja huomataan, että vain elementit, joilla on text-luokka, saavat nämä tyylit, mikä antaa tarkemman hallinnan tyylittelyyn.

Kaikki elementit, joilla on class="text" -attribuutti, tyylitellään punaisella tekstillä, 24px fonttikoolla ja vehnänvärisellä taustalla. Luokkanimi text on määritelty tiedostossa index.css käyttäen .-etuliitettä.

Luokkien yhdistäminen

Voimme myös yhdistää useita luokkia yhteen elementtiin, mikä tekee luokkien yhdistämisestä tehokkaan työkalun tyylien soveltamiseen – erota luokkien nimet välilyönneillä class-attribuutissa.

Syntaksi: Lisää HTML:ssä useita luokkien nimiä elementtiin:

<p class="text font">A robot created chemicals.</p>

Määrittele CSS:ssä tyylit jokaiselle luokalle erikseen:

.text {
  property: value;
}

.font {
  property: value;
}

Käynnistetään seuraava esimerkki ja tarkastellaan, miten se toimii. Elementit, joilla on sekä text että font -luokat, saavat määritellyt tyylit.

<p>-elementti, jolla on sekä text että font -luokat, saa tyylit molemmista valitsimista. text-luokka asettaa värin navyksi ja font-luokka asettaa fonttikoon 24px.

Id-valitsin

Vaikka id-valitsinta voidaan käyttää tyylien määrittelyyn, sitä ei yleensä suositella. Id-arvojen tulee olla yksilöllisiä sivulla, mikä rajoittaa niiden uudelleenkäyttöä.

Syntaksi: Lisää HTML:ään elementille id-attribuutti:

<p id="title">Choose from different themes.</p>

CSS:ssä viitataan id-arvoon risuaitamerkillä (#) määriteltäessä tyylejä:

#title {
  property: value;
}

Tarkastellaan seuraavaa esimerkkiä ja havainnoidaan sen toimintaa. Tässä esimerkissä tyylit kohdistuvat ainutlaatuiseen elementtiin, jolla on title-id.

id="title"-attribuutti yksilöi <p>-elementin, ja #title-valitsimella määritellyt tyylit koskevat vain tätä tiettyä elementtiä.