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 rinnalla.

CSS kehitettiin 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 esitystavan hallinnan kanssa. CSS kehitettiin ratkaisuksi tähän. 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 saada aikaan näyttäviä lopputuloksia.

Miten CSS on muuttanut verkkosivujen ulkoasun suunnitteluprosessia?

HTML:n sisäisiä muotoiluelementtejä on aiemmin käytetty esimerkiksi näin:

<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 soveltaa useassa eri kohdassa hyvin yksinkertaisesti luokkanimeä kutsumalla. CSS:n tarjoama keskitetty ulkoasun hallinta yksinkertaistaa ylläpitoa ja kehitystyötä.

CSS:n keskeiset periaatteet

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

1. Sisältö, ulkoasu ja esitystapa ovat erillisiä asioita:
   CSS määrittelee verkkosivun ulkoasun ja HTML kuvaa vain sisällön rakenteen. Tämä erottelu helpottaa sivujen ylläpitoa ja kehitystä.
2. Yhteensopivuus ja laite-riippumattomuus:
   CSS toimii sekä vanhoissa että uusissa selaimissa. Selain käyttää 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 saada aikaan selkeitä parannuksia, mutta laajemmat ulkoasut voivat vaatia enemmän koodia.

Mitä CSS sisältää

CSS-kieli tarjoaa monia 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:n suositus standardiksi v. 1996 (uudistettu 1999). Nykyään lähes kaikissa selaimissa täydellinen CSS1-tuki.

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 lähes kaikissa selaimissa on pieniä aukkoja toteutuksissa.

CSS 3

CSS 3 ei ole yksi yhtenäinen määrittely kuten CSS 2, vaan koostuu useista erillisistä moduuleista. Jokainen moduuli lisää uusia ominaisuuksia tai laajentaa CSS 2:n toimintoja säilyttäen yhteensopivuuden. CSS 3:n kehitys alkoi jo 1999, ja moduulien valmius vaihtelee: osa on jo vakaita ja suositellaan käytettäväksi ilman vendor-prefiksejä.

Mitä muuta on tärkeää osata?

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 virheiden varalta 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: 20.10.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