Jotta voit käyttää tyylejä tehokkaasti, sinun tulee ymmärtää CSS-valitsimet, jotka määrittävät, mihin HTML-elementteihin tyylit kohdistetaan. Tarkastellaan tärkeimpiä valitsintyyppejä.

Tunnistevalitsin

Tunnistevalitsin kohdistaa kaikki tietyn tunnisteen elementit, jolloin sivulle saadaan yhtenäinen tyyli.

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

Suoritetaan seuraava esimerkki ja tarkastellaan, miten se toimii.

Luokkavalitsin

Luokkavalitsimet kohdistavat elementteihin, joilla on sama luokan nimi, mahdollistaen tarkemman hallinnan.

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

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

CSS:ssä viitataan luokan nimeen 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ä mahdollistaa yksityiskohtaisemman muotoilun hallinnan.

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

Luokkien yhdistäminen

Voit liittää useita luokkia yhteen elementtiin joustavaa tyylittelyä varten.

Syntaksi: Lisää HTML:ssä useita luokkanimiä 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äydään seuraava esimerkki läpi ja katsotaan, 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 selektoreista. text-luokka asettaa värin laivastonsiniseksi ja font-luokka asettaa fonttikoon 24px.

Id-valitsin

Id-valitsimet kohdistavat yksittäiseen, ainutlaatuiseen elementtiin. Koska id-arvojen tulee olla yksilöllisiä, tätä menetelmää käytetään harvoin tyylittelyyn.

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.

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