Tyylimäärittelyt (CSS)

Tyylimäärittelyillä, englanniksi Cascading Style Sheets, CSS, tarkoitetaan keinoja, joilla voidaan vaikuttaa sivuston ulkoasuun. Suomeksi näistä käytetään usein myös nimitystä tyyliehdotukset, koska täyttä varmuutta siitä, voiko käytetty selain näyttää muotoilut oikein, ei voida saada. Käyttäjältä voi esimerkiksi puuttua määritelty fontti koneeltaan täysin, jolloin sen paikalla tulee käyttää jotain muuta.

Tyylejä voi käyttää hyvin monipuolisesti. Niillä voidaan vaikuttaa useisiin asioihin sivuston ulkoasusta, pelkkien fontti- ja värimääritysten lisäksi niillä voidaan toteuttaa muun muassa useampisarakkeisia sivustoja ja jopa valikkorakenteitakin.

Jotta tyyleistä saadaan kaikki hyöty irti, ne kannattaa määritellä omaan tiedostoonsa, joka sitten linkitetään jokaiselle sivulle. Tällöin ei tarvitse tehdä määritelmiä joka sivulle erikseen. Tyylitiedosto linkitetään seuraavalla otsikko-osaan (head) liitettävällä rivillä:

Tässä siis linkitetään tyyli.css-niminen tiedosto sivulle. Tiedosto on ihan tavallinen tekstitiedosto niinkuin itse www-sivutkin ovat.

Ennekuin aloitat tyylien määrittelmisen, luo tyhjä tiedosto, johon määrittelyt tulevat.

BF:ssä on oma tyylieditorinsa, jonka saa näkyviin seuraavasta nappulasta CSS-välilehdeltä:

Kuvan takaa saat näkyville seuraanlaisen ikkunan:

Tämä toimii siis seuraavasti:

1. Aluksi valitaan kohde, mitä halutaan muokata. Tässä on otettu kohteeksi body. Koska kaikki tagit täytyy kirjoittaa body-tagien sisälle, voidaan tässä määrittää koko dokumentin fontti
2. Jokaisen ominaisuuden määrittelyn jälkeen täytyy painaa lisää-nappulaa, jotta ominaisuus tulisi mukaan määrittelyyn. Tässä on siis määritelty seuraavat ominaisuudet:
1. font-family, joka kertoo, mitä fontteja halutaan käyttää. Jos ensimmäistä ei löydy, käytetään seuraavaa ja lopuksi jokin yleinen päätteetön fontti (sans serif), mikä nyt on selaimeen määritelty.
2. Reunuksen tyyli, tässä kohdin solid
3. Reunuksen väri
4. Reunuksen leveys pikseleinä.

Tällä ominaisuudella voidaan luoda myös omia nimettyjä tyylejä, joilla voi tehdä erilaisia korostuksia.

Esimerkkikuvassa hieman esimerkkejä siitä, miten tässä sivustossa on eri asioita määritelty. Huomaa taulukon reunaviivoitus, jossa samat määritteet on merkitty kolmelle eri taulukkoelementille. Collapsen ideana on poistaa välit eri elementtien välistä.

Tyylien ominaisuuksia voi luonnollisesti itsekin kirjoittaa ihan suoraan tuohon tiedostoon ilman mitään erillistä tyylieditoria.

Hieman lisää virityksiä muualta

Osoitteessa http://users.metropolia.fi/~kuivi/TiPer/verkkojulkaisu/tyylit/ löytyy pieni esimerkki siitä, miten voi toteuttaa valikon vasempaan laitaan sivua ja otsikon ylös. Huomaa, että lopun linkit eivät välttämättä enää toimi.

http://www.456bereastreet.com/lab/developing_with_web_standards/fi/ taas sisältää hyviä perusteluja sille, miksi näitä tekniikoita on tärkeää käyttää. Sivustolta löytyy myös hyvä kädestä pitäen opastava esimerkki siitä, miten toteutetaan kaksisarakkeinen www-sivusto ylä- ja alatunnisteella. Sen osoite on seuraava: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Vuokko Vanhala opastaa myöskin useisiin CSS-kikkoihin, kuten siihen, miten toteutetaan CSS:llä valikko jossa on alavalikko: http://myy.haaga-helia.fi/~vanvu/www/css.htm

Jukka Korpelalta on myös tyylimäärittelyihin liittävää dokumentaatiota: http://www.cs.tut.fi/~jkorpela/webjulk/2.5.html