CSS

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

Näin liität CSS-tyyliin HTML-dokumenttiin

CSS-tyylejä voi liittää HTML-dokumenttiin useilla eri tavoilla:

Rivinsisäinen tyylimäärittely
CSS-tyylisääntö voidaan sisällyttää suoraan HTML-elementtiin style-attribuutin avulla.
Tuotu tyylimäärittely
Ulkoinen tyylimäärittely voidaan tuota osaksi verkkosivun tyylejä @import-säännöllä.
Ulkoinen tyylimäärittely
Ulkoinen CSS-tyylitiedosto linkitetään HTML-dokumenttiin link-elementin avulla.
Upotettu tyylimäärittely
Tyyli sisällytetään osaksi HTML-dokumenttia style-elementin avulla

Suositeltava liittämistapa riippuu pitkälti siitä, mihin tyylejä käytetään ja kuinka laajasti niitä käytetään. Jos samaa CSS-määrittelyä aiotaan käyttää useilla eri sivuilla, tuotu tyyli tai ulkoinen tyylimäärittely on yleensä paras vaihtoehto. Jos tyylit on tarkoitettu vain yhdelle tai muutamalle sivulle, kaikki liittämistavat ovat mahdollisia. Devaamisen ja muutostenhallinnan kannalta ulkoiset tyylitiedostot ovat suositeltavin ratkaisu.

Kaikki edellä mainitut menetelmät toimivat moderneissa verkkoselaimissa ilman yhteensopivuusongelmia.

Voiko samalla sivulla käyttää useita eri tyylilähteitä? Kyllä. CSS:n cascade-prosessi huolehtii siitä, että eri lähteistä tulevat tyylisäännöt yhdistyvät ja toimivat asianmukaisesti.

Ulkoinen tyylimäärittely

Ulkoinen CSS-tyylitiedosto liitetään HTML-dokumenttiin link-elementin avulla. Elementille suositellaan määrittämään seuraavat attribuutit:

href
Määrittää URI- tai URL-arvon CSS-tiedostoon. CSS-tiedoston tiedostopäätteen täytyy olla .css
rel
Määrittää HTML-dokumentin ja href-attribuutissa määritellyn välisen tiedoston suhteen. CSS-tyylitiedostojen tapauksessa arvon tulee olla stylesheet, joka viittaa ulkoiseen tyylitiedostoon.
media
Määrittää, mille esitysmedialle tyylitiedosto on tarkoitettu. Oletusarvo on all, jolloin tyylit koskevat kaikkia medioita. Tutustu: CSS:n mediatyypit.
type
Määrittää sisältötyypin (nk. MIME-tyypin). Ulkoisten CSS-tiedostojen tapauksessa arvon tulee olla text/css. HTML5-määrittelyn myötä text/css on oletusarvo, joten type-attribuutin voi jättää kirjoittamatta HTML5-dokumenteissa.

Esimerkki. Ulkoisen tyylimäärittelyn liittäminen HTML-tiedostoon: 

...
<head>
<link href="/tyylit/artikkelit.css" rel="stylesheet" media="screen" type="text/css"/>
<link href="/tyylit/artikkelit-print.css" rel="stylesheet" media="print" type="text/css"/>
<title>CSS opas</title>
...

Upotettu tyylimäärittely

Upotetussa tyylimäärittelyssä CSS-säännöt sijoitetaan style-elementin sisään HTML-dokumentin head-osioon.

Style-elementin attribuutti type määrittelee mitä tyylikieltä käytetään. Mahdolliset arvot ovat:

text/css
Kyseessä on CSS-kieleen perustuva tyylimäärittely.
text/xsl
Kyseessä on XSL-kieleen perustuva tyylimäärittely.

Kuten link-elementtiä käytettäessä, myös upotetussa tyylimäärittelyssä voidaan media-ominaisuuden avulla määrittää esitystapa. Arvoksi annetaan CSS:n tukema mediatyyppi.

Modernit selaimet tukevat style-elementtiä natiivisti, joten tyylimäärittelyjä ei tarvitse enää sijoittaa HTML-kommenttien sisälle.

Esimerkki. Yksinkertainen upotettu tyylimäärittely: 


...
<head>
 <style type="text/css"  media="screen">
   h1 {color:black;text-align:justify;}
   h2 {color:#BB00EE;}
  </style>
  <title>CSS esimerkki</title>
</head>
...

Aiemmin upotetut tyylimäärittelyt sijoitettiin HTML:n kommenttimerkkien (<!-- ja -->) sisään. Nykyselaimissa tämä käytäntö ei ole tarpeellinen, mutta vanhempien selainten yhteensopivuuden varmistamiseksi käytännön tunnistaminen on hyödyllinen tieto.

Tuotu tyylimäärittely

Toinen käytäntö ulkoisen CSS-tiedoston hyödyntämiseksi on @import-sääntö.

...
<head>
<style type="text/css" media="all">
<!--
@import url(tyyli.css);
-->
</style>
<title>CSS opas</title>
......

@import-sääntöä voidaan käyttää myös jo käytössä olevien tyylien täydentämiseen: 

...
<head>
<link href="/tyylit/artikkelit.css" rel="stylesheet" media="screen" type="text/css"/>
<link href="/tyylit/artikkelit-print.css" rel="stylesheet" media="print" type="text/css"/>
<style type="text/css" media="all">
<!--
@import url(sivutyyli.css);
-->
</style>
<title>CSS opas</title>
...

Vaikka @import-sääntöä on tuettu, sitä ei juurikaan käytetä sen heikon suorituskyvyn vuoksi. Tehokkaampi vaihtoehto @import-säännölle on ulkoinen tyylimäärittely link-elementtin avulla.

Rivinsisäinen tyylimäärittely

Rivinsisäisessä tyylimäärittelyssä CSS-säännöt sisällytetään suoraan HTML-elementtiin style-attribuutin avulla. Määrittely tapahtuu seuraavalla syntaksilla: 


<elementti style="attribuutti: arvo;">...</elementti>

Esimerkki. Rivinsisäinen tyylimäärittely, jossa korostetulle tekstille (em) tyyliksi asetetaan punainen väri ja alleviivaus: 

...
<p>Tässä on 
<em style="color:green; text-decoration:underline;">punaista ja alleviivattua</em>
tekstiä tavan kappaletekstin seassa. </p>

Rivinsisäisen tyylin käyttö kannattaa rajoittaa tilanteisiin, joissa tarvitaan nopeaa ja kertakäyttöistä muotoilua. Jos koko sivuston ulkoasua halutaan muuttaa, style-attribuutit on etsittävä koodista yksitellen, mikä tekee ylläpidosta työlästä.

Rivinsisäisiä tyylejä käytetään yleisimmin JavaScriptiä hyödyntävissä ratkaisuissa. Tälle käytännölle ei ole teknistä perustetta, sillä dokumentin parsinnan yhteydessä selain yhdistää kaikki tyylit (lähteestä riippumatta) osaksi dokumentin DOM-mallia.

Ehdolliset kommentit

Ehdolliset kommentit olivat aiemmin käytössä ollut käytäntö tyylien kohdistamiseen vanhemmissa Internet Explorer -selaimissa (kuten IE5 ja IE6). Koska näitä selaimia ei enää yleisesti käytetä, ehdollisia kommentteja ei tarvita, eivätkä nykyaikaiset selaimet, kuten Microsoft Edge, tue niitä.

Vaikka ehdolliset kommentit eivät enää ole käytössä, niiden tunnistaminen voi olla hyödyllistä vanhaa koodia muokatessa. Alla esimerkki tyypillisestä käyttötavasta: 

...
<link href="/tyylit/artikkelit.css" rel="stylesheet" media="screen" type="text/css"/>

<!--[if lt IE 6]
<link href="/tyylit/artikkelit-ie5x-bugifixit.css" rel="stylesheet" media="screen" type="text/css"/>
<![endif]--> 

<!--[if IE 6]>
<link href="/tyylit/artikkelit-ie6-bugifixit.css" rel="stylesheet" media="screen" type="text/css"/>
<![endif]-->

<title>CSS esimerkki</title>
...

Artikkelin tiedot

Otsikko: Näin liität CSS-tyyliin HTML-dokumenttiin

Kuvaus: Opi eri tavat liittää CSS-tyylejä HTML-dokumenttiin: rivinsisäinen, upotettu, ulkoinen ja tuotu tyyli. Tunnista tilanteeseesi sopiva tapa.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: