CSS

CSS:n syntaksi, ominaisuudet, arvot ja mittayksiköt

CSS-kielen rakenne koostuu useista keskeisistä osista, joista tärkeimmät ovat:

• Tarkkaan määritelty syntaksi (rakenne)
• Valitsimet, joiden avulla tyyli kohdennetaan HTML-elementtiin
• Ominaisuudet, joiden avulla asetetaan yksittäiset tyylit kuten fontin väri, alleviivaus tai marginaali
• Suhteelliset ja absoluuttiset mittayksiköt, jotka tukevat esitystä eri medioissa
• Laatikkomalli, joka määrittää jokaisen elementin esitystavan
• Ominaisuuksien periytyminen

CSS:n syntaksi

Verkkosivun ulkoasu rakentuu usein eri lähteistä tulevista CSS-tyyleistä. Osa tyyleistä voi kohdistua erityyppisiin päätelaitteisiin, osa täydentää perustyylejä. Yhteistä on, että kaikki tyylimäärittelyt perustuvat alla esiteltyyn syntaksiin:

/* kommentti */
   @sääntö {
      valitsin {
          ominaisuus: arvo; 
      } 
    }
	

Kaikki CSS-määrittelyt noudattavat samankaltaista perussyntaksia, johon kuuluvat valitsin, ominaisuus ja arvo.

Määrittelylohko on alue, joka on aaltosulkujen välissä. Yllä olevassa syntaksikuvauksessa on kaksi (sisäkkäistä) määrittelylohkoa.

CSS:n kommentit ja @-säännöt ovat valinnaisia rakenteita, joita käytetään tarpeen mukaan.

CSS:n valitsimet HTML:n yhteydessä eivät ole kirjainkoosta riippuvaisia, joten h1 ja H1 tulkitaan samoin. XML-tiedostojen yhteydessä CSS on case-sensitive, eli tagi ja TAGI ovat kaksi eri valitsinta.

Ominaisuuksien nimet tulisi kirjoittaa pienillä kirjaimilla kaikissa ympäristöissä. Sen sijaan ominaisuuksien arvoissa kirjasinkoolla ei ole merkitystä - esimerkiksi #ffffff ja #FFFFFF ovat täsmälleen sama värikoodi.

Välilyönnit, rivinvaihdot ja muut tyhjät merkit eivät vaikuta CSS:n tulkintaan.

Kuten useimmat ohjelmointikielet, CSS sisältää varattuja avainsanoja, jotka on varattu kielen sisäiseen käyttöön. Varattuja tunnisteita ovat ominaisuuksien nimet (esim. font-family, color), mittayksiköt (esim. %, px), määrätyt erotinmerkit (esim ",", ":") ja tietyt erikoismerkit (esim."@", "/*"). Näitä kaikkia käytetään AINA ilman lainausmerkkejä - mikä erottaa ne muista arvoista.

Kommentin lisääminen CSS-tyyliin

CSS-kielen kommentti alkaa merkinnällä /* ja päättyy */. Tämä syntaksi on sama kuin monissa muissakin ohjelmointikielissä, kuten JavaScriptissä tai PHP:ssä.

Kommentin voi sijoittaa mihin tahansa kohtaan CSS-tyylimäärittelyssä, mutta kommentteja ei voi kuitenkaan sijoittaa sisäkkäin.

Esimerkki. Kommentointia kannattaa käyttää tyylimäärittelyjen dokumentointiin:

/* 
Kuvaus: ulkoisiin resursseihin osoittavat linkit
linkin yhteyteen /taustalle sijoitetaan kuvake web.gif
Luotu: 10/4
Status: testaus
*/

a.ulkoinenlinkki {
  color:#00FF00;
  background-image:url('/kuvat/web.gif');
  background-repeat:no-repeat;
}

CSS-valitsimen määrittelylohko

CSS-valitsin (engl. selector) määrittää, mihin HTML-elementteihin jokin tyylisääntö kohdistuu. Tyypillisessä verkkosivuun liitetyssä tyylimäärittelyssä käytetään useita valitsimia. Jokainen valitsimen määrittelylohko noudattaa seuraavaa syntaksia:

valitsin { 
  ominaisuus: arvo; 
}

Määrittelylohko

Määrittelylohko käärii aaltosulkeiden avulla CSS-valitsimeen liittyvät ominaisuudet ja arvot yhteen.

Ominaisuus (property)

CSS-kielen määrittelemä ominaisuus, jota halutaan säädellä. Yhteensä noin 120 erilaista. Katso listaus CSS:n näytöllä käytettävista ominaisuuksista.

Arvo (value)

CSS-kielen määrittelemä ominaisuuden arvo. Jokaiselle ominaisuudelle on CSS-standardissa määritelty joukko mahdollisia arvoja ja mittayksiköitä.

Esimerkki. Yksinkertainen tyylimäärittely. 1.tason otsikkoelementin(h1) tekstinväri määritellään mustaksi. "h1" on valitsin, "color" on CSS:n sisäinen ominaisuus, ja "black" on color-ominaisuuteen liitettävä arvotunniste.

h1 { 
 color: black;
}

  

Yksittäinen valitsin voi sisältää useita ominaisuuksia ja arvoja samassa määrittelylohkossa.Nämä erotetaan toisistaan puolipisteella. Puolipisteen puuttuminen ominaisuuden arvon jälkeen voi aiheuttaa virheitä, jolloin osa tyyleistä jää huomiotta. Seuraavassa esimerkissä h1-otsikolle on määritelty useita ominaisuuksia samassa lohkossa:

h1 { 
  color: black; 
  text-align: justify; 
  border: 1px solid red;
  margin-bottom: 2em;   
}

Jos useille valitsimille halutaan antaa sama tyyli, voidaan käyttää CSS:n ryhmittelyvalitsinta. Seuraavassa esimerkissä elementeillä h1,h2 ja h3 on yhteisiä arvoja (font-size), mutta myös toisistaan poikkeavia arvoja (color):

 h1 { color: black; } 
 h2 { color: blue; }
 h3 { color: red; } 
 h1, h2, h3 { font-size:x-small; }

CSS-säännön merkitseminen tärkeäksi

Jos tyylisääntö halutaan merkitä tärkeäksi ja antaa sille normaalia suurempi painoarvon Cascade-prosessissa, lisää ominaisuuden arvon perään avainsana !important.

Seuraavassa esimerkissä text-decoration ja line-height on määritelty tärkeiksi. Sen sijaan color ja font-family ominaisuudet ovat normaaliprioriteetin mukaisia sääntöjä:

strong { 
  color: red; 
  text-decoration: underline !important;
  line-height:1.2em !important;
  font-family:Verdana,Arial,Helvetica,sans-serif;
}

CSS:n ominaisuudet

CSS1- ja CSS2-määrittelyt listaavat noin 120 erilaista ominaisuutta. CSS3 ja sen moduulit, kuten Flexbox, Grid, Media Queries ovat kasvattaneet CSS:n ominaisuuksien määrän useisiin satoihin. Tutustu:CSS:n näytöllä käytettävät ominaisuudet -listaukseen.

Arvot ja mittayksiköt CSS-kielessä

Selkein arvojoukko ovat CSS:n sisäänrakennetut arvot. Esimerkiksi list-style-position-ominaisuuden mahdolliset sisäänrakennetut arvot ovat inside, outside tai inherit.

Merkkijonoarvot tulee sijoittaa lainausmerkkien (' tai ") sisään. CSS-tiedostossa käytettävän merkistön enkoodaus voidaan ilmoittaa HTML:n meta charset="UTF-8"-rakenteella (tärkein), CSS:n @charset -säännöllä, tai HTML:n link-elementin charset-attribuutille (matalin prioriteetti).

Numeerisissa arvoissa käytetään desimaalierottimena aina pistettä. Mittayksikkö kirjoitetaan välittömästi arvon perään ilman välilyöntiä. Nolla-arvon yhteydessä mittayksikköä ei yleensä merkitä – ja tietyissä tilanteissa mittayksikköä ei saa käyttää lainkaan

Numeeriset mittayksiköt voivat olla joko suhteellisia tai absoluuttisia.

Suhteellinen mittayksikkö

Suhteelliset mittayksiköt määrittävät arvon johonkin toiseen mittayksikköön tai arvoon verrattuna.

Absoluuttinen mittayksikkö

Absoluuttiset mittayksiköt ovat kiinteitä.

Suhteellisia arvoja kannattaa suosia, koska ne skaalautuvat paremmin eri medioihin, näyttökokoihin ja resoluutioihin. Absoluuttisia mittoja tulisi käyttää vain silloin, kun esitysväline ja sen ominaisuudet tunnetaan tarkasti — esimerkiksi tulostuksessa.

Esimerkki:

@media screen {
  body {
   margin-left:10% 
   margin-top: 0;
   margin-right:10%;
   margin-bottom:2em;
   font-size:0.8em;
  }
}
@media print {
  body {
   margin-top: 2cm;}
   margin-left: 2cm;
   margin-right: 2cm;
   font-size: 12px;
 }
}

Jotkut ominaisuudet voivat saada arvokseen URI- tai URL-arvon. Tällöin arvo voidaan sijoittaa lainausmerkkien sisään, mutta se ei ole pakollista. Esimerkiksi:

list-style-image:url(/kuvat/ikoni.gif)

Väriarvot voidaan ilmoittaa CSS:ssä useilla tavoilla, yleisimmin joko värin avainsanalla tai heksadesimaalimuotoisella RGB-arvolla CSS2 mahdollistaa myös viittaukset käyttöjärjestelmän järjestelmäväreihin perinteisen väriskaalan lisäksi. Esimerkki:

body {
  color: #FF0000; 
  background-color:white;
}

CSS3 tukee funktioiden kuten calc(), var(), min() ja max() käyttöä ominaisuuksien arvoissa. Funktioiden avulla voidaan laskea arvoja dynaamisesti ja luoda joustavampia tyylejä. Esimerkiksi calc() mahdollistaa erilaisten yksiköiden yhdistämisen, kuten width: calc(100% - 2em).

Artikkelin tiedot

Otsikko: CSS:n syntaksi, ominaisuudet, arvot ja mittayksiköt

Kuvaus: Opi CSS:n syntaksi, ominaisuudet ja arvot. Tuntemalla nämä perusteet kirjoitat selkeämpää, tehokkaampaa ja helpommin ylläpidettävää koodia.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: 28.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