Mitä CSS on?

CSS, eli Cascading Style Sheets (kaskadiset tyyliohjeet) on tyyliohjaiden laji, jolla internetsivuille voidaan tehdä erilaisia tyylejä, kuten muuttaa tekstin väriä, taustaväriä, elementtien koko yms.

Kuten HTML:ää, niin myös CSS:ää kehittää World Wide Web Consortium (W3C).

CSS:n syntaksi

Jos käytetään erillistä tyyliohjetiedostoa

CSS:n syntaksi koostuu valitsimesta, attribuutista (ominaisuudesta) ja attribuutin arvosta. Attribuutti ja arvo tulevat aina aaltosulkujen {} väliin ja attribuutti ja arvo erotetaan toisistaan kaksoispisteellä. Jokainen attribuutti (ja sen arvo) lopetetaan puolipisteellä.

valitsin { ominaisuus:arvo }

Määritellään esimerkiksi H1-tason otsikon teksti punaiseksi ja kirjasinkoko 30 pikselin kokoiseksi.

h1 { 
   color:red;
   font-size:30px;
}

Ylläoleva voidaan kirjoittaa myös putkeen. Rivitystä kannattaa käyttää selventämään merkkausta. Rivittäminen ei vaikuta merkkauksen toimivuuteen.

h1 {color:red; font-size:30px;}

Jos tyyliohjeet lisätään HTML-dokumenttiin

Tyyliohjeet voidaan lisätä HTML-dokumenttiin HEAD-tagin sisään. Tällöin käytetään STYLE-tagia, johon laitetaan TYPE-attribuutti jonka arvoksi annetaan TEXT/CSS. Tagin sisään lisätään tyyliohjeita samaan tapaan, kuin erilliseen tyyliohjetiedostoon.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css>
   tyyliohjeet
</style>
</head>
<body></body>
</html>

Jos tyyliohjeet lisätään suoraan tagiin

Jos tyyliohje lisätään suoraan HTML elementtiin, tai tagiin, niin syntaksi on hieman erilainen. Valitsinta ei ole, koska tagi itsessään on valitsin. Lisäksi tällöin ei käytetä aaltosulkuja, vaan tyyliohjeet laitetaan STYLE-attribuuttiin.

style="ominaisuus:arvo;"

Määritellään tässäkin esimerkiksi H1-tason otsikko tagiin teksti punaiseksi ja kirjasinkoko 30 pikselin kokoiseksi.

<h1 style="color:red; font-size:30px;">Tässä teksti on punaista ja 30px kokoista.</h1>

Tässä teksti on punaista ja 30px kokoista.

Kuinka erillistä tyylitiedostoa käytetään?

Jos käytetään erillistä tyylitiedostoa (suositeltavaa), jossa kaikki tyyliohjeet ovat, niin tehdään tiedosto, jonka pääte on .css ja HTML-dokumentissa ladataan tyylitiedosto.

<link href="tyylitiedosto.css" media="screen" rel="stylesheet" title="main">

Tehdään esimerkiksi tiedosto jonka nimi on tyylit ja tiedostopääte .css

Tämän jälkeen lisäämme HTML-dokumenttiin HEAD-tagin sisään koodin, joka lataa tyylitiedoston.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link href="tyylit.css" media="screen" rel="stylesheet" title="main">
</head>
<body></body>
</html>

HUOM! HTML:ssä tagia ei suljeta, mutta XHTML:ssä tagi tulee sulkea vinoviivalla.

<link href="tyylitiedosto.css" media="screen" rel="stylesheet" title="main" />

Mediatyypit

Mediatyypeillä voidaan määrittää mitkä tyyliohjeet näkyvät milläkin laitteella. Esimerkiksi voidaan tehdä tyyliohjeet, jotka näkyvät normaalilla tietokoneella ja toiset kevyemmät tyyliohjeet, jotka näkyvät esimerkiksi kännykällä.

Mediatyyppi määritellään MEDIA-attribuutilla. Esimerkeissä olen käyttänyt attribuutin arvona SCREEN, joka on siis normaali tietokoneen näyttö.

<link href="tyylitiedosto.css" media="screen" rel="stylesheet" title="main">

Jos halutaan tehdä esimerkiksi tyyliohjeet, jotka näkyvät kannettavilla laitteilla (ei kannettava tietokone), kuten kännykällä, niin voidaan käyttää attribuutin arvona HANDHELD. Tai jos halutaan tehdä tyyliohjeet, jotka näkyvät kun sivu tulostetaan tulostimella, niin voidaan käyttää PRINT arvoa.

Lisää tietoa mediatyypeistä voi lukea esimerkiksi W3C:n sivuilta (englanniksi).

Seuraava osa Tekstin muotoilu >>