Web-julkaisemisen opas, luku 2 Reseptit: Miten luon Web-sivujen kokonaisuuden, ja muuta vaativampaa:

Värikkyyttä: tyylisäännöstöt (style sheets, CSS)

Sisällys

Mitä tyylisäännöstöt (style sheets) ovat

Tyylisäännöstö (style sheet) on yleisesti sanottuna dokumentin esitysasua koskeva ehdotus, joka on kirjoitettu tarkoitukseen erityisesti kehitetyllä kielellä. Näistä kielistä Webissä tärkein, itse asiassa toistaiseksi lähes ainoa käytetty, on CSS. Alan yleistä kehitystä voi seurata Web-konsortion Web Style Sheets -sivuilta.

Tarkemmin sanoen CSS on kieliperhe, johon kuuluvat nykyisin CSS1 ja sitä paljon laajempi CSS2; lisäksi CSS3 on valmisteilla. Seuraavassa keskitytään lähes kokonaan CSS1:een, koska sille alkaa olla osittain jo melko hyvin toimiva tuki selaimissa. Lopussa on muutama viittaus CSS2:een.

Esimerkki erittäin yksinkertaisesta tyylisäännöstöstä (CSS1-kielellä) on seuraava:

kbd { font-weight: bold; }

Kun HTML-dokumenttiin liitetään tällainen tyylisäännöstö, niin se ehdottaa, että kaikki dokumentin sisältämät kbd-elementit tulisi esittää lihavalla (engl. bold) kirjasinlajilla. Tämä ehdotus ei mitenkään puutu muihin ulkoasuseikkoihin kuten kirjasinten muotoon ja kokoon, tekstin väriin tms.

Hiukan mutkikkaampi tyylisäännöstö on seuraava, jonka vaikutuksen saatat hyvinkin nähdä lukiessasi tätä dokumenttia:

h1, h2, h3, h4 { color : #000; background : #e0ffdd url(bg3.png);
font-family : Verdana, Arial, Helvetica, sans-serif; }

Tämä säännöstö sisältää useita ehdotuksia otsikkoelementtien esitysasusta. Lyhyesti sanottuna se ehdottaa niiden esittämistä niin, että teksti on mustalla määrätynkuvioista taustaa vasten jollakin ns. sans serif -fontilla ilmoitetussa preferenssijärjestyksessä. Se myös sisältää taustaväriehdotuksen siltä varalta, että kuvat eivät ole käytössä tai selain muusta syystä ei käytä taustakuvaa. Merkinnät #000 ja #e0ffdd ovat värikoodeja. Muihin otsikoiden esittämisen piirteisiin, kuten eritasoisten otsikoiden esittämiseen erikokoisin kirjaimin, tämä säännöstö ei puutu.

Tavallisin ja haitallisin tyylisäännöstöjä koskeva harhaluulo on, että niillä määrättäisiin dokumentin esitysasu ja voitaisiin "määritellä uudestaan" HTML-elementtien merkityksiä. Hyödyllinen naseva muistutus siitä, että CSS:llä voi ehdottaa, ei pakottaa, sisältyy listaan CSS Caveats.

Nimitys tyylisäännöstö on oma ehdotukseni, mutta mielestäni helppo ymmärtää ja luonnollinen. Tyylisäännöstö (engl. stylesheet) nimittäin koostuu säännöistä (rule). Yksi sääntö asettaa joidenkin elementtien joillekin ominaisuuksille (properties) joitakin arvoja. Ominaisuus voi olla esimerkiksi väri, koko, kirjasinlaji tai elementtiä kehystävän viivan paksuus. Säännössä ns. selektori valitsee, mitä elementtejä sääntö koskee. Seuraava kaavio havainnollistaa näiden käsitteiden suhdetta toisiinsa:

sääntö (rule)
  deklaraatio (declaration)  
selektori   ominaisuus (property)   arvo (value)    
h1 { font-family : Arial, sans-serif ; }

Miten tyylisäännöstö liitetään HTML-dokumenttiin

Periaatteessa on useita vaihtoehtoisia tapoja liittää CSS-tyylisäännöstö HTML-dokumenttiin. Käytäntö on osoittanut, että tapojen moninaisuus varsin usein aiheuttaa sekaannuksia. Niinpä tässä esitetään vain yksi selkeä ja looginen tapa:

Yleisemmin nimen (esim. siis art.css) tilalla voi olla URL, joten voit siis käyttää myös jossakin muualla olevaa tyylisäännöstöä. Esimerkki:

<link rel="stylesheet" title="Yucca's basic style" href="http://www.cs.tut.fi/~jkorpela/basic.css">

Tosin jos käytät jonkun muun tekemää tyylisäännöstöä, niin voi tulla ikäviä yllätyksiä, jos se joku muu muuttaa sitä tai poistaa sen.

Mitä kaikkea tyylisäännöstöillä voisi tehdä

Se, mitä tyylisäännöstöillä voi tehdä, riippuu kahdesta asiasta:

Karkeasti sanottuna nykyisin voi käytännössä käyttää CSS1:tä, vaikka senkin toteutus selaimissa on hyvin puutteellinen ja viallinenkin. Joitakin CSS2:n piirteitä on myös toteutettu joissakin selaimissa.

CSS1:ssä voi ehdottaa elementeille lähinnä seuraavanlaisia ominaisuuksia:

Jo tästä suppeasta luonnehdinnasta selvinnee, että CSS1:täkin voi helposti käyttää väärin. Ei ole mitään teknistä estettä ehdottaa 1. tason otsikoiden näyttämistä millimetrin korkuisilla kirjaimilla punaisina punaisella taustalla - tai niiden jättämistä kokonaan pois! Jos tämä tuntuu oudolta, et ole vielä nähnyt paljoakaan. Ks. esim. WDG:n iskevää Style Sheet Dependence -sivua tai artikkeliani Lurching Toward Babel: HTML, CSS, and XML (PDF).

Miten asiat sotketaan tyylikkäästi

Primum non nocere.
Ensimmäiseksi [muista että hoidolla] ei [saa] vahingoittaa [potilasta].

Tämä vanha lääkärinohje, ilmeisimmän sisältönsä lisäksi, viittaa siihen, että jos potilasta ei lainkaan hoideta, on mahdollista, että "luonto" parantaa. Modernimmin sanottuna ihmisen elimistön oma toiminta kuten immuunipuolustus ja haavojen arpeutuminen ehkä korjaa tilannetta, kenties koko tilanteen. Tämä ei tarkoita sitä, että lääkärin ei pitäisi koskaan tehdä mitään. Mutta se tarkoittaa, että ei pidä ruveta hoitamaan, ellei ole jotain perusteita olettaa, että hoidosta on enemmän hyötyä kuin haittaa. Se, että tekee jotain vain tehdäkseen jotain, ei ole hyvä ajatus. Se voi esimerkiksi sotkea luonnollisen immuunipuolustuksen niin, että tuloksena on tilanne, joka on paljon pahempi kuin se olisi ilman "hoitoa". Lääketieteen ja puoskaroinnin historia tuntee paljon sellaisia "hoitomuotoja".

Miten tämä voisi analogisesti koskea Web-sivuja ja tyylisäännöstöjä? Ensinnäkin siten, että jos sinä saat tyylisäännöstöillä (tai muilla keinoin) "viritettyä" sivusi näkymään mielestäsi paremmin, ei ole mitään takeita, että se parantaa tilannetta yleisesti. Se, mitä sinä näet, on se, mitä sinä näet. Entäs jos useimpien muiden katselutilanteessa ulkoasu meneekin paljon hullummaksi kuin ilman "hoitoa"? (Tai voi olla, että 80 %:ssa katselutilanteista esitysasu on hiukan kauniimpi kuin ilman tyylisäännöstöjä mutta 20 %:ssa paljon rumempi tai jopa lukukelvoton.) Tämä on mahdollista, jopa tavallista, eikä ainoa syy suinkaan ole se, että monien selainten tyylisäännöstötuessa on pahoja virheitä. (Itse asiassa tämä koskee kaikkia selaimia - mutta virheitä on eri asioissa.)

Mutta myös ajatuksella "luonnon" parantavasta vaikutuksesta on vastineensa Web-maailmassa. Oletetaanpa, että jonkin yleisesti käytetyn selaimen tapa esittää joitakin HTML-rakenteita on kertakaikkisen huono. Esimerkkejä ei tarvitse erityisesti etsiä; mainittakoon vaikkapa se, että Internet Explorer 4 näyttää select-elementillä tehdyn valikon tekstit selvästi pienemmällä kuin normaalitekstin. Kannattaako tällaista ruveta korjailemaan omien sivujensa osalta? Kysehän on selaimen piirteestä. Joskus ehkä kannattaa "hoitaa" tällaisia asioita tyylisäännöstöillä, mutta kannattaa muistaa, että se on vain oireiden hoitoa. Ja esimerkkitapauksessamme käy itse asiassa hyvin helposti hullusti: IE 4 ymmärtää select-elementtien fonttikokoon vaikuttavia tyylisääntöjä päin seiniä, niin että esimerkiksi kokomäärite small aiheuttaa koon suurentamisen. Ja jos kokeilemalla olet huomannut näin olevan ja ajattelet, että "sehän toimii", niin sitten sivusi tulee "toimimaan" päin seiniä kaikilla selaimilla, jotka toteuttavat kyseisen tyylisäännön oikein.

Mihin tyylejä sitten kannattaa käyttää?

Tyylejä voi käyttää dokumentin rakenteen korostamiseen. Esimerkiksi jos dokumentissa on paljon lainauksia, kuten esim. tieteellisessä artikkelissa taikka kirjallisuusarvostelussa usein on, voi olla hyödyllistä ehdottaa jotain blockquote-elementtien esitysasusta. Niiden tavanomainen esitysasu yleensä erottaa ne melko huonosti normaalitekstistä. Yksi keino on ehdottaa sopivaa taustaväriä. Seuraavassa on eräs mahdollisuus:

blockquote { background : #eaeaea none; color: #000; }

Ja jos tekstissäsi on runsaanpuoleisesti lainauksia kahdesta eri lähteestä, voi olla eduksi erottaa ne toisistaan visuaalisesti käyttämällä hiukan erilaisia taustavärejä.

Toissijaisesti tyylejä voi käyttää "tyylittelyyn": ulkoasun saattamiseen jutun luonnetta vastaavaksi, sitä korostavaksi. Tyypillisesti käytetty keino on jutun aihepiiriin liittyvän taustakuvan käyttö. Tässä on kuitenkin syytä olla hyvin varovainen: yleensä taustakuva vaikeuttaa lukemista. Ainakin on syytä käyttää himmeää taustakuvaa, jossa ei ole liikaa yksityiskohtia. Kenties himmeän taustavärin käyttö riittäisi, ja joka tapauksessa siitä kannattaa aloittaa; jos nimittäin ehdottaa taustakuvaa, on syytä ehdottaa myös siihen sopivia tekstin ja linkkien värejä ja tämän takia myös taustaväriä. Taustavärihän näkyy silloin, kun selain ei syystä tai toisesta käytä taustakuvaa.

Tyylittelynä voidaan käyttää myös kappaleiden ulkoasun ehdottamista "kaunokirjallisen tyylin" mukaiseksi, jos juttu on vaikkapa novelli tai sisältää otteen sellaisesta. Kyseinen tyyli sisältää erityisesti sen, että kappaleiden välissä ei ole isompaa väliä kuin normaali rivinväli mutta kunkin kappaleen ensimmäistä riviä on hiukan sisennetty. Luvun ensimmäistä kappaletta ei kuitenkaan sisennetä, mutta sen alkukirjain on ehkä iso ja tyylitelty. Seuraavassa on eräs mahdollisuus ehdottaa tällaista esitysmuotoa, kuitenkin siten, että tässä kappaleiden välillä on hiukan ylimääräistä tilaa:

p { text-indent : 1em;
    margin-bottom : 0.5ex;
    margin-top : 0.5ex; }

p.start { text-indent : 0; }

p.start:first-letter { font-size : 200%; font-weight : bold;
   color : #060; background : #fff none; }

Edellä käytetty ns. pseudoelementti first-letter toimii tätä kirjoitettaessa vain muutamissa selaimissa (kuten Opera ja Netscape 6). Muilta osin kyseinen tyylisäännöstö toimii myös IE 4:ssä ja Netscape 4:ssä. Seuraavissa kolmessa kappaleessa sitä on käytetty, joten näet, miten sinun selaimesi sen toteuttaa. (Laajempi esimerkki tämäntapaisesta tyylistä on juttuni Passiivin käytöstä, jonka ehdotetussa ulkoasussa on pyritty jäljittelemään jutun alkuperäistä painoasua.)

Usein halutaan vaikuttaa kirjasinlajien eli fonttien käyttöön sivuilla. Parasta on yleensä tehdä tämä epäsuorasti, käyttäen loogisia tekstielementtejä kuten strong ja cite. Yleensä on aivan tarpeetonta yrittää vaikuttaa siihen, mitä kirjasinlajia selain käyttää ns. leipätekstille, ja suorastaan haitallista yrittää asettaa leipätekstin koko; ks. Jukka Tujulan kirjoitusta Fonttikoot WWW-sivuilla. Jos kuitenkin halutaan erottaa joitakin jutun osia muista, esimerkiksi lainaukset omasta tekstistä, käyttäen kirjasinlajien muuntelua yhtenä keinona, niin silloin on toki syytä ehdottaa leipätekstin fonttikin.

Fonttien käytöstä on Todd Fahrner kirjoittanut käytännöllisen ohjeen Beyond the FONT tag: Practical HTML text styling. Kirjasinlajeihin vaikuttaminen on sen mukaan mahdollista tehdä CSS:llä kohtuullisen hyvin; sen sijaan kirjasinten koko on paljon ongelmallisempi asia nykyisissä toteutuksissa. Taustatietoja "fonttien maailmasta" tarjoaa Dmitry's Design Labin The World of Fonts.

Jos käytät mustaa taustaa ja vastaavasti valkoista, keltaista tai muuten vaaleaa tekstin väriä, ota huomioon, että valkoinen teksti mustalla taustalla on vaikeampaa lukea kuin samankokoinen musta teksti valkealla taustalla. Jos siis ehdotat mustaa taustaa, on syytä ehdottaa fonttikokoa isommaksi. Tämä on sitten ongelmallista, kuten edellä sanottiin, ja varminta lienee käyttää big-elementtiä; koska se on tekstitason elementti, täytyy tällöin kirjoittaa mm. joka kappaleen alkuun (<p>-tägin perään) <big> ja joka kappaleen loppuun (ennen </p>-tägiä) </big>. Muuten käy niinkuin Todd Fahrnerin Agitprop-sivulla, joka ei ole käytännössä kovinkaan sujuvasti luettavissa ilman selaimen asetusten säätöä, jos selaimen normaaliasetukset tekevät normaalitekstin luettavaksi!

Värikoodit

Yksinkertaisimmillaan värikoodit ovat CSS:ssä muotoa #pvs missä p, v ja s ilmoittavat punaisen, vihreän ja sinisen valon intensiteetin heksadesimaalinumerolla 0, 3, 6, 9, c tai f. Nämä tarkoittavat itse asiassa heksadesimaalilukuja 00, 33, 66, 99, cc ja ff eli desimaalilukuja 0, 51, 102, 153, 204 ja 255. Näin saadaan 216 värin paletti, jonka värejä sanotaan "turvallisiksi", browser-safe colors. Tosin turvallisuus on hiukan kyseenalaista kuvissa käytettävien värien osalta, mutta taustan ja tekstin väreinä nämä värit toimivat luotettavammin kuin muut. (Hyvä havainnollinen "värikartta" näistä väreistä on Dave Raggettin jutun Adding a touch of style kohdassa Browser safe colors.) Myös muita intensiteettejä (väliltä 0 - f) voi käyttää.

Esimerkiksi #f00 on siten puhdas punainen, #fff on puhdas valkoinen (sisältää kaikkia värejä maksimimäärän) ja #000 on musta (ei sisällä minkäänväristä valoa, siis täysi pimeys).

Värikoodi #pvs voi olla myös pidempää muotoa, missä p, v ja s ovat kaksinumeroisia heksadesimaalilukuja, siis väliltä 00 - ff. Näin voidaan esittää paljon laajempi valikoima värejä. Värien esityksen tarkkuus kuitenkin riippuu käyttäjän näyttölaitteesta ja sen asetuksista. Jos käytössä on esimerkiksi vain 256 eri väriä, mikä on aika tavallista, tulos on sama kuin jos värikoodit pyöristettäisiin kukin lähimmäksi "browser-safe" -väriksi.

Tässä värijärjestelmässä on kyse valon eri väreistä ja siten additiivisista väreistä, tarkemmin sanoen RGB-järjestelmän mukaisista (red, green, blue). Jos sekoitat vihreää ja punaista maalia tai muuta väriainetta, saan jonkinlaista ruskeaa; mutta additiivisessa järjestelmässä on kyse valojen yhdistämisestä, ja silloin vihreän ja punaisen yhdistäminen tuottaa keltaisen. Ks. Internetixin kurssin Värähdys- ja aaltoliike osaa Värit.

Kirkkaimpia värejä kuten puhdasta punaista (#f00) kannattaa käyttää hyvin varovaisesti.

Kuvaruudulla voimakkaat värit ovat vielä paljon ärsyttävämpiä kuin muualla. Muutama pieni voimakkaanvärinen läiskä tai teksti voi olla eduksi, mutta esimerkiksi punaisen käyttäminen leipätekstin (tai taustan!) värinä on hyvin ajattelematonta. Käytä mieluummin himmeitä pastellivärejä taustan värinä ja vain jonkin verran mustasta poikkeavia värejä tekstin väreinä. Tällöin mahdolliset kuvasikin pääsevät paremmin oikeuksiinsa, kun räikyvät tekstin ja taustan värit eivät häiritse.

Taustatietoja "värien maailmasta" julkaisemisen kannalta tarjoaa Dmitry's Design Labin The World of Color. Teknisempiä tietoja värien käytöstä antavat mm. WDG:n sivun Design Elements kohdassa Color Palettes and Usage ja Kevin Werbachin The WWW help pagen kohdassa Setting Background and Text Colors mainitut jutut.

Koskaan ei pidä luottaa väriin ainoana informaation välittämisen keinona. Esimerkiksi työntekijöiden lomia esittävä taulukko, jossa tyhjien alkioiden taustavärillä kerrotaan, onko asianomainen lomalla vai ei, on esimerkki tämän säännön karkeasta rikkomisesta. Värit voivat jäädä näkemättä hyvin monista eri syistä: värisokeus, mustavalko- tai harmaasävynäyttö, mustavalkotulostus paperille, selaimesta käännetty "pois" tekstin ja taustan värit (koska niin monilla Web-sivuilla käytetään värejä niin järjettömän räiskyvästi) jne. Esimerkkitapauksessa auttaisi asiaa jo se, että alkiossa on vaikkapa jokin kirjainkoodi, josta voisi edes arvata jotain. Aiheesta lisää: Web Content Accessibility Guidelines, periaate 2: Don't rely on color alone.

Yhteensovittaminen

Oletetaanpa, että haluat tehdä jotain niin vaatimatonta kuin ehdottaa sivullesi himmeänsinistä taustaväriä, vaikkapa "turvallista" väriä #cff. (Se voisi olla hyvä idea vaikkapa akvaarioaiheisella sivulla.) Luonnollista olisi yrittää ensin seuraavaa:

body {background : #cff;}

Mutta tämä tarkoittaisi olennaisesti seuraavanlaista toivomusta: käytä vaaleansinistä taustaväriä ja ihan mitä vaan tekstin väriä. Vaikka tekstin väri todennäköisimmin on musta, siihen ei pidä luottaa. Kenties joku käyttää pitää pikimustasta taustasta ja valkoisesta tai vaikkapa vaaleansinisestä tekstistä ja on asettanut selaimensa käyttämään niitä. Jos selain sitten tältä pohjalta soveltaa tyylisäännöstöäsi tehden juuri sen, mitä se sanoo, tuloksena on erittäin vaikeasti luettava tai kokonaan lukukelvoton sivu. Jos ehdotat taustan värin, ehdota myös siihen sopiva tekstin väri, tässä tapauksessa musta. Periaatteessa on myös mahdollista, että käyttäjän selain oletusarvoisesti käyttää jotain taustakuviota. Siihenkin sinun on syytä varautua. Kun kerran ehdotat tekstin väriä, niin velvollisuutesi on tehdä kaikki voitava taustankin suhteen. Yksinkertaisimmin tämä tapahtuu ehdottamalla, ettei selain käytä taustakuvaa lainkaan; toinen vaihtoehto olisi tehdä tekstin värille sopiva taustakuvio.

Huomaa, että jos selaimesta on kuvien automaattilataus kytkettynä pois, se ei lataa eikä käytä taustakuviakaan vaan taustaväriä. Jos taas automaattilataus on toiminnassa, selain aluksi käyttää taustaväriä ja vaihtaa sen taustakuvaksi myöhemmin, kenties niin nopeasti, ettei käyttäjä ehdi huomata taustaväriä lainkaan.

Seuraava tyylisäännöstö olisi siis paljon luotettavampi:

body {background : #cff none; color : #000;}

Linkit mutkistavat vielä asioita. Yleisimmissä selaimissa on oletusarvona näyttää linkkitekstit violetilla tai sinisellä sen mukaan, onko linkki "käyty" vai "käymätön" eli onko kyseinen käyttäjä hiljattain seurannut linkkiä vai ei. Tämä on sivujen käytettävyyttä aivan olennaisesti parantava seikka, jota ei pidä mennä pilaamaan! Toisaalta linkkien väreihin pätee sama kuin tekstin väriin: et voi tietää, mitä värejä selain käyttää. Jos siis ehdotat taustan ja tekstin väriä, on syytä ehdottaa myös linkkien värejä. Muutenhan voi käydä niin, että linkit eivät lainkaan erotu normaalitekstistä - tai ovat lukukelvottomia taustavärin takia. Yleensä on syytä tällöin käyttää selainten tyypillisiä oletusarvoja. (Kuuluisan artikkelin Top Ten Mistakes in Web Design mukaan 8. virhe on Non-Standard Link Colors.) Tämä tietysti asettaa omat rajoituksensa taustan ja tekstin värin valitsemiselle; käytännössä taustan on yleensä syytä olla vaalea ja tekstin värin lähellä mustaa.

Kun vielä otetaan huomioon eräät linkkeihin liittyvät seikat, päädytään seuraavaantapaiseen tyylisäännöstöön:

body {background : #cff none; color : #000;}
a:link    { color : #009; background : transparent none; }
a:visited { color : #609; background : transparent none; }
a:active  { color : #f00; background : transparent none; }
a:hover   { color : #933; background : #eee none; }

Selaimet sitten saattavat soveltaa tätä kokonaan tai osittain. Esim. Netscape 4 ja Opera 3.6 eivät tue kahta viimeksi esitettyä sääntöä, joka itse asiassa kuuluu CSS2:een. Kumpikaan ei muuta linkin väriä, kun kursori viedään sen päälle, oli tyylisäännöstö käytössä tai ei. "Aktiivisen" linkin käsitettä ei tuossa vanhassa Operan versiossa ole lainkaan, ja Netscape 4 taas käyttää kiinteästi punaista väriä "aktiivisille" linkeille. Mutta dokumentin tekijän on silti syytä kirjoittaa tyylisäännöstönsä edellä kuvatun tapaisesti; muutoin hän voi sotkea asioita niin, että selain, joka normaalisti käyttäisi esim. erityistä väriä kursorin ollessa linkin kohdalla, menettää tämän ominaisuutensa.

Tyylien käytön tekniikkaa

Seuraavassa on ehdotus menettelytavoiksi, jos haluat käyttää tyylisäännöstöjä. Olen laatinut englanninkielisen, kehyksiä käyttävän sivun, joka ehkä auttaa soveltamaan näitä menettelytapoja.

Aluksi kannattaa tutustua johonkin edellä esitettyä täydentävään, CSS:n perusasioita selittävään tai niihin johdattavaan juttuun kuten seuraaviin:

Lukemisessa on ehkä pientä apua jutustani CSS-termejä suomeksi ja englanniksi, jossa on myös lyhyitä suomenkielisiä määritelmiä keskeisimmille CSS1:n käsitteille.

Kun sitten halutaan käyttää tyylisäännöstöjä johonkin nimenomaiseen tarkoitukseen, kannattaa toimia näin:

  1. Kirjoita juttu (HTML-dokumentti) hyvien rakenneperiaatteiden mukaisesti, murehtimatta vielä esitysmuotoa. Huolehdi siitä, että juttu "toimii" hyvin ilman tyylisäännöstöjä. CSS:llä voi tehdä hyvästä paremman, mutta ei huonosta hyvää.
  2. Mieti, millaisia esitysasun parannuksia haluaisit tehdä. Usein herätteen antaa jokin yksityiskohta, jossa tavallisimmat selaimet esittävät jutun vähän rumasti tai tylsästi. Tai sitten sinulla ehkä on selvä mielikuva siitä, millainen esitysasu olisi paras. Tutki sitten esim. WDG:n CSS Properties -aineistoa nähdäksesi, mikä on periaatteessa mahdollista ja miten se periaatteessa tehdään. Epäselvissä tilanteissa lue virallisia CSS1:n ja CSS2:n spesifikaatioita. Vaikka CSS2 on suurimmaksi osaksi toteuttamatta, sen spesifikaatio voi olla hyödyksi, koska se sisältää monista peruskäsitteistä tarkemman kuvauksen kuin CSS1-spesifikaatio.
  3. Tutki, mikä käytännössä toimii toteutuksissa. Tässä on erittäin suureksi avuksi Eric Meyerin Master Compatibility Chart. Huomaa, että tuen puuttuminen ("N" kyseisessä taulukossa) ei ole ollenkaan niin vakavaa kuin toteutuksen bugisuus ("B") on! Voit myös käyttää sivustoa CSS1 Test Suite testataksesi eri CSS-piirteiden toimivuutta käyttämilläsi selaimilla.
  4. Jos päädyt siihen, että CSS sopii tarkoituksiisi, kirjoita tyylisäännöstö ja liitä se juttuusi.
  5. Tarkista tyylisäännöstösi CSSCheckillä. On käytännöllisesti katsoen varmaa, että teet virheitä kirjoittaessasi tyylisäännöstön - jokainen tekee.
  6. Tarkista HTML-dokumenttisi validaattorilla. Teit sen tietysti jo 1. kohdassa, mutta tee se uudestaan, vaikka HTML-dokumenttiin tekemäsi muutokset tuntuisivatkin pieniltä.
  7. Katso, miltä se näyttää tärkeimmillä selaimilla. Lähinnä on syytä katsoa toimivuus Internet Explorer 4:llä, Netscape 4:llä ja Opera 3.60:lla. Hyvä olisi katsoa myös toimimattomuus IE 3:lla, mutta käytännössä IE 3:n huomioon ottaminen yleensä tekee CSS:n käytön mahdottomaksi tai hyödyttömäksi - niin paljon siinä on bugeja.

Kun sitten menee kuitenkin pieleen, seuraavista vinkeistä voi olla apua:

Ominaisuuksien "riippumaton periytyminen" CSS:ssä

Yksi tavallisimmista virheistä tyylisääntöjen käytössä on se, että oletetaan, että selain joko soveltaa tyylisäännöstöä sellaisenaan tai jättää sen kokonaan huomiotta. No, ehkä vielä tavallisempi erehdys on ajatella, että ainakin "tarpeeksi uusi" selain aina soveltaa dokumentin kirjoittajan tekemää tyylisäännöstöä! Mutta sellaiseenhan emme sortune?

Tarkastellaanpa seuraavaa yksinkertaista tyylisäännöstöä:

strong { color : #300; }

Tämähän on varmaankin vaaratonta? Siinähän vain ehdotetaan tavallisesta mustasta hiukan poikkeavaa väriä (hyvin tumman ruskeaa) strong-elementille.

Mutta emme voi tietää taustaväriä. Entäpä jos käyttäjä on selaimessaan asettanut tai selaimessa muuten vaan on vaikkapa musta taustaväri ja valkea teksti? Menee huonosti.

No, korjataanpa asia lisäämällä seuraava:

body { background : #fff none; color : #000; } 

Nyt sitten joko käyttäjän selain käyttää omia asetuksiaan ohittaen kaikki tyyliehdotuksemme tai näyttää valkealla taustalla normaalin tekstin mustalla ja vahvasti korostetun tekstin tummanruskealla. Vai vieläkö jäi sudenkuoppa?

Toki. Ensinnäkin unohtui, että linkkien väreille on syytä tehdä jotain. Mustaa taustaa rakastava käyttäjämme toki on fiksuna henkilönä asettanut selaimen käyttämään siihen sopivia linkkien värejä, koska normaalit oletusarvot kuten tummansininen eivät kovin hyvin erotu mustaa taustaa vasten. Ja nyt kun emme ole linkeistä mitään sanoneet, selain käyttää omia asetuksiaan. Lisäksi meidän on huolehdittava taustakuvasta. Mutta näitä asioita käsiteltiin jo edellä. Tämä oli vain muistutus seuraavasta:

Jos ehdotat joitakin värejä ja taustoja, laadi kokonaisehdotus, joka kattaa niin taustavärin ja -kuvion kuin tekstin ja erilaisten linkkienkin värit.

Mutta ei tämä riitä. Katsotaanpa miten käy esimerkkitapauksessamme, vaikka olisimme täydentäneet body-elementtiin ja linkkeihin liittyviä tyylisääntöjä aiemmin esitettyyn tapaan. Kun dokumentissa on strong-elementti, niin selain toimii, tai sen ainakin pitäisi toimia CSS:n määrittelyyn sisältyvän ns. kaskadin (cascade) mukaan, seuraavasti:

  1. Selain katsoo, mitä tyylisääntöjä ylipäänsä on olemassa, jotka koskevat strong-elementtejä. Tässä tapauksessa on meidän sääntömme strong color : #300; } ja selaimen oletusarvoiset säännöt, jotka ovat meille tuntemattomat, mutta jotka saattaisivat olla seuraavat (CSS2-spesifikaation liitteessä A ehdotetun esimerkin mukaiset):
    STRONG { font-weight: bolder }
    STRONG { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }

    Jälkimmäinen koskee vain äänimuodossa, esim puhesyntetisaattorilla, tapahtuvaa dokumentin esittämistä.

  2. Koska tässä tapauksessa säännöt koskevat eri ominaisuuksia, mitään valintatilannetta ei ole, vaan selain soveltaa kaikkia. Jos sen sijaan olisimme ehdottaneet font-weight-ominaisuudelle muuta arvoa kuin bolder, se olisi "voittanut" selaimen oletusarvon, samoin kuin mahdollisessa käyttäjän tyylisäännöstössä olevan asetuksen samalle ominaisuudelle, ellei siinä ole lisämääritettä !important.
  3. Ne ominaisuudet, joille ei lainkaan määräydy arvoa edellä sanotun perusteella, määräytyvät "periytymisen" (inheritance) kautta: jos elementille ei ole asetettu jonkin ominaisuuden, esim. color, arvoa, se saa tämän ominaisuuden siltä elementiltä, jonka sisällä se välittömästi on. Tämä taas on ehkä perinyt sen "ylemmältään" jne. Jos siis dokumentissa on vaikkapa
    <body><p><strong>Hei</strong></p></body>
    niin strong-elementti "perisi" p-elementiltä ominaisuuksia, jotka taas voisivat "periytyä" body-elementiltä. Täten yleensä esimerkiksi strong-elementti saa saman taustavärin kuin dokumentti kokonaisuutena, ja jos olimme kirjoittaneet asianmukaiset säännöt body-elementille, kaikki on hyvin. Yleensä.

Mutta entäpä jos käyttäjän tyylisäännöstössä on
strong {color : #ffc ; background : #000 none; }
eli keltaista mustalla. Nyt strong-elementti saakin background-ominaisuuden käyttäjän tyylisäännöstöstä. Ja koska dokumentin tekijän tyyliehdotukset normaalisti voittavat käyttäjän omat, niin color-ominaisuus tulee tekijän tyylisäännöstöstä. Ei mene hyvin, kun on tummanruskeaa mustalla.

Kenen syy? Käyttäjän tyylisäännöstö on tältä osin sisäisesti melko johdonmukainen, joten syy on dokumentin tekijässä, joka ei ollut ottanut huomioon tätä:

Myös yksittäisten elementtien eikä vain koko dokumentin osalta pätee: taustaväri, taustakuva ja tekstin väri on syytä ehdottaa aina yhdessä. Ei pidä luottaa siihen, että taustaväri on jo asetettu koko dokumentille.

Linkkien väritkin pitäisi ottaa huomioon - tekijän tyylisäännöstössä silloin kun elementin sisällä voi olla linkkejä, käyttäjän tyylisäännöstössä aina. (Käyttäjähän ei voi tietää, onko esim. strong-elementtien sisällä linkkielementtejä tai kääntäen.) Hankalaa? Kyllä. Ja toistaiseksi on melko harvinaista, että käyttäjillä on omia tyylisäännöstöjä. Mutta ei kannata tehdä "moderneilla välineillä" hienoja sivuja, jotka menevät rikki, kun niitä katsellaan oikeasti moderneilla välineillä ja tavoilla.

Puhe ominaisuuksien periytymisestä on toki kaukaa haettu ja monin tavoin harhaanjohtavakin analogia. Mutta se on joissakin suhteissa ehkä valaiseva. Etenkin niille, jotka tuntevat genetiikkaa, sillä voidaan sanoa: CSS:ssä ominaisuudet periytyvät toisistaan riippumatta hiukan niinkuin geenit yksinkertaisimmassa tapauksessa. Esimerkiksi elementin tekstin väri (color-ominaisuus) tällöin vastaa yhtä geeniä, ja väri tulee joko tekijän tai käyttäjän tyylisäännöstöstä (tai selaimen oletusarvoista), ei niiden sekoituksena. Ja ennen muuta: se "periytyy" täysin riippumatta esimerkiksi background-ominaisuuden "periytymisestä". Se, että tyylisääntöjä voidaan niputtaa tyyliin
strong {color : #ffc ; background : #000 none; }
on siis siinä mielessä harhaanjohtavaa, että aaltosuluissa olevat asetukset eivät suinkaan käyttäydy jakamattomana kokonaisuutena.

CSS2 (ja CSS3): positiointi ym.

CSS2 on CSS1:tä paljon laajempi tyylisäännöstökieli, jonka toteutus selaimissa on vielä erittäin puutteellinen. Lisäksi kokemusta ja oppaita sen käytöstä ei vielä ole kertynyt paljoakaan. Suurin osa asioista on opiskeltava suoraan CSS2-spesifikaatiosta, joka on varsin laaja ja paikoin raskaslukuinen. Ja hommat toimivat tai sitten eivät, yleensä eivät. CSS2:n osalta ei ole koottu sellaisia selaintukitiivistelmiä tai bugilistoja kuin CSS1:stä. CSS Pointers Menu toki sisältää jotain CSS2:eenkin liittyvää.

Hyvä, havainnollinen johdanto yhteen CSS2:n alueeseen, positiointiin eli elementtien sijoitteluun sivulla, on Stephanos Piperogloun CSS Positioning, Part I. Jatkolukemisiksi sopivat sitten saman tekijän CSS Positioning, Part II sekä CSS Floats, Part I ja CSS Floats, Part II.

Muita mainitsemisen arvoisia CSS2:n piirteitä ovat:

Jos käytät CSS2:ta, kannattaa ehdottomasti tarkistaa tyylisäännöstö W3C:n CSS2 Validation Servicellä.

CSS3 on luonnosasteella oleva kehitelmä, joka laajentaisi CSS:ää modulaarisesti: interaktiivisuutta, skaalautuvaa vektorigrafiikkaa, "kansainvälisyyttä", monipalstaisuutta, ...

Lisätietoja tyyleistä löytyy sivun Keskeisiä CSS-linkkejä kautta.

Loppumuistutus tyyleistä

Tyylisäännöstöjä kannattaa käyttää hillitysti ja harkitusti ja vasta kun sisältö ja rakenne on kunnossa. On parempi saada juttu ylipäänsä Webiin tällä viikolla ja esitysasu hiukan tyylikkäämmäksi ensi kuussa kuin toisinpäin. Jos jotain jää tekemättä, olkoon se tyyli, ei sisältö!

Tyyli ei saa olla sisällön välittymisen este millään tavoin: tyyliehdotuksilla pyritään vain parantamaan esitysasua. Jos sivu ei toimi silloin, kun tyyliehdotukset eivät toteudu, sivu on rikki.