Tyylilomakkeet

Tyylilomakkeiden (engl. Cascading Style Sheets, CSS) avulla voidaan helposti määritellä XHTML-dokumenttien ulkoasu. Tyylilomakkeiden avulla saadaan dokumentin rakenne pidettyä kokonaan irrallaan dokumentin ulkoasusta. Seuraavissa luvuissa tarkastellaan tyylilomakkeita ja niiden käyttöä ensisijaisesti W3C:n Cascading Style Sheets, level 1 -suosituksen pohjalta.

Tyylien hyödyt

Yleisesti voidaan todeta tyylien käytöstä aiheutuvien hyötyjen olevan huomattavasti suurempia kuin tyylien mukana tulevien haittojen. XHTML-dokumenteissa ensimmäiseen tyylien hyötyyn törmää jo dokumenttien tekovaiheessa. Tyylilomakkeita käyttämällä sivuston tekijän ei tarvitse juurikaan kiiinnittää huomiota sivujen ulkoasuun, vaan hän voi keskittyä kokonaan dokumenttien sisällön hiomiseen.

Suurilla organisaatioilla voi olla tiukat määräykset sivustonsa ulkoasusta, jolloin WWW-sivustolla on oma ylläpitäjä. Ulkoasun yhtenäisyys ja helppo muokattavuus on yksi huomattava etu tyylitiedostojen käytössä. Esimerkiksi yrityksillä tai organisaatioilla voi olla useita kymmeniä tai satoja WWW-sivuja, joiden on oltava yrityksen "näköisiä" pelkästään yrityksen imagon vuoksi. Esimerkiksi yrityksen tunnusvärien muuttuessa WWW-sivujen ulkonäkö täytyy luultavasti muuttaa toisenlaiseksi. Jos jokaista yrityksen WWW-sivuilla olevaa dokumenttia joudutaan muokkaamaan erikseen voi hommaan mennä jopa viikkoja. Tietenkin muutokset voidaan tehdä erillisellä ohjelmalla, mutta ohjelman rakentaminen ja sen tekemien virheiden korjaaminen varmasti kestää jonkin aikaa. Tyylien avulla värien muuttamiseen menee aikaa vain muutamia minuutteja. Toki sivuille tehtävät muutokset voivat olla huomattavasti suurempia kuin pelkän värin muuttaminen toiseksi.

Tyylilomakkeiden ainoana haittapuolena voidaan pitää selainten vaihtelevaa tukea tyyleille. Tyylien toimivuus vaihtelee selaimittain hyvin runsaasti selainten eri versioiden välillä, joten tyylilomakkeita käyttävät sivut on suunniteltava toimimaan myös ilman tyylejä. Jacob Nielsenin tekemän tutkimuksen perusteella ihmiset eivät kovin helposti asenna koneelleen uusinta selainta, jos vanha selain toimii heidän mielestään riittävän hyvin. Tämän vuoksi selainten ja niiden eri versioiden kirjo on hyvin laaja. Sivuston sisältö pitäisi olla saatavilla myös ilman tyylilomakkeiden käyttämistä, koska tyylilomakkeiden on tarkoitus kuvata vain ulkoasua. Tyylilomakkeita sisältävät sivut kannattaa suunnitella ja testata huolellisesti myös ilman tyylilomakkeita. Erilaisten lisäominaisuuksien käyttö ei saa häiritä käyttäjiä, jotka eivät pysty syystä tai toisesta käyttämään lisäominaisuuksia hyväkseen. Jotkut ihmiset eivät edes pysty käyttämään selaimia jotka tukevat tyylejä. Tällöin oleelliseksi tuleekin dokumentin hyvin määritelty rakenne, joka edesauttaa sivun toimimista kaikilla selaimilla. Yksinkertaisin esimerkki selaajasta, joka ei näe tyylejä on, google-hakupalvelun robotti, joka selaa läpi sivuja ja tallentaa niiden sisältöä tietokantaansa. Toinen esimerkki voisi olla näkövammainen henkilö.

Monimutkaisia tyylilomakkeita kirjoitettaessa sivusto kannattaa testata tärkeimmillä selaimilla. Paras CSS-tuki löytyy Mozillasta ja Operasta. Eniten käytetty Internet Explorer selain tulkitsee tyylejä monesti hieman väärin joten pelkästään sillä testaamiseen ei kannata luottaa.

Tyylilomakkeiden käyttämisessä kannattaa aina muistaa, että dokumentin tekijän määrittelemä tyylilomake on vain suositus käytettävästä ulkoasusta. Dokumentin lukija voi aina oman selaimensa asetuksilla ohittaa dokumenttiin liitetyn tyylilomakkeen määrityksiä, koska hän itse tietää parhaiten omat tarpeensa. Sivunsa tyylit kannattaakin suunnitella niin, että ne mukautuvat mahdollisimman hyvin käyttäjän selaimen asetuksiin. Ei siis kannata pakottaa tekstiä tietyn kokoiseksi vaan ennemmin ehdottaa, että käytetään käyttäjän selaimen tekstin oletuskokoa. Ei myöskään kannata pakottaa sivua tietyn levyiseksi koska pakotettu leveys on aina jollekin liian leveä tai kapea. Tyylimäärityksistään kannattaa tehdä mahdollisimman mukautuvia. WWW-sivujen ulkoasun suunnittelu eroaa hyvin suuresti perinteisestä paperiesitteiden tms. tulosteiden suunnittelusta. Paperi on aina tietyn kokoinen mutta WWW-sivun fyysistä kokoa ei voida tietää koska se vaihtelee käytettyjen ohjelmien ja ympäristöjen mukaan.

WWW:n selaamiseen käytettyjen päätelaitteiden ja ohjelmien kirjo kasvaa koko ajan. Tätä varten CSS2-suosituksessa otetaan erityisesti huomioon erilaisten päätelaitteiden ominaisuuksia. CSS2:n avulla on mahdollista määritellä oma ulkoasunsa esim. televisiota käyttävälle lukijalle, kännykän käyttäjälle, tekstiselaimen käyttäjälle tai ääniselaimen käyttäjälle. Kullakin laitteella on omat rajoituksensa kuten epätarkka näyttö, erittäin pieni näyttö, ei ollenkaan grafiikkaa jne. Nämä voidaan erikseen huomioida erilaisilla tyylilomakkeilla. Esim. sivu näytetäänkin erilaisella ja suuremmalla kirjasimella jos sitä katsellaan piirtoheittimellä. Ei tarvitakaan enää erillistä Powerpoint-esitystä. Kännykkäkäyttäjän näytöstä jätetään pois tilaa vievää grafiikkaa. Ääniselaimen käyttäjälle määritellään oma lukuääni otsikoille, linkeille ja leipätekstille.

Seuraavassa lyhyt esimerkki tyylilomakkeen oikeaoppisesta käyttämisestä XHTML-dokumentin ulkoasun määrittelemiseksi. Seuraavassa kuvassa ( Kuva 1) on yksinkertainen XHTML-dokumentti, jonka ulkoasu on määritelty ulkoisen tyylilomakkeen avulla.

Seuraavassa kuvassa ( Kuva 2) on edellä esitetyn kuvan (Kuva 1) XHTML-dokumentti, josta tyylilomake on poistettu käytöstä. Sivun ulkoasu ei enää korosta kahtiajakoa, mutta sivu on kuitenkin toimiva ja sivuilla oleva informaatio on luettavissa kokonaisuudessaan. Esimerkiksi merkkipohjaisilla selaimilla sivu näkyisi miltei kuvassa esityn kaltaisena.

Tyylien määrittäminen

Tyylimääritykset voidaan liittää XHTML-dokumenttiin kolmella eri tavalla, mutta tyylien ominaisuuksien määrittäminen tapahtuu tavasta riippumatta täsmälleen samalla tavoin. Tyylien määrittämisen perusidea on muuttaa olemassaolevien XHTML-elementtien ominaisuuksia. Tyyli on nimetty XHTML-dokumentissa esiintyvien XHTML-elementtien mukaisesti ja tyyliin tehtävät muutokset vaikuttavat kyseisen XHTML-elementin sisällön (esimerkiksi tekstin) ulkoasuun. Normaalisti XHTML-elementit näytetään selaimen oletusmääritysten mukaisesti. Antamalla tyyleille ominaisuuksia voidaan selaimen oletusmääritykset kumota ja näyttää dokumentti tyylien määrämällä tavalla. Esimerkiksi tyyliin h1 tehtävät muutokset vaikuttavat kaikkiin dokumentin h1-elementteihin eli dokumentin korkeimman otsikkotason-elementtiin.

Seuraavassa esimerkissä havainnollistetaan tyylin ominaisuuksien asettamista kolmelle tyylille. h1-, p- ja strong-tyylillä on olemassa oletusmuotoilut, joita muutetaan seuraavan esimerkin määrittelyillä. Elementin ominaisuudet, joita tyylimäärittelyssä ei muuteta, säilyvät ennallaan. Esimerkissä olevat h1-tyylin määrittelyt muuttavat h1-elementin sisällä olevan tekstin keltaiseksi harmaalla pohjalla sekä tekstin keskitetyksi, mutta esimerkiksi tekstin kokoa ei muuteta. p-tyylin määrittelyt muuttavat p-elementin sisällä olevan tekstin vihreäksi valkealla pohjalla sekä tekstin tasauksen molempiin reunoihin. strong-elementin sisällä oleva teksti muutetaan ainoastaan lihavoiduksi.

h1 {
color: yellow;
background-color: gray;
text-align: center;
}
p {
color: green;
background-color: white;
text-align: justify;
}
strong {
font-weight: bold;
}

Tyylin määrittely alkaa tyylin nimellä eli sen XHTML-elementin nimellä, johon tyylimäärittelyt vaikuttavat. Edellisessä esimerkissä tyylin nimeksi on annettu h1, p ja strong. Välittömästi tyylin nimen jälkeen tulee osa, jossa kerrotaan tyylin ominaisuudet. Kaikki tyylin ominaisuudet kerätään lohkoon kaarisulkeiden ({ ja }) väliin. Tyylin ominaisuuden nimi ja siihen liittyvä arvo täytyy antaa kaksoispisteellä ( :) toisistaan erotettuna muodossa ominaisuus: arvo;. Puolipisteellä (;) erotetaan saman lohkon sisällä olevat ominaisuuksien määrittelyt toisistaan. Ominaisuuden määrittelyjä voidaan sijoittaa useampia samalle riville. Puolipisteen lisääminen on erityisen tärkeää, jos samassa lohkossa määritellään useampia ominaisuuksia. h1-tyylin ominaisuuksien nimet ovat edellisessä esimerkissä color, background-color ja text-align ja ominaisuuksille asetettavat arvot ovat yellow, gray ja center.

Seuraavassa kuvassa on käytetty edellisen esimerkin tyylinmäärittelyjä XHTML-dokumentissa.

Seuraavassa esimerkissä on nähtävillä edellisessä esimerkkikuvassa olleen (Kuva 3) XHTML-dokumentin sisältö. Seuraavien lukujen CSS-esimerkeissä tullaan käyttämään pohjana seuraavaa XHTML-dokumenttia, jollei toisin mainita.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<link rel="StyleSheet" href="tyyliton.css" type="text/css" />
<title>CSS-esimerkeissä tarvittava
tiedosto</title>
</head>
<body>
<h1>Ensimmäisen tason otsikko</h1>
<p>
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
</p>
<p>
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
</p>
<p>
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
</p>
</body>
</html>

Käytettävissä olevat ominaisuudet on määritelty CSS1- ja CSS2-suosituksissa sekä tulevassa CSS3-suosituksessa. Ominaisuuksiin kelpaavat arvot on myös rajattu näissä suosituksissa. Eri ominaisuuksista kerrotaan tarkemmin myöhemmissä luvuissa.

Tyylien liittäminen XHTML-dokumenttiin

Tyylien liittäminen XHTML-dokumenttiin onnistuu kolmella eri tavalla. Tässä dokumentissa käsitellään kuitenkin vain kaikista kätevintä ja järkevintä tapaa eli ulkoisia tyylitiedostoja.

Ylivoimaisesti käyttökelpoisimmassa tyylilomakkeen käyttötavassa dokumenttiin määritellään ulkoinen tyylitiedosto. Ulkoiseen tyylitiedostoon kootaan kaikki dokumenttia koskevat tyylin määritykset. Yksi ulkoinen tyylitiedosto voi toimia useammankin XHTML-dokumentin tyylien pohjana. Tyylitiedostoa muutettaessa muuttuu kaikkien niiden XHTML-dokumenttien ulkoasu, jotka käytävät tiedostossa olevia tyylejä. Yhtä tiedostoa muuttamalla voidaan siis muuttaa kokonaisten sivustojen ulkonäköä.

Tyylitiedosto ja dokumentti täytyy yhdistää toisiinsa jollakin tavoin. Tyylitiedosto linkitetään link-elementillä jokaiseen XHTML-dokumenttiin, jossa tyylitiedostoa halutaan käyttää. link-elementin attribuuttien arvoilla selaimelle kerrotaan tyylitiedosto, jota XHTML-dokumenttissa halutaan käyttää. link-elementti sijoitetaan XHTML-dokumentissa head-elementin sisään.

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

• href-attribuutin arvolla ilmaistaan tyylitiedoston nimi ja sen sijainti
• rel-attribuutilla ilmaistaan dokumentin suhde, joka tässä tapauksessa tarkoittaa, että kyseessä on tyylitiedosto ( stylesheet)
• type-attribuutilla ilmoitetaan tiedoston ns. MIME-tyyppi, joka CSS-tiedostoilla on text/css

Attribuuteista ja niiden arvoista kerrotaan enemmän XHTML-elementtien yhteydessä.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<link href="tyylit.css" rel="stylesheet" type="text/css" />
<title>Dokumentin otsikko</title>
</head>
<body>
<h1>Ensimmäisen tason otsikko</h1>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-
elementin sisään. Kappaleessa olevat korostukset on
toteutettu
<strong>strong</strong>-elementillä.</p>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-
elementin sisään. Kappaleessa olevat korostukset on
toteutettu
<strong>strong</strong>-elementillä.</p>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-
elementin sisään. Kappaleessa olevat korostukset on
toteutettu
<strong>strong</strong>-elementillä.</p>
</body>
</html>

Seuraavassa on esimerkki ulkoisen tyylitiedoston tyylit.css sisällöstä. Tyylitiedosto sisältää body-tyylin ja p-tyylin määrittelyt. Tyylien avulla body-elementissä määritellään tekstin väriksi musta ja taustaväriksi valkea sekä tekstin tasaus keskitetyksi. p-elementin tekstin väri määritellään keltaiseksi ja taustaväri harmaaksi sekä tekstin tasaus keskitetyksi.

body {
  color: black;
  background-color: white;
  text-align: center;
}
p {
  color: yellow;
  background-color: gray;
  text-align: center;
}

Seuraavassa kuvassa käytetään edellisen esimerkin mukaisia tyylimäärityksiä XHTML-dokumentissa.

Tyylien vaikutusalue

Tyylitiedostoa määriteltäessä on tiedettävä myös hieman XHTML-elementtien vaikutusalueesta, koska tyylien kaikkia ominaisuuksia ei voi antaa kaikille elementeille. XHTML-elementtien vaikutusalue käydään tarkemmin läpi XHTML-elementtien yhteydessä, joten seuraavassa asiaa tarkastellaan hyvin lyhyesti.

Lohkotason (engl. block-level) tai kappaletason -elementiksi kutsutaan elementtiä, joka voi muodostaa itsenäisen lohkon tai kappaleen. Lohkotason elementit voivat sijaita XHTML-dokumentissa itsenäisinä, joten niiden ei tarvitse olla toisten lohkotason elementtien sisällä. Luonnollisesti kaikki lohkotason elementit sijaitsevat body-elementin sisällä. Tyypillinen esimerkki lohkotason elementistä on p-elementti, joka muodostaa oman tekstikappaleen.

Tekstitason (engl. inline-level) -elementiksi kutsutaan elementtiä, joka voi sijaita ainoastaan lohkotason elementin sisällä. Tässä dokumentissa käytettävä nimitys tekstitason-elementti ei ole suora suomennos vastaavasta englanninkielisestä termistä. Tekstitason elementti havainnollistaa kirjoittajan mielestä hyvin elementin riippuvuutta kappaletason eli lohkotason elementistä. Tyypillinen esimerkki tekstitason elementistä on strong-elementti, jonka täytyy sijaita jonkin lohkotason elementin sisällä XHTML-dokumentissa.

Korvattaviksi (engl. replaced)-elementiksi kutsutaan elementtiä, jolla merkitään XHTML-dokumenttiin esimerkiksi kuvan paikka. Tyypillinen esimerkki korvattavaksi tarkoitetusta elementistä on img-elementti, jonka paikalla selain näyttää elementin src-attribuutissa määritellyn kuvan. Yleensä korvattavien elementtien pitää sijaita lohkotason elementin sisällä.

Ryhmittely

Tyylejä, niiden ominaisuuksia ja arvoja voidaan ryhmitellä hieman erilaisilla tavoilla. Seuraavassa on lyhyesti esitettynä erilaiset ryhmittelymahdollisuudet.

Tyylejä, joissa on samoja ominaisuuksia ja arvoja, voidaan ryhmitellä yhteen. Esimerkiksi otsikkotasoisten tyylien kirjasimen värin määritteleminen onnistuu kootusti seuraavan esimerkin mukaisesti. Esimerkissä tyyleille h1, h2 ja h3 halutaan antaa kirjaisimen väriksi keltainen. Tällöin tyylien nimet erotetaan toisistaan pilkulla ja niille tehdään yhteinen lohko, jonka sisällä tyylien yhteiset ominaisuudet ilmoitetaan.

h1, h2, h3 {
color: yellow;
background-color: black;
}

Määriteltäessä useiden ominaisuuksien arvoja erotetaan ominaisuudet toisistaan puolipisteellä (;). Seuraavassa esimerkissä h1-tyylille on määritelty kaksi ominaisuutta font-weight ja font-family.

h1 {
font-weight: bold;
font-family: helvetica, sans-serif;
}

Tyylien ominaisuuksien periytyminen

Tyylin ominaisuudet voivat periytyä toiselle tyylille. Ominaisuuden periytyminen tapahtuu elementtien vaikutusalueiden mukaan. Periytymisen yhteydessä puhutaan usein vanhempi- ja lapsi-elementistä tai ylemmän ja alemman tason elementistä. Vanhempi-elementillä eli ylemmän tason elementillä tarkoitetaan rakenteellisesti ulompana olevaa XHTML-elementtiä, jonka sisällä on lapsi eli alemman tason -elementti. Tyypillinen esimerkki vanhempi-elementistä eli ylemmän tason elementistä on body-elementti, jonka sisälle tulevat kaikki XHTML-dokumentin sisällön rakennetta kuvaavat elementit. Lapsi-elementistä eli alemman tason elementistä hyvin tyypillinen esimerkki on p-elementti. Tyylin ominaisuudet periytyvät esimerkin tapauksessa body-elementiltä p-elementille, jos p-elementissä ei ole määritelty kyseistä ominaisuutta.

Kaikki elementtien ominaisuudet eivät ole periytyviä!

Seuraavassa esimerkissä tarkastellaan tyylien ominaisuuksien periytymistä. Esimerkin body-tyyliin tehty väriominaisuus color periytyy automaattisesti body-elementin sisällä oleviin XHTML-elementteihin. Esimerkin body-tyylin taustaväriksi on määritetty keltainen ja tekstinväriksi on määritetty musta. XHTML-dokumentissa h1- ja p-elementit sijoitetaan aina body-elementin sisälle. Esimerkin tapauksessa h1-elementin sisällä oleva teksti on mustaa, koska ominaisuus periytyy body-elementistä. p-elementin tekstin väri on keltainen, koska väri on määritelty uudelleen p-elementissä. p-elementin sisään tulevalle strong-elementille periytyy p-elementiltä keltainen tekstin väri. Myös kirjasinperheen ( font-family) ominaisuudet periytyvät body-elementistä h1- ja p-elementtiin. Kirjasinperheen määritykset eivät kuitenkaan periydy strong-elementille, koska elementille on määritelty omat kirjasinperheen määritykset.

body {
color: black;
background-color: yellow;
font-family: verdana, sans-serif;
}
h1 {
text-align: center;
}

p {
color: yellow;
background-color: black;
}
strong {
font-family: courier, monospace;
}

Seuraavassa kuvassa edellisen esimerkin tyyleillä muotoiltu XHTML-dokumentti.

Aivan kaikki tyylien ominaisuudet eivät kuitenkaan periydy. Esimerkiksi background-color-ominaisuus ei kuulu periytyvien ominaisuuksien joukkoon. Ominaisuus näyttää periytyvän, koska esimerkiksi body-tyylin background-color-ominaisuus näkyy h1-tyylisen kappaleen taustan läpi, koska h1-tyyliin ei ole määritelty omaa background-color-ominaisuutta vaan tausta on oletuksena läpinäkyvä.

Perinnän avulla tyylitiedostoon ei tarvitse kirjoittaa kaikkien ominaisuuksien tyylimäärittelyjä. Esimerkiksi body-tyyliin määritellyt ominaisuudet joitakin poikkeuksia lukuunottamatta periytyvät body-elementin sisällä oleville elementteille.

Tyylien aliluokat

XHTML-elementeille voidaan määritellä aliluokkia, joiden avulla yhdelle XHTML-elementille voidaan määritellä useita erilaisia esitystapoja. Aliluokkien avulla saadaan jokaiselle elementille ulkoasu käyttötarkoituksen mukaan dokumentin rakennetta rikkomatta. Esimerkiksi normaaliteksti eli p-elementin sisään määriteltävät kappaleet voidaan tehdä erilaisiksi ulkoasultaan kappaleiden sisällön mukaan. Kyseessä on eräänlainen kokonaan uuden tyylin tekeminen.

Tyylien aliluokkia voidaan määritellä antamalla tyylille alkuperäisen tyylin nimestä ja aliluokasta muodostuva yhdistelmänimi. Uuden tyylin nimi on muotoa tyyli.luokka, jossa tyyli on alkuperäisen tyylin nimi ja luokka on aliluokan nimi. Tyylin ja aliluokan nimi on erotettu toisistaan pisteella (.). Seuraavassa esimerkissä tyylille h1 on luotu aliluokka h1.tarkea. h1-tyylin tekstin väri on määritelty mustaksi. Tyylistä on haluttu tehdä erillinen aliluokka, jonka tekstin väriksi tulee punainen. Esimerkin kaltaista h1.tarkea aliluokkaa voidaan käyttää otsikoissa, jotka vaativat erityistä korostamista.

h1 {
background-color: white;
color: black;
text-align: center;
}

h1.tarkea {
background-color: yellow;
color: red;
}

Seuraavassa kuvassa on esimerkin tyyleillä muotoiltu XHTML-dokumentti. Kuten kuvasta voidaan nähdä periytyy h1-tyyliin määritelty keskitys myös h1.tarkea-tyyliin. Tämä johtuu siitä, että tyylitiedostossa on merkitystä mihin järjestykseen tyylimäärityksiä kirjoitetaan. Tässä tapauksessa h1-tyylin määritykset on tehty ensimmäisenä jolloin ne periytyvät kaikkiin jatkossa seuraaviin h1:een kohdistuviin määritykseen eli tässä tapauksessa h1.tarkea-tyyliin. Jos h1.tarkea olisi sijoitettu tyylitiedostossa ensimmäiseksi se ei olisi perinyt mitään h1-tyylin määrityksiä.

Jos aliluokkaa ei haluta yhdistää mihinkään tiettyyn tyyliin, voidaan se esitellä seuraavan esimerkin mukaisesti ilman varsinaista tyylin nimeä. Aliluokkaa voi tällöin käyttää minkä tahansa elementin yhteydessä.

.tarkea {
background-color: yellow;
color: red;
}

Varsinaisessa XHTML-dokumentissa tyylien aliluokan käyttöönotto onnistuu class-attribuutin avulla seuraavan esimerkin mukaisesti. Dokumentissa tärkeänä pidetty otsikko halutaan nähdä punaisena ja vähemmän tärkeä otsikko halutaan nähdä mustana. Jos selain ei tue tyylien käyttöä, niin sekä h1-tyylillä sekä h1.tarkea-tyylillä määritellyt otsikot näytetään selaimen oletusmuodossa. Kummatkin otsikkotekstit on nähtävissä otsikkotasoisena, joten dokumentin rakenne säilyy kunnossa. Aliluokkien käytössä on erityisen tärkeää, että aliluokat pohjataan aina rakenteellisesti oikeaan elementtiin. Tällä tavoin varmistetaan dokumentin näkyminen oikeassa muodossa myös selaimissa, jotka eivät tue tyylilomakkeita. Ei siis saa määritellä p-elementille tyylejä jotka saavat sen näyttämään otsikolta, koska p-elementti tarkoittaa kappaletta eikä otsikkoa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<link rel="StyleSheet" href="aliluokat.css" type="text/css" />
<title>CSS-esimerkeissä tarvittava tiedosto</title>
</head>
<body>
<h1>Ensimmäisen tason otsikko</h1>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.</p>
<h1 class="tarkea">Tärkeä ensimmäisen tason otsikko</h1>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.</p>
</body>
</html>

Asiayhteyden mukaan määräytyvät tyylit

Asiayhteyden mukaan määräytyviä tyylejä selvennetään seuraavien esimerkkien avulla. Esimerkissä on p- ja strong-tyyli, joille on määritelty muutamia ominaisuuksia. p-tyyliä käytetään normaalikappaleiden muotoilemiseen ja strong-tyyliä käytetään erilaisten korostusten tekemiseen. strong-tyylillä kirjoitettu teksti tulee aina jonkin kappaletason elementin sisään. Seuraavassa esimerkissä jokainen strong-tyylin esiintymä on aina punainen riippumatta elementistä, jonka sisällä strong-elementtiä käytetään.

p {
background-color: white;
color: black;
text-align: justify;
}
strong {
background-color: white;
color: red;
}

Seuraavasta kuvasta on nähtävissä strong-elementillä määritellyt kohdat. Myös h1-elementin sisällä on käytetty strong-elementtiä.

Edellisessä esimerkissä ei käytetty asiayhteyden mukaan määräytyviä tyylejä. Esimerkissä asiayhteyden mukaan määräytyvänä tyylinä voitaisiin käyttää p-elementin sisällä olevien strong-elementtien sisällön värin muuttamista hopean harmaaksi. Seuraavassa esimerkissä on toteutettuna kyseinen tyyli. Tyylin nimi muodostuu nyt kahden elementin nimestä. Ensiksi annetaan sen elementin nimi, jonka sisällä toisena olevan elementin on esiinnyttävä. Esimerkkitapauksessa strong-elementti on p-elementin sisällä.

p strong {
background-color: white;
color: silver;
}
p {
background-color: white;
color: black;
text-align: justify;
}
strong {
background-color: white;
color: red;
}

Seuraavassa kuvassa on käytetty edellisen esimerkin tyylitiedoa XHTML-dokumentissa. Esimerkistä on nähtävissä, että h1-elementin sisällä oleva korostus on punainen ja p-elementin sisällä oleva korostus on hopean harmaa.

Edellä olevan esimerkin kaltaisia sisäkkäin määriteltyjä tyylejä voi olla useampiakin. Tällöin tyyli otetaan käyttöön vasta kaikkien tyyliehtojen tullessa voimaan. Seuraavassa esimerkissä on määritelty asiayhteyden mukaan määräytyvä tyyli, jonka järjestämättömän listan alkiot ovat punaisia. Tällöin XHTML-dokumentissa olevat kahden sisäkkäisen ul-elementtien sisällä olevat li-elementit eli lista-alkiot ovat vihreitä. Tällä tavoin voidaan rajata tyylin käyttö todella tapauskohtaiseksi, koska esimerkissä ainoastaan toisen tason lista-alkiot värjätään punaiseksi. Esimerkin tyylin määrittely ei vaikuta ollenkaan ensimmäisen tason lista-alkioihin.

ul ul li{
background-color: white;
color: green;
}

Seuraavassa on esimerkkinä käytetävä listan XHTML-koodi.

<ul>
<li>Listan ensimmäinen alkio</li>
<li>Listan toinen alkio
<ul>
<li>Sisemmän listan ensimmäinen alkio</li>
<li>Sisemmän listan toinen alkio</li>
<li>Sisemmän listan kolmas alkio</li>
</ul>
</li>
<li>Listan kolmas alkio</li>
</ul>

Seuraavassa kuvassa edellisen esimerkin tyylien avulla muotoiltu XHTML-dokumentti. Kuvasta on nähtävissä sisemmän listan poikkeava väri.

Seuraavan esimerkin järjestämättömän listan kaikki lista-alkiot ovat punaisia riippumatta sisäkkäisten listojen tasosta. Esimerkillä on tarkoitus osoittaa, että asiayhteyden mukaan määräytyvien tyylien määrittely huomioi ainoastaan elementtien esiintymisjärjestyksen. Tällöin sisäkkäisiä listoja voi olla monia, mutta jokainen sisäkkäinen lista esitetään punaisena, koska aiemmin aloitetut listat jätetään huomioimatta.

ul li {
background-color: white;
color: red;
}

Asiayhteyden mukaan määräytyviä tyylejä käytettäessä voidaan käyttää myös tyylien aliluokkia. Seuraavassa esimerkissä esitetään punaisella kaikki sellaiset strong-elementit, jotka ovat jonkin erikois-aliluokan esiintymän sisällä.

.erikois strong {
background-color: white;
color: red;
}

Toisessa esimerkissä esitetään punaisella sellaisten strong-elementtien sisältö, jotka ovat nimenomaan p-elementin sisällä ja joiden aliluokan nimi on erikois.

p.erikois strong {
background-color: white;
color: red;
}

Asiayhteyden mukaan määräytyviä tyylejä kannattaa käyttää aina kuin vain mahdollista koska niiden käyttäminen ei edellytä mitään muutoksia XHTML-koodiin. Monesti asiayhteyden mukaan määräytyvillä tyyleillä voi korvata useita aliluokkia joiden käyttäminen edellyttäisi sopivan class-attribuutin lisäämistä XHTML-koodiin.

Tyylilomakkeiden kommentointi

Tyylimääritysten sekaan voidaan asettaa C-kielen mukaisia kommentteja. Kommentti alkaa /*-merkillä ja se loppuu */-merkkiin. Seuraavassa esimerkissä tyylin sekaan on lisätty tyylin merkityksestä kertova kommentti. Sisäkkäisiä kommentteja ei sallita, mutta kommentin voi ulottaa useammallekin riville.

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

Näennäisluokat

Näennäis- eli pseudoluokat ovat tyyliluokkien erikoistapauksia. Havainnollisin esimerkki asiasta on linkkien värin muuttaminen tapauskohtaisesti vierailemattoman ja vieraillun linkin välillä. Esimerkiksi vieraillun linkin väri on ollut erilainen kuin linkki, josta avautuvaa dokumenttia ei ole käyty katsomassa. Tapauskohtaisten värien määrittäminen ei ole mahdollista tyylien aliluokkien avulla, joten siihen joudutaan käyttämään näennäisluokkia. Käytettäessä näennäisluokkaa tyylin nimi koostuu tyylin nimestä ja näennäisluokan nimestä, jotka erotetaan toisistaan kaksoispisteellä (:). Seuraavassa esimerkissä käytetään a-elementin näennäisluokkaa visited.

a:visited {/* vierailtu linkki */
color: purple;
background-color: transparent;
}

Tyylin näennäisluokan käyttö ei aiheuta mitään lisäyksiä varsinaiseen XHTML-dokumenttiin, kuten esimerkiksi tyylin aliluokkien käyttö aiheutti.

Näennäisluokkia voidaan käyttää myös asiayhteyden mukaan toimivina ja niitä voidaan käyttää myös aliluokkien yhteydessä. Seuraavissa esimerkeissä tarkastellaan kumpaakin tapausta. Ensimmäisessä esimerkissä poistetaan kuvan ympäriltä kehys, jonka jotkin selaimet tekevät automaattisesti vierailemattomana linkkinä toimivan kuvan yhteydessä.

a:link img {
border: none;
}

Toisessa esimerkissä kirjasimen kokoa on suurennettu vierailemattomissa linkeissä, jotka kuuluvat aliluokkaan tarkea.

a.tarkea:link {
font-size:larger;
}

Linkin näennäisluokat

Linkin eli a-elementin näennäisluokat ovat varmasti yksi tarpeellisimmista näennäisluokkien käyttökohteista. Linkkien näennäisluokkien avulla voidaan dokumentin vieraillut, vierailemattomat ja aktiiviset linkit erottaa toisistaan esimerkiksi erilaisilla värimäärityksillä. Seuraavassa esimerkissä esitellään linkkien erilaiset näennäisluokat. Ensimmäisenä on vierailemattoman linkin näennäisluokka link, jonka ominaisuudet saa a-elementin sisällä oleva teksti. Toisena on vieraillun linkin näennäisluokka visited, jonka ominaisuudet a-elementin sisällä olevat teksti saa, jos linkin kautta on vierailtu toisella sivulla. Kolmantena esimerkissä on aktiivisen linkin näennäisluokka active, jonka ominaisuudet a-elementin sisällä oleva teksti saa, jos käyttäjä on valinnut linkin aktiiviseksi esimerkiksi hiirellä. Viimeisenä esimerkissä on näennäisluokka hover, jonka ominaisuudet tulevat voimaan vietäessä hiiren kohdistin linkin päälle.

a:link {/* vierailematon linkki */
color: blue;
background-color: transparent;
}
a:visited {/* vierailtu linkki */
color: purple;
background-color: transparent;
}
a:active {/* aktiivinen linkki */
color: red;
background-color: transparent;
}
a:hover {/* Hiiren kohdistin on linkin päällä */
color: white;
background-color: black;
}

Ulkoasun näennäisluokat

Ulkoasuun liittyvien näennäisluokkien avulla voidaan muuttaa XHTML-dokumentin ulkoasua joidenkin erikoistapausten osalta. Esimerkiksi kappaleen ensimmäinen kirjain voidaan suurentaa tai kappaleen ensimmäinen rivi voidaan sisentää muuta kappaletta sisemmäksi. Ulkoasun näennäisluokat ovat ainoastaan keinoja saada XHTML-dokumentin ulkoasusta "hienompi", mutta mitään rakenteellista merkitystä ulkoasun näennäisluokilla ei ole.

Seuraavassa esimerkissä ensimmäisen rivin muotoilemiseen on käytetty kapiteelikirjaimia. Kappaleen ensimmäistä riviä voidaan muotoilla first-line-näennäisluokan avulla. Ensimmäisellä rivillä tarkoitetaan tässä yhteydessä kappaleen ensimmäistä riviä, joka näkyy selainikkunassa. Selainikkunan koon muuttuessa sivu päivitetään uudestaan, koska ensimmäisen rivin pituus saattaa muuttua. Ensimmäisen rivin näennäisluokkaa voidaan käyttää ainoastaan kappaletasoisten elementtien kanssa. Ensimmäisen rivin näennäisluokan ominaisuuksia voidaan muuttaa ominaisuuksien font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height ja clear avulla.

p:first-line {
font-variant: small-caps;
}

Seuraavassa esimerkissä kappaleen ensimmäinen kirjain on muutettu 200 prosenttiseksi oletuskirjasimen kokoon verrattuna. Ensimmäisen kirjaimen ominaisuuksia päästään muuttamaan first-letter-näennäisluokan avulla.

Ensimmäisen kirjaimen näennäisluokan ominaisuuksia voidaan muuttaa ominaisuuksien font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, margin, padding, border ja float avulla.

p:first-letter {
font-size: 200%;
}

Näennäisluokkia voidaan käyttää asiayhteyden mukaan toimivina ja niitä voidaan käyttää myös aliluokkien kanssa.

Seuraavassa kuvassa on käytetty ulkoasun näennäisluokkien yhteydessä olleita esimerkkejä dokumentin ulkoasun muotoilemiseen.

Tyyleissä käytettävät arvot ja ominaisuudet

Tyylin ominaisuuksien ja arvojen kirjoittamista koskevat hyvin monet säännöt. Seuraavissa kappaleissa on kerrottu tarkemmin ominaisuuksiin ja niihin liittyvien arvojen antamiseen liittyvistä asioista.

Arvojen oikeinkirjoittaminen

Arvojen ja ominaisuuksien kirjoittamisessa kannattaa kiinnittää huomiota muutamiin asioihin. Seuraavaan on kerätty muutamia varottavia asioita ominaisuuksien ja arvojen antamisessa sekä niitä vastaavat oikeat tavat.

Arvoille ja ominaisuuksille kelpaavat vain tiettyä muotoa olevat arvot. Mitä tahansa ominaisuutta tai arvoa ei voida antaa tyylille. Ominaisuudet ja arvot ovat hyvin tarkkoja oikeinkirjoituksesta, mutta isoilla ja pienillä kirjaimilla ei yleensä ole väliä.

Esimerkki ominaisuuden kirjoittamisesta väärin. Virhe on aika tyypillinen, koska bgcolor on yksi body-elementin attribuutti, joten sen voi kirjoittaa helposti myös body-tyylin määrittelyyn.

background-color: black;/* OIKEIN */
bgcolor: black;/* VÄÄRIN */

Arvoa ei saa laittaa minkäänlaisten lainausmerkkien väliin, koska se muuttaa arvon merkkijonoksi. Esimerkki oikeasta tavasta antaa ominaisuudelle arvo.

color: red; /* OIKEIN */
color: "red";/* VÄÄRIN */

Arvot annetaan usein pituusyksiköissä. Tällöin arvo-osassa ei saa olla välilyöntejä luvun ja yksikön välissä.

margin: 20mm;/* OIKEIN */
margin: 20 mm;/* VääRIN */

Pituuden ilmoittaminen

Pituuden ilmoittamisella tarkoitetaan elementin vaaka- että pystysuuntaisen pituuden tai elementin sijainnin ilmoittamista.

Suhteelliset pituusmitat

Suhteellinen pituus voidaan ilmaista kolmea eri yksikköä käyttäen. Pituus voidaan ilmaista em-yksiköllä, jolloin kyseessä on suhteellisen pituuden ilmoittaminen kappaleen oletuskirjasimeen nähden. Seuraavassa esimerkissä h1-elementille määritellään marginaali, joka on 1,5-kertainen kappaleen peruskirjasimen kokoon nähden. Jos em-yksikköä käytetään kirjasimen koon määrittämiseen, niin silloin kirjasimen koko lasketaan ylemmän tason elementin kirjasinkoon mukaan. Esimerkiksi h1:n kirjasinkoko laskettaisiin body-elementin kirjasinkoon suhteen, koska h1-elementti sijaitsee body-elementin sisällä.

h1 { margin: 1.5em }

Kokoja voidaan ilmaista myös käyttäen px-yksikköä, joka tarkoittaa katselulaitteen kuvapisteen kokoa. px-yksikköä ei kannata käyttää tekstin koon muuttamiseen koska se ei järkevästi suhteudu käyttäjän ympäristöön vaan vain lähinnä marginaalien tai reunusten määrittelyyn. Seuraavassa esimerkissä h1-tyylille määritellään yhden pikselin levyinen musta reunus:

h1 {
border: 1px solid black
}

Prosenttien ilmoittaminen

Elementtien pituus tai koko voidaan ilmoittaa myös prosenttilukuna. Tällöin pituusmitta on täysin suhteellinen kyseisen kappaleen kirjasinkokoon tai ylemmän tason elementin kirjasinkokoon. Normaalissa XHTML-dokumentissa prosenttiarvot täytyy antaa lainausmerkkien sisällä, mutta tyylilomakkeissa lainausmerkkien käyttäminen prosenttiarvojen ympärillä on kiellettyä. Seuraavassa esimerkissä h1-elementin kirjasinkoko määritellään prosentuaalisesti, jolloin sen uusi kirjasinkoko on 1,2-kertainen ylemmän tason elementin oletuskirjasimeen nähden.

h1 { font-size: 120%}

Värien ilmoittaminen

Tyyleissä värien määrittäminen tapahtuu muutamaa poikkeusta lukuunottamatta samalla tavoin kuin normaalissa XHTML-dokumentissa.

Värit voidaan määritellä värien englanninkielisillä nimillä, kuten esimerkiksi blue. Tällaisia värejä on kuitenkin vain kuusitoista kappaletta ( aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, ja yellow), joten yleensä värit joudutaan määrittelemään heksadesimaalilukujen avulla. Värin heksadesimaaliluku annetaan risuaitamerkin (#) jälkeen ja yhtä RGB (RedGreenBlue)-väriä voi vastata joko yksi- tai kaksidesimaalista heksadesimaalilukua. Annettaessa väri yhdellä desimaalilla täydennetään väri kaksidesimaaliseksi tuplaamalla yksidesimaalinen arvo. Esimerkiksi f muutetaan muotoon ff. Perinteisestä XHTML-dokumentista poiketen värit voidaan antaa myös prosenttilukuina ja kokonaislukuina. Tällöinkin värien suhteet määritellään kolmen RGB-värien (punainen, vihreä ja sininen) osuuksina. Kaikkien seuraavien esimerkkien p-elementtien väriksi on asetettu punainen.

P { color: #f00; }
P { color: #ff0000; }
P { color: rgb(255, 0, 0); }
P { color: rgb(100%, 0%, 0%); }

Seuraavassa esimerkissä body-elementille on annettu väriksi musta ja taustaväriksi keltainen. h1-elementille on vastaavasti määritelty väriksi punainen ja taustaväriksi valkea. P-elementille on vastaavasti määritelty väriksi valkea ja taustan väriksi musta.

body {
color: #000000;
background: yellow;
}
h1 {
color: #f00;
background-color: white;
}
p {
color: rgb(255,255,255);
background-color: rgb(0%,0%,0%);
}

Seuraavassa kuvassa on käytetty edellä olevia tyylin määrittelyjä XHTML-dokumentissa.

CSS1:n ominaisuudet

CSS1:en kaikki ominaisuudet käydään tilanpuutteen vuoksi läpi vain WWW-sivulla osoitteessa http://appro.mit.jyu.fi/doc/css1/.