CSS-tyylitiedostot


CSS - eli Cascading Style Sheet - on menetelmä, jolla HTML-dokumentin ulkoasua voidaan muokata mieleisekseen muuttamalla jo valmiina olevien HTML-elementtien vaikutusta. Normaalisti esimerkiksi tason 1 otsikko (<H1>) näytetään selaimessa 24 pisteen fonttikoolla. Tämä on sinäänsä toimiva ratkaisu, mutta mikäli dokumentti sisältää myös muuta 24 pisteen kokoista tekstiä, ei otsikon erikoisasema tekstissä kuitenkaan erotu millään tavalla. Toisin sanoen pelkkä kirjasinkoon muuttaminen ei ole riittävä tehokeino otsikon erottumiseen muusta tekstistä.

Tyylitidostomäärittelyt tehdään HTML-dokumentin alustusosassa (<head>...</head>) <style>...</style> elementtien sisään. Esimerkiksi, jos halutaan, että tason yksi otsikon taustaväri on punainen, voidaan sanoa

<style>
    H1 {background:red}
<style>
Tämän jälkeen <H1>Tässä on otsikko</H1> näkyy selaimessa

Tässä on punainen otsikko

CCS-määrittelyjen avulla voi vaikuttaa muunmuassa seuraaviin asioihin Mikäli määrittelyt tehdään alkuosassa, koskevat ne koko dokumenttia. Tämä ei kuitenkaan aina ole se mitä halutaan vaan osassa dokumenttia olisi parempi käyttää jotain toista ulkoasua esimerkiksi otsikolle. Tähän on kuitenkin ratkaisu, sillä CSS mahdollistaa myös ominaisuuksien luokittelun. Esimerkiksi elementtiin <H1> voitaisiin luoda kaksi luokkaa yellow ja red, joista luokan yellow käyttö tuottaisi keltaisen taustan ja red punaisen taustan:
<style>
    H1.yellow {background:yellow}
    H1.red {backgroung:red}
</style>
Erilaisten luokkien käyttö sujuu nyt muuttamalla <H1>-elementti muotoon <H1 class="luokan nimi">. Esimerkiksi edellisillä määrittelyillä saadaan aikaan

Tavallinen otsikko

Keltainen otsikko

Punainen otsikko

Käyttämällä erilaisia luokkia saadaan siis aikaan paljon vaihtelua mikäli on tarvetta. Toisaalta taas, HTML-formaatti tukee valmiiksi erilaisten muotoilujen yhdistämistä esimerkisi voidaan kirjoittaa kallistettua italic-tekstiä, tummennettua, tai sitten molempia yhdessä. Tämä saadaan yksinkertaisesti antamalla uusia tyylimäärittelyjä, esimerkiksi edellisessä <i><b>molempia yhdessä</b></i>. Tähän voidaan kuitenkin tehdä muutoksia CSS:n avulla, sillä sen avulla esimerkiksi tekstin ulkoasua voidaan säätää sen mukaan, minkälaiset elementit määräävät sen ulkoasun, esimerkiksi edellä italic, jonka sisällä bold. Näin ollen esimerkiksi määrittelly
<style>
    i b {font-size: 24pt}
</style>
saadaan aikaiksi se, että teksti joka on tarkoitettu italic bold-tyyppiseksi tulee tämän lisäksi kirjasinkoolla 24. Siis edellinen molempia yhdessä-teksti näkyykin muodossa molempia yhdessä.

Seuraavassa on pari esimerkkiä siitä, mihin tyylimäärittelyillä pystyy. Esimerkkinä on pätkä Matematiikan valintakokeesta 1998. Se on tuotettu automaattisesti Latex-koodista TTH-ohjelmalla HTML-dokumentiksi. Koska HTML ei ole niin joustava kaavojen asettelussa kuin Latex/TeX, on tuloksena aikamoinen "virittely" useita sisäkkäisiä taulukoita. Dokumentin alussa on määritelty seuraavaa:

 table.e1 {background:yellow}
 table.e2 {background:green}
 table.e1 sup { font-size: 24pt}
 table.e2 sup { font-style: italic;
                background: yellow;
                font-weight: bold}
Toisin sanoen, <table>-elementtiin on luotu kaksi luokkaa e1 ja e2. Näissä taustan väri on keltainen tai vihreä. Lisäksi on määritelty, että kyseisissä määrittelyissä yläindeksit <sup> näkyvät luokkaa e1 käytettäessa 24 pisteen fontilla ja luokassa e2 italic-tyylillä, tausta on keltainen ja merkki on vahvempi (bold). Ylempi taulukko käyttää ensimmäistä ja toinen jälkimmäistä määrittelyä:
 
f¢(x) = 
D(x-2)·(2x+1)-(x-2)·D(2x+1)
(2x+1)2
= 
2x+1-2x+4
(2x+1)2		 =  5
(2x+1)2		 .
f¢(x) = 
D(x-2)·(2x+1)-(x-2)·D(2x+1)
(2x+1)2
= 
2x+1-2x+4
(2x+1)2		 =  5
(2x+1)2		 .

Viimeinen esimerkki esittelee, kuinka tyylimäärittelyjä voi laittaa sisäkkäin:

table.e3 {background:blue}
table.e3 table table table {background:red}
Määritellään vielä kolmas luokka e3, jossa tausta on sininen. Lisäksi, mikäli tämän sisällä on (minkä tahansa luokan) taulukko tarpeeksi syvällä, tässä tapauksessa kolmas taulukko luokan e3 sisällä, tuleekin taustan väriksi punainen. Seuraavassa taulukossa tämän pitäisi tulla näkyviin: Netscape Communicator 4.5 tosin näyttää kaikki taustat sinisella, mikä on tietysti väärin, mutta Internet Explorer 5 taas oikein.
f¢(x) = 
D(x-2)·(2x+1)-(x-2)·D(2x+1)
(2x+1)2
= 
2x+1-2x+4
(2x+1)2		 =  5
(2x+1)2		 .
Tässä esitelly esimerkit on tarkoitettu pelkästään havainnollistamaan niitä mahdollisuuksia, mitä tyylitiedostoilla voidaan saada aikaan. Kaikkia ominaisuuksia ei tässä ole lueteltu, vain keskeisimpiä toimintoja. Täydellistä dokumenttia varten katso esimerkisi W3 Consortiumin virallinen CSS1-määrittely osoitteessa http://www.w3.org/TR/REC-CSS1.