Tämä lyhyt ohje kertoo, miten veppisivun (Web-sivun) ulkoasua voi säädellä niin sanotuilla tyylisäännöstöillä, style sheets. Pääpaino on yksinkertaisilla esimerkeillä. Esimerkeistä selostetaan pääkohdat; lopussa on linkkejä lisätietoihin, joista asiat selviävät tarkemmin.
Oletetaan, että sinulla on veppisivu, joka on tehty käyttäen
yksinkertaista HTML-merkkausta, esimerkiksi sellaista, joka kuvataan
Veppisivun tekemisen pikaohjeessa. Olet siis merkannut
otsikot otsikoiksi (esim.
pääotsikon h1-elementeiksi)
ja kappaleet kappaleiksi (p-elementeiksi)
jne.
Jos näin ei ole vaan olet esimerkiksi tehnyt otsikot käyttäen
font-merkkausta, on parasta, että ensin korjaat merkkauksen.
Tyylisäännöstöt ovat kuin pinnoite tai maali, eikä lahopuuta kannata
maalata.
Selaimet tyypillisesti esittävät otsikot, varsinkin ylimmäntasoiset, varsin isoa kirjasinkokoa käyttäen. Tämä ei ehkä ole kovin tyylikästä etenkään pienillä sivuilla, joilla on ehkä vain 1. ja 2. tason otsikoita. Seuraavanlainen tyylisäännöstö sisältää ehdotuksen, jonka mukaan 1. tason otsikon kirjasinkoon tulisi olla vain 40 % suurempi ja 2. tason otsikon 10 % suurempi kuin sivun peruskirjasinkoon.
h1 { font-size: 140%; }
h2 { font-size: 110%; }Tässä käytetään yksinkertaista tyylisäännön perusmuotoa.
Ensimmäisessä säännössä h1 kertoo, mihin HTML-elementteihin
sääntö kohdistuu. Sitä seuraa aaltosulkeissa oleva rakenne, joka on
muotoa ominaisuus:arvo. Huomaa, että arvo
Minnekö tämä pitää kirjoittaa? Helpointa on kirjoittaa se
erilliseen tiedostoon, jonka sijoitat samaan hakemistoon kuin
HTML-tiedostosi. Tiedoston nimen loppuosan kannattaa olla
.css eli nimi voisi olla esimerkiksi
pikkusivu.css. HTML-tiedostoosi sitten lisäät
viittauksen tyylisäännöstötiedostoon, ja se on seuraavanmuotoinen:
<link rel="stylesheet" type="text/css"
title="tyylinnimi" href="tiedostonnimi">Esimerkki:
<link rel="stylesheet" type="text/css"
title="pikkusivun perustyyli" href="pikkusivu.css">Kyseinen link-elementti voidaan kirjoittaa
esimerkiksi heti title-elementin jälkeen.
Tyylin nimi, joka siis annetaan title-määritteessä,
on riippumaton tyylitiedoston nimestä, ja sen on hyvä olla kuvaileva
ja selkeä. Tyylin nimi näet saattaa näkyä käyttäjälle, kun hän valitsee,
minkä tyylin mukaan hän haluaa katsella sivua. Seuraava kuva
havainnollistaa tätä: siinä on erään selaimen (Netscape 7)
käyttäjä tekemässä kyseistä valintaa eräässä tilanteessa.
Tyylisäännöstön voi myös upottaa HTML-tiedoston sisään
(style-elementillä). Edellä kuvattu menettely on kuitenkin
siistimpi ja käytännöllisempi: voit käyttää samaa tyylisäännöstöä
eri sivuille, kunhan vain kirjoitat HTML-dokumenttiin sopivan
link-elementin. Tällöin tyylisäännöstö on myös
joustavasti täydennettävissä tai muokattavissa.
Kirjasinlajin (fontin) muuttaminen on helppoa. Esimerkiksi seuraava muuttaisi kaiken tekstin kirjasinlajiksi ensisijaisesti Verdanan, toissijaisesti (jos käyttäjän koneessa ei ole Verdanaa) Arialin, ja tämänkin puuttuessa sellaisen kirjasinlajin, jota käyttäjän selain on asetettu käyttämään, kun siltä pyydetään yleisesti pääteviivatonta eli groteskia (englanniksi sans-serif) kirjasinlajia.
body { font-family: Verdana, Arial, sans-serif; }Elementinnimi body tarkoittaa HTML-sivun koko
näkyvää sisältöä.
Voisit vaihtoehtoisesti ehdottaa, että dokumentissa on muutoin kirjasinlajina Times New Roman, joka on tavallinen painotekstien "leipätekstin" lajina, mutta otsikoissa Verdana, Arial tai muu groteski kirjasinlaji, jollainen usein sopii otsikoihin paremmin:
body { font-family: "Times New Roman", serif; }
h1, h2, h3, h4, h5, h6 { font-family: Verdana, Arial, sans-serif; }Useimmat selaimet esittävät otsikot oletusarvoisesti lihavoituina. Tämä on helppo estää:
h1, h2, h3, h4, h5, h6 { font-weight: normal; }Useimmat selaimet esittävät kappaleet (p-elementit)
niin, että niiden välissä on pystysuunnassa
melko paljon tyhjää tilaa, noin yhden rivin verran. Jos halutaan
esitysasu, joka muistuttaa "kirjallista tyyliä", voidaan
menetellä näin:
p { margin-top: 0; margin-bottom: 0; }
p { text-indent: 1.5em; }
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p { text-indent: 0; }Tämä merkitsee, että kappaleiden välissä ei ole tyhjää
tilaa mutta kunkin kappaleen ensimmäinen rivi
on sisennetty, paitsi jos
kappale välittömästi seuraa otsikkoelementtiä.
Sisennyksen määrä on esimerkissämme puolitoista em-yksikköä.
Kyseinen yksikkö tarkoittaa ympäröivän elementin fontin kokoa, joka
karkeasti sanoen vastaa ison M-kirjaimen leveyttä.
Toisentyyppinen muotoilu, jota kappaleille usein halutaan tehdä, on enimmäisleveyden asettaminen. Muutoinhan kappale leviää selainikkunan levyiseksi. Yleensä käyttäjä osannee kaventaa ikkunaa tarvittaessa. Mutta enimmäisleveyden voi asettaa seuraavaan tapaan:
p { max-width: 35em; }Värit ovat ehkä se ulkoasun piirre, johon useimmat haluaisivat ensiksi koskea. Asia on säästetty tänne asti muun muassa siksi, että värien säätely oikein on yleensä työläämpää kuin edellä kuvattujen piirteiden.
Jos haluat esimerkiksi asettaa taustavärin, on syytä asettaa aina myös tekstin väri. Muutenhan voi käydä niin, että jossakin selaimessa tekstin väri on lähes sama kuin taustavärisi.
Periaatteessa tästä taas seuraa, että myös taustakuvasta on syytä sanoa jotain, vaikkapa sitten vain se, että taustakuvaa ei käytetä. Muutenhan taustakuvana voisi olla jotain, jota vasten teksti ei ole luettavissa.
Tekstin värin asettaminen edellyttää yleisessä tapauksessa myös linkkien värien asettamista. Katsotaan kuitenkin aluksi yksinkertainen tapaus: otsikon tekstin ja taustan värin asettaminen. Yleensähän otsikoissa ei ole linkkejä, joten asia hoituu melko yksinkertaisesti. Esimerkki:
h3 { color: #400000; background: #ffffcc none; }Tämä asettaa 3. tason otsikon tekstille tietyn värin (tässä tummanruskea) ja taustalle toisen värin (tässä keltainen) sekä sanoo, että taustakuvaa ei ole.
Vihje: Käytä hillittyjä värejä. Isojen pintojen tai tekstimassojen voimakkaat värit häiritsevät lukemista. Moni aloitteleva värien käyttäjä tekee tässä virheitä.
Jos asetat normaalin tekstin ja taustan värin, on varsin tärkeää on asettaa myös linkkien värit, joita on syytä olla neljä erilaista: "uuden" (vierailemattoman) linkin väri, "vanhan" (vieraillun) linkkien väri, kursorin kohdalla olevan linkin väri ja "aktiivisen" linkin väri. Näistä kahden ensimmäisen on syytä yleensä olla lähellä selainten tyypillisiä oletusarvoja: sininen ja violetti.
Värit voidaan ilmaista eri tavoin, muutamat jopa nimillä (esim. black 'musta'), mutta parasta on käyttää erityisiä koodeja. Syynä tähän on, että värit yleensä valitaan käyttäen sopivaa ohjelmaa, joka myös kertoo tarvittavat koodit. Eräs hyvä väline tähän tarkoitukseen on Colorpicker II (joka tosin toimii vain, jos selaimessa on Javascript-tuki käytössä). Koodien sisäisestä rakenteesta ei tällöin tarvitse tietää mitään, mutta mainittakoon, että koodi kertoo määrätavalla sen, miten väri muodostuu punaisen, vihreän ja sinisen valon summana.
Seuraava esimerkki on eräs mahdollinen väriasetusten
kokonaisuus. Ominaisuuden
background arvossa sana transparent tarkoittaa,
että tausta on läpinäkyvä eli elementin tausta on sama kuin
sen elementin, jonka sisällä se on.
Sana none tarkoittaa, että taustakuvaa ei ole.
Jos taustakuva halutaan, kirjoitetaan tämän
sanan tilalle url(tiedostonnimi),
missä tiedostonnimi on sellaisen kuvatiedoston nimi,
joka sijaitsee samassa hakemistossa kuin HTML-sivu.
body { background: #ffffee none; color: #000000; }
a:link { color: #003366; background: transparent; }
a:visited { color: #660099; background: transparent; }
a:link:hover, a:visited:hover
{ color: #cc3333; background: transparent; }
a:active { color: #ff0000; background: transparent; }Yksityiskohtaista tietoa tyylisäännöstöistä suomeksi sisältää Tommi Lahtosen ja Petri Heinosen aineisto Tyylilomakkeet, joka siis käyttää eri nimitystä tyylisäännöstöstä.
Web-julkaisemisen opas sisältää luvun Värikkyyttä: tyylisäännöstöt (style sheets, CSS). Se on melko raskaslukuinen mutta sisältää hyödyllisiä varoituksia ja ohjaa kriittisyyteen tyylisäännöstöjen käytössä.
Standardin asemassa on Cascading Style Sheets, level 2 eli CSS2 Specification.
On tärkeää muistaa, että tyylisäännöstöt on tarkoitettu sivun ulkoasua koskeviksi ehdotuksiksi. Niillä ei voi määrätä eikä pakottaa mitään. On useita syitä, joiden takia ehdotukset voivat jäädä toteutumatta: selain ei tue tyylisäännöstöjä, tuessa on puutteita tai virheitä, tuki on otettu pois käytöstä tai käyttäjä on määrännyt selaimen noudattamaan käyttäjän tyylisäännöstöä.