CSS (Cascading Style Sheets)

ITKP1011 Web-julkaiseminen · korjattu ja laajennettu laitos

Seuraavassa tarkastellaan CSS-tyylikielen käyttöä. Tarkemmin aiheesta voi lukea MDN:n artikkeleista Styling basics ja CSS reference sekä kurssisivuston CSS-dokumentaatiosta.

1. Perusteet

Dokumentin rakenne määritellään HTML:n avulla ja ulkoasu CSS:n avulla. Jaosta seuraa useita etuja:

• Sisältö on hyvin tulkittavissa ja saatavissa näyttölaitteesta riippumatta.
• Sisältö on helposti muunnettavissa toiseen muotoon.
• HTML-dokumentin rakenne pysyy yksinkertaisena ja luettavana.
• Koko sivustolla on yhtenäinen ulkoasu.
• Ulkoasu päivitetään yhdestä paikasta. Yhden tiedoston muuttaminen muuttaa kaikki sivut kerralla.
• Sama dokumentti voidaan esittää eri tavoin eri tilanteissa: graafisessa selaimessa, puhelimessa, ruudunlukijalla tai tulostettuna.

Sivut on testattava useammalla kuin yhdellä selaimella. Sekä HTML- että CSS-koodi kannattaa lisäksi tarkistaa validaattorilla:

• W3C:n HTML-validaattori
• W3C:n CSS-validaattori, joka ottaa vastaan osoitteen, tiedoston tai suoraan liitetyn koodin
• Web Developer -laajennuksesta löytyvät molemmat valikon kohdasta Tools

2. Tyylitiedoston linkittäminen dokumenttiin

Tyylitiedosto (*.css) liitetään HTML-dokumenttiin link-elementillä head-elementin sisällä:

<link rel="stylesheet" href="tyylit.css" />

Attribuutti type="text/css" oli pakollinen vanhoissa dokumenttityypeissä. HTML5:ssä se on tarpeeton, ja sen voi jättää pois. Kirjoita rel-attribuutin arvo pienillä kirjaimilla.

Käytä tyylitiedostoon suhteellista osoitetta, jolloin sivusto toimii sellaisenaan myös omalla koneellasi:

<link rel="stylesheet" href="tyylit.css" />
<link rel="stylesheet" href="../tyylit.css" />
<link rel="stylesheet" href="/css/tyylit.css" />

Samaan dokumenttiin voi liittää useita tyylitiedostoja. Ne otetaan käyttöön siinä järjestyksessä, jossa ne on liitetty, joten myöhempi tiedosto voi ylikirjoittaa aiemman määrityksiä.

2.1 style-elementti

Tyylejä voi lisätä yhteen dokumenttiin style-elementillä:

<head>
  <title>Esimerkki</title>
  <style>
    h1 { color: blue; background-color: yellow; }
  </style>
</head>

style-elementin käyttöä ei voi suositella, koska se rajaa vaikutuksen yhteen dokumenttiin. Sama onnistuu yhtä helposti ulkoisella tyylitiedostolla, joka toimii koko sivustolla.

Älä käytä style-elementtiä tällä kurssilla.

2.2 style-attribuutti

Tyylejä voi lisätä yhteen elementtiin style-attribuutilla:

<h1 style="color: blue; background-color: yellow;">Otsikko</h1>

style-attribuutin käyttöä ei voi suositella, koska se rajaa vaikutuksen yhteen elementtiin ja sekoittaa ulkoasun takaisin rakenteen sekaan. Sama onnistuu ulkoisella tyylitiedostolla ja luokalla.

Älä käytä style-attribuuttia tällä kurssilla.

2.3 Tyylien liittäminen toisesta tyylitiedostosta

@import-säännöllä voi liittää omaan tyylitiedostoon toisen tyylitiedoston sisällön. Näin yhteiset tyylit voi pitää yhdessä tiedostossa ja sivukohtaiset lisäykset toisessa.

@import "yhteiset.css";
@import url("varit.css");

Sääntöjen on oltava tiedoston ensimmäisinä riveinä, ennen mitään tyylisääntöä. Ainoa asia, joka saa olla ennen niitä, on @charset-sääntö.

3. Kaskadi: mikä sääntö voittaa?

CSS:n nimessä oleva sana cascading tarkoittaa sitä, että samaan elementtiin voi osua useita sääntöjä ja niiden ristiriidat ratkaistaan tietyssä järjestyksessä. Ratkaisu tehdään kolmessa vaiheessa, ja seuraavaan siirrytään vasta jos edellinen ei ratkaissut asiaa.

3.1 Vaihe 1: lähde ja tärkeys

3.2 Vaihe 2: spesifisyys

Jos säännöt ovat samasta lähteestä, voittaa tarkempi eli spesifisempi valitsin. Spesifisyys lasketaan kolmena lukuna:

Vertailu tehdään vasemmalta oikealle: yksikin tunniste voittaa minkä tahansa määrän luokkia.

3.3 Vaihe 3: kirjoitusjärjestys

Jos lähde ja spesifisyys ovat samat, voittaa viimeisenä kirjoitettu sääntö. Tällä on käytännön merkitystä: yleiset säännöt kannattaa kirjoittaa tiedoston alkuun ja poikkeukset loppuun.

p { color: green; }
p { color: red; }    /* tämä voittaa, koska se on myöhemmin */

Sama koskee saman säännön sisällä olevia ominaisuuksia:

h2 {
  border: 0;                        /* poistaa ensin kaikki reunat */
  border-bottom: 1px solid black;   /* lisää sitten alareunaan viivan */
}

3.4 !important

Määrityksen perään voi lisätä !important, jolloin se nousee lähdejärjestyksessä ylemmälle tasolle ja voittaa tavalliset säännöt spesifisyydestä riippumatta.

p { color: red !important; }

4. Tyylien määrittäminen

Tyylisääntö koostuu valitsimesta ja aaltosulkeisiin kirjoitetuista ominaisuus–arvo-pareista. Jokainen pari päättyy puolipisteeseen.

valitsin {
  ominaisuus: arvo;
  ominaisuus: arvo;
}

Yksinkertaisin valitsin on elementin nimi. Silloin sääntö koskee kaikkia sen nimisiä elementtejä dokumentissa.

body {
  color: black;
  background-color: white;
}

Samat ominaisuudet voi antaa monelle elementille erottelemalla valitsimet pilkuilla:

h1, h2, h3, h4, h5, h6 {
  font-family: Verdana, Arial, sans-serif;
  color: navy;
}

4.1 Perintä

Osa ominaisuuksista periytyy äitielementiltä lapsielementeille. Kun kirjoitat

<h1><strong>CSS</strong> on iso juttu.</h1>

strong-elementti saa saman tekstin värin ja kirjasintyypin kuin h1, ellei sille ole erikseen määrätty omia arvoja.

Kaikki ominaisuudet eivät periydy. Nyrkkisääntö on, että tekstiin liittyvät ominaisuudet periytyvät ja laatikkoon liittyvät eivät.

Perinnän saa tarvittaessa pakotettua arvolla inherit, ja se katkaistaan antamalla elementille oma arvo.

5. Valitsimet

5.1 Elementtivalitsin

Elementin nimi valitsimena koskee kaikkia sen nimisiä elementtejä. Tämä on lähtökohta: muotoile ensin elementit, ja tee poikkeukset vasta sitten luokilla.

p { line-height: 1.6; }

5.2 Luokat (class) valitsimina

class-attribuutilla elementti määrätään käyttämään tiettyä tyyliä. Sama luokka voi olla usealla elementillä samassa dokumentissa.

<p>Normaalia tekstiä kappaleellinen.</p>
<p class="varoitus">Varoitus!</p>

Vastaavat tyylimääritykset:

p {
  color: green;
  text-align: center;
}

p.varoitus {
  color: red;
}

Valitsin p.varoitus osuu vain p-elementteihin, joilla on luokka varoitus. Jos haluat saman luokan toimivan minkä tahansa elementin kanssa, jätä elementin nimi pois:

.varoitus {
  color: red;
}

p.varoitus { color: blue; }
.varoitus  { color: red; }

Elementillä voi olla useita luokkia välilyönnillä eroteltuina:

<p class="varoitus korostettu">Tämä käyttää molempia luokkia.</p>

5.3 Tunnisteet (id) valitsimina

id-attribuutilla määrätään yksi elementti käyttämään tiettyä tyyliä. Tunnisteen arvo saa esiintyä dokumentissa vain kerran.

<p id="tiedote">Tärkeä tiedote.</p>

#tiedote {
  color: red;
}

5.4 Asiayhteyden mukaan määräytyvät tyylit

Kun valitsimet kirjoitetaan peräkkäin välilyönnillä eroteltuina, sääntö osuu vain niihin elementteihin, jotka ovat toisen sisällä. Näin samalle elementille voi antaa eri ulkoasun sen mukaan, missä se sijaitsee.

p strong {
  color: red;
}

Sääntö koskee vain p-elementin sisällä olevia strong-elementtejä. Muualla olevat strong-elementit säilyvät ennallaan.

5.5 Pseudoluokat

Pseudoluokka osuu elementtiin sen tilan perusteella: onko linkkiä jo käyty, onko hiiri sen päällä, onko kenttä valittuna. Pseudoluokka kirjoitetaan kaksoispisteellä valitsimen perään.

a:hover  { text-decoration: underline; }
a:focus  { outline: 2px solid orange; }
tr:nth-child(even) { background-color: #f2f2f2; }

6. Mittayksiköt

Pituudet kannattaa ilmaista suhteellisina, jolloin sivu skaalautuu käyttäjän asetusten ja näytön koon mukana.

html { font-size: 100%; }        /* kunnioittaa käyttäjän asetusta */
body { font-size: 1rem; line-height: 1.6; }
h1   { font-size: 2rem; }
h2   { font-size: 1.5rem; }
p    { max-width: 70ch; margin-bottom: 1em; }

7. Sivuilla käytettävät värit

Värin voi ilmaista usealla tavalla. Kaikki alla olevat tarkoittavat samaa punaista.

p {
  color: #222222;
  background-color: #ffffff;
}

Värien valintaan on apuvälineitä, esimerkiksi ColorZilla, jolla voi poimia värin miltä tahansa sivulta, sekä Coolors ja Adobe Color väripalettien rakentamiseen.

8. Kommentit

Kommentti alkaa merkinnällä /* ja päättyy merkintään */. Se voi olla yhden tai usean rivin mittainen.

strong {
  /* Korostamiseen käytettävä tyyli */
  background-color: white;
  color: red;
}

Huomaa, että CSS:ssä ei ole rivin loppuun ulottuvaa //-kommenttia, vaikka se on tuttu monista ohjelmointikielistä. Sellainen rivi jää tulkitsematta ja voi rikkoa sitä seuraavan säännön.

9. Laatikkomalli (box model)

CSS käsittelee jokaista elementtiä laatikkona, jolla on neljä kerrosta sisältä ulospäin:

div {
  padding: 1em;
  border: 1px solid black;
  margin: 2em;
}

div {
  width: 300px;
  padding: 20px;
  border: 1px solid black;
}

* {
  box-sizing: border-box;
}

9.1 Yhdistyvät marginaalit

Lohkojen ylä- ja alamarginaalit yhdistyvät silloin, kun niiden välissä ei ole mitään sisältöä. Yhdistämisessä käytetään suurempaa marginaalia, ei niiden summaa.

• Jos kahden peräkkäisen lohkon välissä ensimmäisen alamarginaali on 1 em ja seuraavan ylämarginaali 2 em, väliin jää 2 em eikä 3 em.
• Sama tapahtuu sisäkkäisillä lohkoilla, jos ulomman ja sisemmän välissä ei ole sisältöä eikä täytettä tai reunaa.
• Täysin tyhjän lohkon oma ylä- ja alamarginaali yhdistyvät keskenään.

Yhdistymisen estää se, että väliin tulee jotain: reuna, täyte tai sisältöä. Yksinkertaisin keino on antaa lohkolle padding tai min-height.

Tarkempi kuvaus: Mastering margin collapsing (MDN).

10. Taulukoiden ulkoasu

Taulukon ulkoasuun vaikuttavat erityisesti seuraavat ominaisuudet.

Taulukossa ei näy mitään rajoja, ellet aseta niitä th- ja td-elementeille. Pelkkä table-elementin reuna piirtää viivan vain koko taulukon ympärille.

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #999999;
  padding: 0.4em 0.7em;
  text-align: left;
}

caption {
  caption-side: top;
  text-align: left;
  font-style: italic;
}

11. Tavallisimmat ominaisuudet

Alla on tällä kurssilla tarvittavat ominaisuudet ryhmiteltynä. Jokaisen tarkka kuvaus löytyy MDN:n CSS-hakemistosta ja suomeksi kurssisivuston CSS-dokumentaatiosta.

11.1 Kirjasin

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}

11.2 Teksti

11.3 Väri ja tausta

11.4 Marginaali, täyte ja raja

margin: 1em;                /* kaikille sivuille */
margin: 1em 2em;            /* ylä ja ala 1em, vasen ja oikea 2em */
margin: 1em 2em 0.5em 2em;  /* ylä, oikea, ala, vasen */

12. Kehittäjätyökalut CSS-editorina

Selaimen kehittäjätyökaluilla voi kokeilla tyylimuutoksia suoraan sivulla ja nähdä tuloksen heti. Tämä on nopein tapa opetella CSS:ää ja etsiä vikoja.

1. Napsauta muutettavaa kohtaa hiiren oikealla painikkeella ja valitse Tutki tai Inspect. Työkalut avautuvat ja oikea elementti on valmiiksi valittuna. Työkalut saa auki myös F12-näppäimellä.
2. Oikeanpuoleisessa paneelissa näkyvät kaikki elementtiin osuvat säännöt vahvimmasta heikoimpaan. Jokaisen säännön perässä lukee, mistä tiedostosta ja miltä riviltä se tulee.
3. Yliviivattu määritys tarkoittaa, että jokin toinen sääntö on voittanut sen. Tämä on nopein tapa nähdä kaskadi käytännössä.
4. Voit muokata arvoja kaksoisnapsauttamalla, kytkeä yksittäisen määrityksen pois päältä valintaruudusta ja lisätä uusia napsauttamalla säännön sisällä.
5. Muutokset eivät tallennu tiedostoon ja katoavat, kun lataat sivun uudelleen. Kokeile ensin täällä ja kirjoita toimiva ratkaisu sen jälkeen tyylitiedostoon.

13. Tarkistuslista

1. Onko kaikki ulkoasu erillisessä tyylitiedostossa? Sivuilla ei saa olla style-elementtiä eikä style-attribuuttia.
2. Onko link-elementissä suhteellinen osoite ja rel="stylesheet", eikä turhaa type- tai title-attribuuttia?
3. Onko fonttikoot annettu rem-yksikössä eikä px-yksikössä?
4. Onko jokaisen taustavärin kanssa määritelty myös tekstin väri?
5. Onko tekstin ja taustan kontrasti vähintään 4,5:1?
6. Näkyykö kohdistus, kun liikut sivulla sarkainnäppäimellä?
7. Ovatko linkkien pseudoluokat järjestyksessä :link, :visited, :hover, :active?
8. Meneekö tyylitiedosto CSS-validaattorista läpi ilman virheitä?
9. Toimiiko sivu myös ilman tyylitiedostoa? Kokeile poistaa link-rivi hetkeksi: sisällön pitää olla yhä luettavissa ja oikeassa järjestyksessä.

14. Lisätietoa

• MDN: Styling basics, laaja oppimateriaali harjoituksineen.
• MDN: CSS reference, hakuteos yksittäisistä ominaisuuksista.
• MDN: Specificity.
• W3C:n CSS-validaattori.
• WebAIM: Contrast Checker.
• Kurssisivuston suomenkielinen CSS-dokumentaatio.