8. CSS

"CSS:n merkitys kasvaa kahdesta syystä. Se tarjoaa web-sivujen tekijöille joustavan mahdollisuuden vaikuttaa sivujen ulkoasuun. Itse asiassa CSS:n jonkinasteinen oppiminen on sivuntekijälle lähes välttämätöntä, ja mitä vaikuttavampi ulkoasu halutaan, sitä tarkemmin pitää tuntea CSS:n mahdollisuudet ja niiden käyttö. Toiseksi CSS tarjoaa yksinkertaisen tavan ilmoittaa XML-tiedoston esitysmuoto, ja tämän merkitys kasvaa sitä mukaa kuin XML käytännössä yleistyy." (Korpela 2003, IX)

Käytetään esimerkkinä edellistä XML dokumenttia.

Taitto
Laitetaan koko tekstin tausta harmaaksi tekemällä määritykset koskien juurielementtiaä "dokumentti". Laitetaan vielä tekstin väriksi musta.

dokumentti { background: gray; 
                        color: black; }

Lopputulos tässä alla.


Kuten huomaat, teksti on pötkössä. Näin siksi, että XML-dokumenteissa on alkuarvona inline. Siksi lohkoesitys on muutettava muotoon block, jolloin jokainen elementti on omalla rivillään.

dokumentti { background: gray; 
                        color: black;
                       }
nimi, sposti, pituus { display: block;
                       }

Näyttää siis tältä:


Elementille dokumentti ei vielä ole määritelty kokoa eikä kehystä. Laitetaan siis kehykset mukaan ja tehdään vähän varjomaista vaikutelmaa.

dokumentti { background: gray; 
             color: black;
             width: 300px;
             border-style: solid outset outset solid;
             padding: 0em 0em 0em 0em;
	     border-width: thin 0.2em 0.2em thin; 
          }

nimi, sposti, pituus {
             display: block; }

Lopputulos tässä alla.


Tekstin muotoilu

Kirjasinlaji voidaan määritellä font-family ominaisuudella.

nimi  {font-family: "Trebuchet MS",  Arial, sans-serif; }

Fontin koko voidaan asettaa monella eri tapaa. Tässä pari esimerkkiä:

nimi { font-size: 110%; }
sposti {f ont-size:  medium; } 
pituus { font-size: 12pt; }

nimi { font-size: 1.2em; }
sposti {f ont-size:  large; } 
pituus { font-size: 12px; }

Fontin lihavuutta on css:ssä olemassa peräti yhdeksän kappaletta ja ne on numeroitu 100:sta 900:aan sadan välein. Tässä esimerkkiä.

nimi { font-weight: 300; }

Tehtävä 8.
Muokkaa css:ää, jotta lopputulos olisi kutakuinkin tällainen.