Cascading Style Sheets

CSS (Cascading Style Sheets, kirjaimellisesti ”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-tiedostojen pääte on yleensä .css

CSS perustiedot

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 näkyvää esitysmuotoa, periaatteessa myös kuultavaa esitystapaa. Äänisyntetisaattoreita varten on määritelty muun muassa äänen korkeutta, painotusta ja äänenväriä sääteleviä ominaisuuksia, joskin ne on toteutettu varsin suppeasti. 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. Elementti voi kuitenkin tuottaa myös useita laatikoita. Kullakin elementillä on neljä sisäkkäistä laatikkoa, joista uloin on marginaali eli reunus; sen sisällä on reunaviiva tai -kuvio, 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.

CSS-Versiot

World Wide Web Consortium (W3C) ylläpitää CSS-kielien määritelmiä. Alkuperäinen määrittely oli CSS 1, jolla on vain historiallinen merkitys. Nykyisin vakiintuneet ja lähes kaikissa selaimissa toteutetut ominaisuudet on kuvattu määrittelyssä CSS 2.1. ”CSS3” on yleisnimitys valmiusasteeltaan ja luonteeltaan hyvin erilaisille määrittelyille.

CSS1 ominaisuudet

• Yleinen muotoilu
• Leveyden ja korkeuden asettaminen
• Reunaviivat ja täytteet
• Listojen muotoilu
• Fontit ja niiden ominaisuudet jota ovat
  • Värit
  • Alleviivaus
  • Koko
  • Tausta
  • Rivivälit
• Asemointi
  • Vasemmalle
  • Keskelle
  • Oikealle

CSS2 uudet ominaisuudet

• Asemoinnin uudistuminen, niin että kuvat ja teksti voidaan asemoida minne vain.
• Elementtejä voi laittaa päällekkäin, niin että toinen tulee päälle. (Z-index)
• Ylivuodon käsitely (Mitä tehdä jos sisältö ei mahdu sille varattuun tilaan.)
• Taulukoiden ulkoasun parempi muokkaaminen

CSS3 uusia ominaisuuksia

• Animointi
• Elementin kääntäminen
• Laatikoiden muuntaminen
• Fontin venytys
• Tekstin kelaaminen (marquee)
• Rivien ominaisuudet
  • Rivien määrä
  • Rivien tausta
• Puheominaisuudet (puheselaimille)
• X-, Y- ja Z-akseleiden suuntainen käänteleminen

Osa ominaisuuksista on suunniteltu osittain korvaamaan apletit ja flash.

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)
• Jukka K. Korpela: CSS3 – uudet mahdollisuudet. Docendo, 2013.

Aiheesta muualla

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