CSS

Johdatus CSS:ään – Näin pääset alkuun CSS:n kanssa

CSS (Cascading Style Sheets) on tyylikieli, jonka avulla määritellään verkkosivujen ulkoasu, kuten värit, fontit ja asemointi. Siihen kuuluu myös responsiivinen asettelu. CSS-tyylit voidaan kirjoittaa suoraan HTML-koodiin tai linkittää erillisestä CSS-tiedostosta (tiedostopääte: *.css) HTML:n link-elementin avulla. CSS on yksi verkkosivujen keskeisistä teknologioista HTML:n ja JavaScriptin ohella.

CSS syntyi 1990-luvun jälkipuoliskolla vastauksena HTML:n käytännön ongelmiin. HTML oli alun perin suunniteltu asiakirjojen rakenteen kuvaamiseen, mutta 1990-luvun selainsotien (Netscape vs. Internet Explorer) aikaan selainvalmistajat lisäsivät HTML:ään selainkohtaisia muotoilutageja. Tämä aiheutti yhteensopivuusongelmia, erityisesti ulkoasun hallinnan suhteen. CSS kehitettiin ratkaisuksi tähän ongelmaan. Se korvasi HTML:n muotoiluelementit, mahdollisti rakenteen ja ulkoasun erottelun, ja loi perustan yhtenäiselle, laiteriippumattomalle esitystavalle.

CSS:n perusteet on helppo oppia, ja jo vähäisellä osaamisella voi saavuttaa näyttäviä lopputuloksia.

Miten CSS on vaikuttanut verkkosivujen ulkoasun suunnitteluprosessiin?

Ennen CSS:ää verkkopalveluiden ulkoasu rakennettiin täysin HTML:n avula. HTML:n sisäisiä muotoiluelementtejä käytettiin esimerkiksi seuraavalla tavalla:

<p><font face="Verdana" color="red" size="12pt"><b> Tärkeä kommentti! </b></font></p>

CSS:n avulla sama ulkoasu saadaan aikaiseksi yksinkertaisemmalla HTML-rakenteella viittaamalla tyyliluokkaan:

 <p class="huom">Tärkeä kommentti!</p> 
 
 
 

Tällöin varsinainen tyyli määritellään erillisessä CSS-tiedostossa:

.huom {
  font-family: Verdana;
  color: red;
  font-size:12pt;
  font-weight: bold;
}

Tässä tilanteessa kaikki tyyliin liittyvät määrittelyt ovat yhdessä kohden, ja samaa ulkoasua voi hyödyntää useassa eri kohdassa hyvin yksinkertaisesti luokkanimeä kutsumalla. CSS:n tarjoama keskitetty ulkoasun hallinta on helpottaa verkkopalveluiden ylläpitoa ja kehitystyötä huomattavasti.

CSS:n keskeiset periaatteet

CSS:n toiminta perustuu muutamiin keskeisiin periaatteisiin. Näiden periaatteiden ymmärtäminen auttaa hahmottamaan, miksi CSS toimii niin kuin se toimii.

1. Sisältö, ulkoasu ja esitystapa ovat erillisiä asioita:
   CSS määrittää verkkosivun ulkoasun ja HTML kuvaa vain sisällön rakenteen. Tämä erottelu selkeyttää sivujen ylläpitoa ja kehitystä.
2. Yhteensopivuus ja laite-riippumattomuus:
   CSS toimii sekä vanhoissa että uusissa selaimissa. Selain suorittaa vain ne tyylisäännöt, jotka se ymmärtää, ja muut se ohittaa.
3. Yksinkertaisuus ja tehokkuus:
   CSS on minimalistinen ja joustava. Pienilläkin tyyleillä voi saavuttaa selkeitä parannuksia, mutta laajemmat kokonaisuudet vaativat huomattavat määrät suunnittelutyötä.

Mitä ominaisuuksia CSS sisältää?

CSS-kieli tarjoaa useita hyödyllisiä ominaisuuksia. Tärkeimpiä ovat:

• Selkeä syntaksi, jonka voi kuvata viidellä rivillä – tutustu CSS:n syntaksiin
• yli 100 erilaista ulkoasuun ja esitykseen liittyvää ominaisuutta – tutustu: CSS:n näytöllä käytettävät ominaisuudet
• Ympäristökohtaiset mittayksiköt – tutustu: CSS:n käyttämät mittayksiköt
• Kymmeniä rinnakkaisia tapoja kohdentaa tyylejä – tutustu: CSS:n valitsimet ja pseudovalitsimet
• Yksinkertainen tapa hallita ja määrittää jokaisen elementin asettelua – tutustu: CSS:n laatikkomalliin
• Eri näyttölaitteisiin ja tulostukseen kohdentuvat tyylit – tutustu: CSS ja mediatyypit
• Ominaisuuksien periytyminen, jonka avulla tyylit leviävät alaspäin dokumenttipuussa – tutustu: CSS ja ominaisuuksien periytyminen

CSS-versiot

CSS:n tehokas käyttö edellyttää ymmärrystä siitä, että CSS:stä on useita versioita ja selaintuki vaihtelee ominaisuuksittain.

CSS 1

Määrittelee CSS:n keskeisen syntaksin ja ominaisuudet: yksiköt, fontit ja laatikkomallin. W3C hyväksyi CSS1:n standardiksi vuonna 1996, ja sitä on päivitetty vuonna 1999. Lähes kaikki nykyiset selaimet tukevat CSS1:tä täysin.

CSS 2 / 2.1

Laajentaa CSS 1:stä mm. sijoittelumalleilla, mediatyypeillä ja kansainvälisyysominaisuuksilla. W3C:n suositus standardiksi v. 1998, korjattu 2004. Selaintuki hyvin kattava, mutta toteutuksissa on pieniä eroavaisuuksia.

CSS 3

CSS 3 ei ole yksi yhtenäinen määrittely kuten CSS 2, vaan se muodostuu useista erillisistä moduuleista. Jokainen moduuli tuo uusia ominaisuuksia tai laajentaa CSS 2:n toimintoja säilyttäen yhteensopivuuden. CSS 3:n kehitys alkoi jo vuonna 1999, ja moduulien valmiusaste vaihtelee. Osa moduuleista on jo vakiintuneita ja niitä voi käyttää myös ilman vendor-prefiksejä.

Mitä muita asioita tulisi osata CSS:n itseopiskelua varten?

CSS:n tehokas käyttö edellyttää HTML:n rakenteen ymmärtämistä, CSS-valitsimien hallintaa ja DOM-mallin perusteiden tuntemusta. Lisäksi on suositeltavaa oppia validoidamaan kaikki CSS-koodi esimerkiksi W3C:n CSS-validointipalvelulla.

Artikkelin tiedot

Otsikko: Johdatus CSS:ään – Näin pääset alkuun CSS:n kanssa

Kuvaus: Opi mitä CSS on ja miten se muutti web-kehitystä. Tutustu sen periaatteisiin, versioihin ja CSS-tyylien kirjoittamiseen tarvittaviin taitoihin.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: 23.8.2025

Kirjoittaja: Keijo Kortelainen

Keijo on verkkoliiketoiminnan ja digimarkkinoinnin asiantuntija, joka on auttanut satoja suomalaisia yrityksiä kasvattamaan näkyvyyttään ja myyntiään verkossa. Keijolla on BBA-tutkinto verkkokaupasta (BBA in eCommerce) sekä lähes kolmen vuosikymmen kokemus web-teknologioista (mm. HTML, CSS, JavaScript, PHP ja SQL) ja sisältömarkkinoinnista. Hän toimii yrittäjänä, konsulttina ja freelancerina – ja on jakanut osaamistaan 2kmediat.com-sivustolla yli 20 vuoden ajan.

LinkedIn