4.2 Tyylimäärittelyt omassa tiedostossaan

Tehtävässä 11 jouduit tekemään samat ulkoasumäärittelyt kaikille kolmelle sivulle sekä vielä erikseen jokaiselle otsikolle. Jos nyt haluaisit muuttaa otsikkojen tyyliä, sinun pitäisi käydä läpi kaikkien 3 tiedoston kaikki otsikot: yhteensä 7 muutosta 3 eri tiedostoon.

Jos siirryt käyttämään edellisessä luvussa esitetyn esimerkin mukaisesti tiedoston head-osassa olevaa tyylimäärittelyä, sinun pitäisi enää käydä muuttamassa jokaisen tiedoston tyyli-määrittelyä: yhteensä 3 muutosta 3 eri tiedostoon.

Ajatellaanpa, että sinulla olisikin sivusto, joka koostuu vaikkapa 80 eri web-sivusta, ja haluat vaihtaa kaikkien sivujen taustaväriä tai otsikkojen tyyliä/kirjaisinta - mikä hirvittävä työ käydä muuttamassa kaikkien 80 sivun koodit käsin!!! Vaikka käyttäisit jo opittua tyylimäärittelyä, joutuisit silti aukaisemaan kaikki 80 tiedostoa ja muuttamaan niistä muutamaa riviä.

Mutta jos käytetään kaikille sivuille yhtä yhteistä (ulkoista) tyylitiedostoa, voit vaihtaa kaikkien 80 sivun taustaväriä ja kaikkien 80 sivun otsikkojen ulkoasua todella näppärästi muuttamalla ainoastaan yhden tiedoston muutamaa riviä.

Hyödyt

Tällaisessa rakenteen ja ulkoasun erillään pitämisessä on monta hyvää syytä, kuten

  • koodista tulee paljon selkeämpää, kun HTML-koodin seassa ei ole mitään ylimääräisiä väri- ja fonttiasetuksia tai välistyskoodeja (marginaalit, taulukon sarakkeiden leveydet yms.). Tämä tosin saavutetaan tuolla aiemmallakin menetelmällä, jossa tyylit laitettiin head-osaan.
  • koodin ylläpito on paljon helpompaa: jos haluat muuttaa vain sisältöä etkä ulkoasua, sen kun lisäilet elementtejä HTML-koodiin; ja vastaavasti jos haluat muuttaa ulkoasua mutta et sivun rakennetta, sinun ei tarvitse lainkaan muuttaa HTML-koodia vaan ainostaan tuota CSS-tiedostoa.
  • samaa tyylitiedostoa voidaan käyttää useisiin eri HTML-sivuihin. Tämä on ehkä kaikista yleisin ja keskeisin hyöty. Yleensä yhden sivuston kaikki sivut käyttävät yhtä ja samaa tyylitiedostoa, ja sitä muuttamalla kaikkien sivujen ulkoasu muuttuu kertaheitolla.
  • sama toimii myös toisinpäin: samaa HTML-dokumenttia voidaan käyttää useaan eri päätelaitteeseen (erikokoisin näytöin ja värein varustetut tietokoneet, eri selaimet, tietokoneet vs. kännykät ja PDA-laitteet, etc). Jokaista eri päätelaitetta varten ei tarvitse tehdä erikseen omaa HTML-sivua vaan yksi yhteinen HTML-koodi kaikille, ja jokaiselle päätelaitteelle tehdään ainoastaan oma tyylitiedostonsa. Näin ollen koodin monikertaistuminen vältetään.
  • vältetään koodin toistoa
    (a) esim. sivun taustaväri määritellään vain yhdessä paikassa (CSS) eikä kaikissa HTML-tiedostoissa (kuvassa HTML-tiedostot 1-3) ja
    (b) esim. jokaiselle tason 1 otsikolle ei tarvitse erikseen määritellä kirjaisintyyppiä vaan riittää että se määritellään yhden kerran tuolla CSS-tiedostossa

Esittelen seuraavaksi tyylitiedostojen käytön alkeet sekä muutamia esimerkkejä tyylien soveltamisesta käytäntöön.

Tyylitiedoston rakenne

Erillinen tyylitiedosto on HTML-sivun kaltaisesti tavallinen (muotoilematon) tekstitiedosto (ASCII / .txt - ei .rf tai .doc) , joka voidaan luoda millä tahansa tekstieditorilla. Sen pääte on .html:n sijaan .css (Cascading Style Sheet). Tiedoston nimi voi olla mikä tahansa, kunhan sen pääte on .css. Käytetään tässä esimerkissä kuvitteellisesti tiedostoa styles.css, joka sijaitsee HTML-dokumentin yläpuolella olevassa hakemistossa.

Tähän styles.css-tiedostoon kirjoitetaan kaikki halutut tyylimäärittelyt. Varsinaiseen HTML-dokumenttiin pitää vielä lisätä yksi tunniste, jolla otetaan haluttu tyylitiedosto käyttöön. Tämä tunniste sijoitetaan head-osaan seuraavalla koodilla:

<head>
	<title>css-testausta</title>
	<link rel="stylesheet" type="text/css" href="../styles.css"></link>
</head>
Esimerkki: tyylitiedoston styles.css sisältö
body {
	background-color : Silver;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-style : italic;
}
p {
	font-size : 14px;
}
li {
	color: Blue;
	background-color : White;
	font-size : 12px;
	font-style: bold;
}
h1 {
	border : 1px solid Blue;
}

Jos käytetään ulkoista tyylitiedostoa, ei tyylimäärittelyjen alkuun ja loppuun tarvitse (eikä saa) laittaa <style> ja </style>-tunnisteita.

Kuten huomaat, CSS-koodissa ja HTML-koodissa ulkoasumäärittelyt tapahtuvat vähän eri tavalla, kuten:

  • HTML:ssä puhutaan attribuuteista (attributes), CSS:ssä ominaisuuksista (properties)
  • ominaisuuksien arvoissa ei käytetä lainausmerkkejä - attribuuteissa taas niitä pitää käyttää.
  • attribuuttien nimet muuttuvat jonkin verran kun siirrytään käyttämään CSS:n ominaisuuksia:
    HTML CSS
    align="left" text-align: left;
    font face="arial" font-family: arial;
    bgcolor="blue" background-color: blue;

CSS-kielessä elementtien ominaisuuksia on todella paljon, joka on sekä hyvä että huono asia. Hyvä asiaon se, että tästä syystä tyylitiedostoilla voidaan tehdä vaikka mitä (paljon mahdollisuuksia), mutta kaikkien mahdollisten ominaisuuksien ulkoa osaaminen on hankalaa ellei mahdotonta.

Onneksi niitä ei tarvitsekaan oppia ulkoa, vaan aina voi käydä kurkistamassa esim. W3C-organisaation koulutusivuilta neuvoja.

Luokat

Jo olemassa olevien tunnisteiden (p, h1, li, td...) lisäksi tyylitiedostoissa voidaan määritellä omia "tyylejä". Sellaista kutsutaan luokaksi (engl. class):

Esimerkki 1: tyylitiedosto
.sininen {
	color: blue;
}

Huomaa piste luokan nimen edessä!

Itse tekemäni luokan "sininen" avulla voin värittää melkein mitä tahansa siniseksi käyttämällä luokan nimeä HTML-koodin seassa:

Esimerkki 1: HTML-koodi
<p>Tässä tavallinen mustalla värillä oleva kappale</p>
<p class="sininen">Tämä kappale tulee sinisellä värillä.</p>
<ul>
	<li>listan ensimmäinen elementti</li>
	<li class="sininen">listan toinen elementti</li>
	<li>listan kolmas elementti</li>
</ul>
Esimerkki 1: lopputulos

Tässä tavallinen mustalla värillä oleva kappale

Tämä kappale tulee sinisellä värillä.

  • listan ensimmäinen elementti
  • listan toinen elementti
  • listan kolmas elementti

Periytyminen

Elementit perivät (inherit) ominaisuuksia ylhäältäpäin. (Tästä tulee myös CSS-kielen nimi, nimittäin sana "cascading" tarkoittaa vesiputousta tai ryöppyämistä. Tyylit ikäänkuin "valuvat", "ryöppyävät" ylhäältä alaspäin.)

Jos määrität tietyn kirjaisintyypin, -koon ja -värin body-elementille, perivät kaikki body:n sisällä olevat elementit nuo samat ominaisuudet. Yleensä tämä tarkoittaa, että kaikki kappaleet (p) ja listat (li) käyttävät oletusarvoisesti osittain samoja tyylimäärityksiä kuin body-elementtikin. Sana "osittain" siksi, että esim. body:lle määritely kirjaisinkoko ei periydy otsikoille (h1...h6). Kirjaisintyyppi kyllä periytyy, mutta ei koko.

p-elementti käyttää siis samoja ominaisuuksia kuin body-elementtikin. Jos p-elementille on tyylitiedostossa määritelty omia ulkoasuun vaikuttavia ominaisuuksia (esim. lihavointi tai muu efekti), tulevat nämäkin voimaan yhtäaikaa edellisten lisäksi. Mutta jos p-elementille on määritelty samoja ominaisuuksia kuin body:lle, siinä tapauksessa p-elementille määritetyt ominaisuudet menevät edelle (body:n vastaavat tyylimärittelyt jäävät siis näiltä osin huomioimatta).

Lopuksi vielä on mahdollinen luokan käyttö, joka menee kaiken aiemman edelle:

Alla olevassa esimerkissä p-elementille määritelty väri ohittaa body-elementille määritellyn värin, ja luokan väriasetukset menevät vielä p-elementin määritysten edelle.

Esimerkki 2: tyylitiedosto
body {
	/* taustaväri harmaa, teksti sinisenä */
	font-family: Arial;
	background-color: Gray;
	font-size: 12 px;
	color: Blue;
}
p {
	/* taustaväri oliivi, teksti mustana - muut ominaisuudet peritään */
	color: Black;
	background-color: Olive;
}
.kelt {
	/* teksti keltaisena ja lihavoituna, muut ominaisuudet peritään */
	color: Yellow;
	font-weight: bold;
}
Esimerkki 2: HTML-koodi
<body>
Tämä teksti on irrallaan eli ilman p-tunnisteita.

<p>Tämä teksti on p-elementin sisällä</p>

<p class="kelt">Tämä teksti on p-elementin sisällä, 
                mutta sen luokaksi on määritelty "kelt"</p>

sitten vielä vähän tekstiä <span class="kelt">"kelt"-tyylillä</span> ilman p-elementtiä
</body>
Esimerkki 2: lopputulos
Tämä teksti on irrallaan eli ilman p-tunnisteita.

Tämä teksti on p-elementin sisällä

Tämä teksti on p-elementin sisällä, mutta sen luokaksi on määritelty "kelt"

sitten vielä vähän tekstiä "kelt"-tyylillä ilman p-elementtiä

Tavallinen teksti ilman mitään tunnisteita tulee tällä tyylitiedostolla 12 pikselin koolla sinisellä värillä harmaalle taustavärille. p-tagien sisään tuleva teksti tulee muutoin samanlaisena, mutta taustaväri muuttuu oliiviksi ja tekstin väri mustaksi.

Jos kappaleeseen on lisätty luokka nimeltään "kelt", muuttuu tekstin väri keltaiseksi ja teksti lihavoituu, mutta taustaväri pysyy oliivina (periytyy p-elementistä) sekä tekstin koko 12 pikselin koossa (periytyy body-elementistä).

VINKKI: Jos haluat käyttää jonkun luokan ominaisuuksia keskellä tekstiä, etkä täten halua tai voi pistää luokkaa p-elementtiin, voit käyttää span-elementtiä (rivinsisäiselementti): 
<p>Tämä teksti tulee mustalla mutta 
<span class="punainen">tämä punaisella</span>, ja 
loppuosa taas mustalla.</p>

Tämä teksti tulee mustalla mutta tämä punaisella, ja loppuosa taas mustalla.

Tyylitiedostoilla voi tehdä myös visuaalisen efektin kaikille linkeille: kun liikutat hiiren linkin päälle, sen väri ja/tai taustaväri muuttuu:

a:link {
	color: blue;
}

a:visited {
	color: #9090ff;
}

a:hover {
	color: yellow;
	background-color: blue;
}

Tavallisen linkin väri on sininen (oletusarvo muuten), vieraillun linkin väri vaaleansininen, ja kun osoitin on linkin päällä (hover), linkin väri muuttuu keltaiseksi ja taustaväri siniseksi. Kokeile esim. alla olevia linkkejä!

Lähteitä

Iso läjä CSS-oppaita (sekä netistä että kirjoista) löytyy w3c:n sivuilta. Ehkä paras referenssilähde on saman "firman" koulutussivujen CSS-osion sisältö.

Yksi suomenkielinen ja hyvin perusteellinen lähde CSS:ään ja sen eri tyylimäärityksiin löytyy Jyväskylän yliopiston sivuilta. Toinen perusteellinen suomenkielinen lähde löytyy graafikko Ulrika Juseliuksen sivuilta.