Tyylittelyä

Timo Kankare

2008-07-16

Sivut näyttävät vähän tylsiltä, jos niissä käyttää pelkästään perus-HTML:ää. Tämä on kuvaus siitä, miten yritän saada sivuihin hieman väriä.

Nykyisen käytännön mukaisesti HTML määrittelee sivun sisällön ja rakenteen. Tyylisivut (CSS) määrittelevät ulkonäön. Oheiset kuvat esittävät sivua ilman tyylimäärittelyjä ja tyylimäärittelyn kanssa.

Ilman tyylimäärittelyjä

Tyylimäärittelyjen kera

Tyylisivun käyttö

Tyylisivun saa käyttöön lisäämällä HTML-sivun head-elementtiin link-elementin, joka osoittaa tyylisivuun, esim:

<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" title="Oletustyyli"/>

Tässä

rel ja type määrittevät, että kyseessä on tyylisivu,
href osoittaa tyylisivun sijainnin ja
media="screen" määrittelee tyylisivun käytettäväksi vain, jos sitä katsotaan ruudulta.

Sivun rakenne

Ennen kuin tyylejä voi sivulle järkevästi määritellä on hyvä tarkentaa sivujen rakennetta. HTML:n elementit määrittelevät jo osaltaa sivun rakennetta ja sitä, mitä kunkin elementin sisältö tarkoittaa. Tämä ei kuitenkaan välttämättä riitä.

Lisätarkennuksia sivuille voi tehdä div- ja span-elementeillä. Näistä ensimmäisellä merkitään lohkoja ja jälkimmäisellä lohkon sisällä olevia osia. Näillä voidaan tarkentaa sivun rakennetta, mutta muuten ne eivät kerro sisältämistään osista mitään uutta.

Tarkennusta elementtien merkitykseen voi tehdä id- ja class-attribuuteilla. id määrittelee elementille yksilöllisen tunnisteen ja class yhden tai useampia luokitteluja. Kummankin avulla voidaan tyylisivuista viitata elementteihin.

Sivut koostuvat pääasiassa (karkeasti ottaen)

ylätunnisteesta tai otsikosta (header),
sisällöstä (content) ja
alatunnisteesta (footer).

Lisäksi voisi olla muitakin osia, kuten

sidebar,
breadcrumbs,
yms.

Näiden mukaisesti voin siis määritellä sivulleni sopivat div-lohkot:

<body>
<div id="header">
    ...
</div>
<div id="content">
    <div id="introduction">
        ...
    </div>
    <div id="blog">
        <div class="blogentry">
            ...
        </div>
        ...
    </div>
</div>
<div id="footer">
</div>
</body>

Sivun asettelu

Kun sivulle on määritelty sopivat lohkot, voin määritellä, miten lohkot asettuvat sivullani.

body {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
}

#header h1 {
    text-align: center;
}

#content {
    max-width: 60em;
    margin: 3em auto 3em auto;
}

#footer {
    height: 2em;
}

Ylätunniste määritellään koko sivun levyiseksi ja otsikko keskitetään.

Sisältö määritellään maksimissaan 60em:n levyiseksi, jotta siitä ei tulisi liian leveä. Ylä- ja alapuolelle jätetään hieman tyhjää tilaa. Marginaalit on määritelty automaattisesti määräytyviksi, jolloin koko sisältö keskitetään.

Alatunnistetta sivulla ei vielä ole, joten sen tarkempi määrittelmeminen jätettäköön tuonnemmaksi.

Hieman väljyyttä sisällölle saa seuraavalla määrittelyllä:

#content {
    padding: 1em 2em 1em 2em;
}

em-mittoja käyttämällä sivusta saadaa ns. elastinen, jolloin sivu muotoutuu käytettävän fonttikoon mukaisesti.

Väriä ja reunoja

Sivun taustasta tehdään syvän sininen. Otsikon pohjasta musta ja alatunnisteen taustasta tumman vihreä. Sisällön tausta olkoon valkoinen.

body {
    background-color: #006;
}

#header {
    background-color: #000;
    color: #fff;
}

#content {
    background-color: #fff;
    color: #000;
}

#footer {
    background-color: #060;
    color: #fff;
}

Kullekin artikkelille laitetaan reunat, jolloin ne erottuvat toisistaan selkeästi. Samalla määritellään värit. Tämän jälkeen vaakaviivat (hr) voi piilottaa, koska niitä ei enää tarvita.

.blogentry {
    padding: 1em;
    margin: 1em 0 1em 0;
}

.blogentry {
    background-color: #eef;
    color: #222;
    border: 1px solid #000;
}

hr {
    display: none;
}

Kuvat

Kuville on määritelty kuvateksti laittamalla kuva ja teksti div-elementin sisään. Tällöin niitä voi käsitellä yhdessä.

<div class="images">
    <div class="image">
        <img src="...images/tyyliton.png" ... />
        <p>Kuvateksti...</p>
    </div>
    ...
</div>

Kuvien sijoittelemiseksi sivulle on kuvat sijoitettu ylimääräisen div-elementin sisään ja tyylimäärittelyssä on käytetty käytetty display: inline-block -määrittelyä, millä kuvat saadaan samalla "riville". Vaikka inline-block on standardin mukainen, kaikki selaimet eivät sitä välttämättä tue.

.images {
    margin:0.5em auto;
    text-align: center;
    word-spacing: 3em;
}

.images .image {
    display: inline-block;
    word-spacing: normal;
}

.image {
    margin: 0.5em auto;
    text-align: center;
}

Kuville saa yksinkertaiset raamit seuraavasti.

.image img {
    padding: 1px;
    border: 1px solid #000;
}

Fontteja

Fonteiksi kelpaavat toistaiseksi selaimen omat määritykset. Kuvatekstit kuitenkin on määritelty siten, että ne erottuvat muusta tekstistä.

Siinä se

Nyt sivu on hieman fiksumman näköinen. Varmaankin jatkossa kehittelen vielä tyylejä ja jolloin tämäkin sivu saattaa saada taas uuden ilmeen. Olkoon kuitenkin tällä kertaa tällainen.

Testailin näiden sivujen näkymisen Firefox 3:lla. Muilla selaimilla tulos voi olla erilainen.

Ystävällisin terveisin