Cascading Style Sheets

CSS (Cascading Style Sheets, porrastetut tyyliarkit) on erityisesti WWW-dokumenteille kehitetty tyyliohjeiden laji. CSS:ssä dokumentille voi määritellä useita tyyliohjeita, jotka yhdistetään tietyllä tavalla yhdeksi säännöstöksi.

CSS-kielet

Varsinaisia tyylikieliä ovat muun muassa CSS1 ja sen seuraaja CSS2. World Wide Web Consortium (W3C) ylläpitää CSS-kielien määritelmiä. Kehitteillä on sarjan kolmosversio, CSS3. Sitä odotellessa työn alla on myös CSS2:n päivitysversio CSS21. Kaikista versioista käytetään usein lyhyesti nimitystä CSS.

CSS:llä annetut säännöt ehdottavat, kuinka dokumentti voidaan esittää. Säännöt eivät siis ole ehdottomia, vaan ne voi halutessaan kiertää. Jotkin säännöt saattavat korvautua toisten tyyliohjeiden vastaavilla säännöillä. Esimerkiksi dokumentissa annetut ohjeet ovat yleensä toissijaisia dokumentin vastaanottajan ohjeisiin verrattuna.

CSS:llä voidaan kuvata monipuolisesti sekä nähtävää että kuultavaa esitystapaa. Äänisyntetisaattoreita varten on määritelty muun muassa äänen korkeutta, painotusta ja äänenväriä sääteleviä ominaisuuksia. Visuaalisen esitystavan perusta on ns. laatikkomalli (box-model). Jokainen dokumentin elementti käsitetään mallissa laatikoksi, joka sijoitetaan ympäröivän elementin laatikon sisään muiden saman tason elementtien vierelle. Kullakin elementillä on neljä sisäkkäistä laatikkoa, joista uloin on marginaali; sen sisällä on reunus, joka rajoittuu sisäpuolelta sisältöä ympäröivään täytteeseen. Sisältölaatikossa on kuvattavan elementin sisältö.

CSS:ää käytetään luonnollisesti (X)HTML:n kanssa, mutta se sopii yhtä lailla muidenkin rakenteisten dokumenttien (esimerkiksi XML, MathML) tyyliohjeeksi.

Selainten tuki

Valtaosa nykyisin käytettävistä selaimista tukee vain rajallisesti CSS2-standardia. Esimerkiksi standardin tulostusmääritysten tuki on selainten keskuudessa erittäin huono^lähde?. Yksi selaimen CSS-tuen mittari on Acid2 -testi, jonka toistaiseksi on läpäissyt vain neljä selainta, joiden käyttäjäjoukkoon kuuluu vain vähäinen osa Internetin käyttäjistä.

CSS:n perussyntaksi

CSS:n perussyntaksi muodostuu valitsimesta, ominaisuudesta ja arvosta.

Valitsin { Ominaisuus: Arvo; }

Kaikki ominaisuudet ja arvot tulevat aaltosulkujen {} sisään. Useita ominaisuuksia ja arvoja voi laittaa valitsimeen peräkkäin erottelemalla ne puolipisteellä ;

Esimerkki CSS-määrittelystä

/* Leipätekstin fontin määritys ja tasaus */
 
p {
 font: 11px 'Trebuchet MS', Verdana, Arial, Sans-serif;
 color: #9e9e9e;
 text-align: justify;
}
 
/* Linkit lihavoidaan, mutta ei alleviivata */
 
a {
 text-decoration: none;
 font-weight: bold;
}
 
/* Kursorin alla olevan linkin tausta mustaksi ja teksti valkoiseksi
 24-bittisellä heksakoodilla määritettyinä */
 
a:hover {
 color: #ffffff;
 background-color: #000000;
}

Katso myös

• WWW-sisällönhallinta
• Informaatioarkkitehtuuri

Lähteet

• Web standards software and learning - browser support (englanniksi)

Aiheesta muualla

• W3C:n CSS-sivusto
• W3C:n CSS-validaattori
• XHTML/CSS-opas Suomenkielinen opas XHTML-merkkauksesta ja CSS-tyyleistä.