Perus CSS-valitsimet

Jotta voit käyttää tyylejä, sinun täytyy kertoa CSS:lle, mihin HTML-elementteihin tyylit kohdistetaan. Tämä tehdään selektoreilla. Tässä luvussa keskitytään kolmeen tärkeimpään selektoriin: tagiselektoriin, luokkaselektoriin ja id-selektoriin.

Tagiselektori

Tagiselektori kohdistaa kaikki tietyn HTML-tagin elementit.
Esimerkki HTML:

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

Esimerkki CSS:

p {
  color: purple;
  font-size: 36px;
  background-color: pink;
}

Tämä sääntö koskee jokaista sivun <p>-elementtiä.

Käytä tagiselektoria, kun haluat yhtenäisen tyylin kaikille kyseisen tyypin elementeille.

Luokkavalitsin

Luokkavalitsin kohdistaa elementteihin, joilla on sama luokan nimi.
HTML:

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

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

.text {
  color: red;
  font-size: 24px;
  background-color: wheat;
}

Vain elementit, joilla on class="text", saavat nämä tyylit.

Luokkavalitsimet ovat yleisimmin käytetty valitsintyyppi todellisissa projekteissa, koska ne mahdollistavat joustavan ja uudelleenkäytettävän tyylittelyn.

Useita luokkia

Elementillä voi olla useampi kuin yksi luokka.
HTML:

<p class="text font">We test multiple class names</p>

CSS:

.text {
  color: navy;
}

.font {
  font-size: 24px;
}

Jos elementillä on molemmat luokat, se saa tyylit kummastakin valitsimesta.

Tämä tekee luokkapohjaisesta tyylittelystä tehokasta.

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

ID-valitsin

ID-valitsin kohdistaa yhteen yksilölliseen elementtiin.

HTML:ssä lisätään elementille id-attribuutti:

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

CSS:ssä viitataan ID:hen risuaitamerkillä (#) määrittääkseen tyylit:

#title {
  font-weight: 500;
  font-size: 20px;
}

ID:n tulee olla yksilöllinen sivulla.

Vaikka ID:tä voidaan käyttää tyylittelyyn, luokkia suositaan yleensä johdonmukaisuuden ja uudelleenkäytettävyyden vuoksi.