Cascading Style Sheets

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.[2][3]

• 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

• 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

• 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: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.

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.[6] Pseudoluokkaa siis merkitään yhdellä kaksoispisteellä ja pseudoelementtiä vastaavasti kahdella peräkkäisellä kaksoispisteellä.

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. [7] 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.

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ä:

/* 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 */}

[8]

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 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. [10]

Esimerkkejä CSS animaatioiden ominaisuuksista, joita voidaan toteuttaa:

• Animaation viivästyminen
• Animaation kesto
• Animaation toistaminen
• Animaation suunnan muuttaminen