Cascading Style Sheets

Cascading Style Sheets (lyh. CSS, kirjaimellisesti ”porrastetut tyyliarkit”) on erityisesti verkkosivuille kehitetty tyylisivu. 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

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, ja periaatteessa myös äänen 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 niin sanottu 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 HTML:n ja XHTML:n kanssa, mutta se sopii yhtä lailla muidenkin rakenteisten dokumenttien (esimerkiksi XML ja MathML) tyyliohjeeksi.

Historia 

CSS syntyi 1990-luvun puolivälissä tarpeesta muokata nettisivujen ulkonäköä ja asettelua. Norjalainen Håkon Wium Lie esitti idean CSS:stä ensimmäisenä vuonna 1994. Häntä pidetään CSS:n kehittäjänä. 

Ensimmäinen versio, CSS 1, julkaistiin vuonna 1996. CSS 2 julkaistiin vuonna 1998 ja se sisälsi paljon virheitä, jotka lopulta korjattiin vuonna 2011, kun CSS 2.1 julkaistiin World Wide Web Consortium:in virallisena suosituksena.

CSS 3:a alettiin kehittää vuonna 1998. Se erosi edeltäjistään siten, että se julkaistiin yhden määritelmän sijaan erillisinä moduuleina. Jokainen moduuli käsitteli suhteellisen pientä osaa määritelmästä, ja moduulit joko lisäsivät uusia ominaisuuksia tai kehittivät ja laajensivat vanhoja ominaisuuksia. Kehityksessä pyrittiin taaksepäin suuntautuvaan yhteensopivuuteen edellisten versioiden kanssa. 

CSS 3:a kehitetään edelleen. Moduulit kuitenkin mahdollistavat sen, että riittävän vakaille moduuleille voi antaa Candidate Recommendation (CR) statuksen. CSS 3 ei ole tuettu kaikissa selaimissa, mutta useimmat selaimet tukevat CR-statuksen saaneita moduuleja. Moduulit luokitellaan CSS-tason perusteella. Suurin osa kehitteillä sekä ylläpidossa olevista moduuleista on tason 3 moduuleja, sillä ne rakennetaan tason 2 eli CSS 2.1:n ominaisuuksien päälle. Kokonaan uusia toiminnallisuuksia lisäävät moduulit kuitenkin luokitellaan tason 1 moduuleiksi.

Myös CSS 4:n kehitys on alkanut ja se käyttää samaa moduuli-määritelmää. Tason 4 moduulit kehittävät ja laajentavat tason 3 moduuleja.

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. ”CSS 3” on yleisnimitys valmiusasteeltaan ja luonteeltaan hyvin erilaisille määrittelyille.

CSS1:n 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:n uudet ominaisuudet 

asemoinnin uudistuminen, niin että kuvat ja teksti voidaan asemoida minne vain
elementtejä voi asettaa päällekkäin, niin että toinen tulee päälle (Z-index)
ylivuodon käsittely (mitä tehdään sisällölle, joka ei mahdu käytettävissä olevaan tilaan)
taulukoiden ulkoasun parempi muokkaaminen

CSS3:n uudet ominaisuudet 

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.

CSS4 
CSS4:lle ei ole vielä yhtä tiettyä versiota, sillä se on jaettu useisiin osiin, joita päivitetään erillään.

Osa osista, joita alettiin kehittää CSS2 pohjalta aloittivat tasolta 3, osa niistä on jo saavuttanut tason 4 ja lähestyy tasoa 5. Muut osat, jotka hyödyntävät täysin uutta Flexbox toiminnallisuutta ovat alkaneet tasolta 1 ja lähestyvät tasoa 2.

CSS työryhmä julkaisee ajoittain kokoelmia CSS4:n valmiista osista, jotka koetaan käyttövalmiiksi. Tällaisia kokoelmia on tähän mennessä julkaistu 5 kappaletta; vuosina 2007, 2010, 2015, 2017 ja 2018.

Yhteensopivuus eri selaimilla 
Verkkoselaimet käyttävät eri selainmoottoreita verkkosivujen esittämiseen, josta johtuen eri selaimet voivat käsitellä CSS:n eri tavoin. Tiettyjä selaimia varten on kehitetty väliaikaisia korjauksia (CSS hack tai CSS-filtteri), joilla saavutetaan nettisivujen yhtenäinen ulkonäkö selaimissa, joissa ei ole yhdensopivaa renderöintiä. 

Merkittävien selainten tuen puute voi olla este uusien CSS:n toiminnallisuuksien omaksumiselle. Esimerkiksi Internet Explorer ei tukenut CSS 3 ominaisuuksia, mikä hidasti näiden ominaisuuksien omaksumista ja samalla vahingoitti selaimen mainetta kehittäjien keskuudessa. Yhtenäisen käyttäjäkokemuksen varmistamiseksi verkkokehittäjät yleensä testaavat sivustojaan useilla käyttöjärjestelmillä, selaimilla ja selainversioilla. Tämä puolestaan nostaa sivustojen kehitysaikaa ja monimutkaisuutta. Ohjelmistotyökaluja, kuten BrowserStack voidaan käyttää tällaisten kehitysympäristöjen ylläpitoon. Tilapäiset korjaukset ja usean vanhemman selainversion tuen ylläpito voivat nostaa ohjelmistokehitysprojektien monimutkaisuutta ja tästä syystä useat ohjelmistoyritykset määrittelevät listan selainversioista joita heidän ohjelmistonsa tukee.

Kun nettisivut ottavat käyttöön uudempaa koodia joka ei ole yhteensopiva vanhempien selainten kanssa, nämä selaimet eivät pääse enää käsiksi moniin verkon resursseihin. Monet modernit sivustot näyttävät erilaisilta vanhoilla selaimilla ja tämän lisäksi eivät välttämättä toimi ollenkaan, johtuen JavaSriptin ja muun verkkoteknologian kehityksestä.

CSS:n perussyntaksi 

CSS:n perussyntaksi muodostuu selektorista eli valitsimesta, ominaisuudesta ja arvosta.
selektori {
  ominaisuus: arvo;
}Kaikki ominaisuudet ja arvot tulevat aaltosulkeiden {} sisään. Useita ominaisuuksia ja arvoja voi laittaa valitsimeen peräkkäin erottelemalla ne puolipisteellä ;.

Valitsin 
Valitsin määrittää mihin osiin HTML-dokumenttia aaltosulkeiden sisällä olevat ominaisuudet vaikuttavat. Valitsimella voidaan valita:

 kaikki tiettyä tyyppiä olevat elementit, kuten kappale-elementit p (esimerkki alla)
elementit, joille on dokumentissa määritetty tietty attribuutti:
id: tunniste, joka on uniikki dokumentissa. Merkitään valitsimessa lisäämällä etuliitteeksi ristikkomerkki, esim. #id
luokka: tunniste, joka voi viitata dokumentissa useisiin eri elementteihin. Merkitään valitsimessa lisäämällä etuliitteksi piste, esim. .classname
elementit riippuen siitä minkälaisessa suhteessa ne ovat muihin elementteihin dokumenttipuussa.
Tunnisteiden kirjainkoko on merkitsevä ja niiden täytyy alkaa kirjaimella, ne voivat sisältää kirjaimia, numeroita sekä tavu- ja alaviivamerkkejä. ID voi viitata vain yhteen elementtiin, kun luokka voi viitata useampaan.

Valitsimeen voidaan lisäksi liittää pseudoluokkia, joilla voidaan muokata dokumentin tyyliä sellaisen tiedon pohjalta, mitä ei dokumenttipuusta löydy. Eräs esimerkki pseudoluokasta on :hover, joka tunnistaa sisällön vain kun käyttäjä osoittaa elementtiin esimerkiksi pitämällä hiiren kursoria elementin päällä. Pseudoluokka lisätään valitsimen perään, esim. .classname:hover. Pseudoluokka valitsee dokumentista kokonaisia elementtejä, kuten :link tai :visited, kun pseudoelementti taas tekee valinnan, joka voi koostua osittaisista elementeistä, esim :first-line tai ::first-letter. Pseudoluokkaa siis merkitään yhdellä kaksoispisteellä ja pseudoelementtiä vastaavasti kahdella peräkkäisellä kaksoispisteellä.

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;
}

Periytyminen
Periytyminen on CSS:n keskeisiä toiminnallisuuksia. Sen toiminta perustuu esivanhempi-jälkeläinen suhteeseen, jossa periytymisen kautta saatuja ominaisuuksia käytetään esivanhemman lisäksi myös tämän jälkeläisiin. Peritty ominaisuus on esivanhemmalta saatu laskettu arvo, joka löytyy ominaisuuksienmäärittelytaulukosta. Juurielementillä ja jälkeläisillä, jotka eivät peri ominaisuutta esivanhemmalta, peritty ominaisuus on alkuperäinen määritelty arvo.  Periytymisen toiminnallisuus nojautuu dokumenttipuuhun, jossa XHTML-elementtien hierarkia perustuu sisäkkäisyyteen. Sisäkkäisyyksien mukaan jälkeläinen perii voimaan jäävät arvonsa aina järjestyksessä lähimmältä esivanhemmalta. 
Periyttämällä ominaisuuksia voidaan välttyä määrittelemästä samoja ominaisuuksia jatkuvasti uudelleen, joka johtaa lyhyempää ja helpommin muokattavaan CSS-tiedostoon.

Esimerkki
CSS koodipätkä:
p {
   color: green;
}
Elementti p, jonka sisällä on korostava elementti (<em>):
<p>
   Tämä esimerkki <em>havainnollistaa</em> periytymistä
</p>

Jos em-elementille ei ole määritelty väriä, niin sana “havainnollistaa” perii värin esivanhemmaltaan p. Elementille p on määritetty väri vihreä, jolloin elementti em on myös vihreä:

   Tämä esimerkki  havainnollistaa  periytymistä

Responsiivinen web-suunnittelu 

CSS:n avulla pystymme suunnittelemaan responsiivisia verkkosivuja. Responsiivisuudella tarkoitetaan verkkosivun mukautuvuutta käyttäjän näytön kokoon halutulla tavalla niin, että se on käyttäjälle paremmin suunniteltu. Tämä voidaan toteuttaa CSS-tiedostossa mediakyselyiden avulla niin, että luodaan rajaehdot näytön koolle. Näin verkkosivu muuttaa asetteluaan tunnistaessaan minkä kokoisella näytöllä sivu avataan.

Esimerkkejä mediakyselyiden käytöstä: 
/* Todella pienet laitteet (puhelimet, 480px ja pienemmät) */
@media screen and (max-width: 480px) {/* css koodi */}

/* Pienet laitteet (tabletit ja suuret puhelimet, 481px suuremmat) */
@media screen and (min-width: 481px) {/* css koodi */}

/* Keskikokoiset laitteet (pienet näytöt ja kannettavat tietokoneet, 769px suuremmat) */
@media screen and (min-width: 769px) {/* css koodi */}

/* Suuret laitteet (pöytätietokoneet ja suuret näytöt, 1025px suuremmat) */
@media screen and (min-width: 1025px) {/* css koodi */}

/* Todella suuret laitteet (todella suuret näytöt ja TV, 1200px suuremmat) */
@media screen and (min-width: 1201px) {/* css koodi */}
Suunnittelu kannattaa aloittaa mobiililaitteista ja edetä niistä suurempia laitteita kohti. Esimerkkikoodissa suuruusluokka on ensin asetettu kuuttasataa pikseliä pienemmiksi ja seuraavat sitä suuremmiksi. CSS pystyy havaitsemaan, mihin suuruusluokkaan näytön koko sopii ja toteuttaa verkkosivun asettelun siihen muokatun asettelun mukaan. Esimerkiksi jos näyttö on suurempi kuin 768px mutta pienempi kuin 992px, sen asettelu on keskikokoisten laitteiden mukainen. CSS ei anna suuruusluokkia automaattisesti vaan ne täytyy määritellä itse.

Mediakyselyitä voidaan määritellä enemmänkin esimerkiksi tulostamiseen tai näytönlukemiseen käyttämällä screen tilalla print tai speech.

CSS animaatiot 
CSS animaatiot on julkaisu ensimmäisen kerran vuonna 2009.  CSS animaatiot ovat keino lisätä WWW-sivuille animaatioita helposti ilman JavaScriptiä. CSS animaatio muokkaa elementin tyyliä toiseen tyyliin. CSS animaatioilla voidaan animoida CSS ominaisuuksia, kuten värejä, leveyksiä, korkeuksia ja tekstin kokoa. CSS animaatioissa selain toteuttaa animaation määriteltyjen muutoksien mukaan. CSS animaatioita voi tehdä CSS elementeille kuinka paljon tahansa ja kuinka monta kertaa tahansa. 

CSS animaation rakenne koostuu kahdesta osasta:

 Animaation tyylin kuvaus
 Näppäinkehys, joka määrittää animaation alun ja lopun, sekä mahdolliset muut muutokset niiden välillä

@keyframes -näppäinkehys 
CSS animaation pitää olla sidottuna johonkin elementtiin. @keyframes näppäinkehyksen avulla animaatio määritetään. Animaatio muuttuu määrätystä lähtötilanteesta määrättyyn lopputilanteeseen määrätyssä ajassa ja mahdollisilla määritetyillä välimuutoksilla. Esimerkiksi animation-duration ominaisuus kertoo missä ajassa animaatio tapahtuu. Muutoksen voi kuvata prosentuaalisesti. Puolessa välissä animaatio voi muuttua, minkä jälkeen se taas jatkuu loppuun. 

Esimerkkejä CSS animaatioiden ominaisuuksista, joita voidaan toteuttaa:

 Animaation viivästyminen
 Animaation kesto
 Animaation toistaminen
 Animaation suunnan muuttaminen

Katso myös 

 WWW-sisällönhallinta
 Informaatioarkkitehtuuri

Lähteet 
 Web standards software and learning - browser support 
 Jukka K. Korpela: CSS3 – uudet mahdollisuudet. Docendo, 2013.

Viitteet

Aiheesta muualla 

 W3C:n CSS-sivusto
 W3C:n CSS-validaattori
 Johdanto CSS-tyyliehdotuksien käyttöön Web-sivuilla
 Suomenkielinen CSS 2.1 -ominaisuusreferenssi visuaaliselle medialle
 Suomenkielinen yhteenveto CSS3-valitsimista esimerkki-/testisivuineen

W3C-standardit
Tyylisivukielet
Seulonnan keskeiset artikkelit

mk:CSS селектори