Mitä CSS on?
CSS (Cascading Style Sheets) on yleisin tapa määrittää sivun ulkoasu ja asemointi. Tyylimääritykset ovat nimensä mukaan "porrastettuja (Cascading)", joka tarkoittaa sitä että ne voidaan haluttaessa ohittaa. Eli myöhemmin koodissa esitetty määritys korvaa/ohittaa aikaisemmin määritetyn. Näin esim. HTML -sivun head -osassa määritetty kaikkien sivujen yhteinen muotoilu voidaan halutulla sivulla korvata toisella kirjoittamalla uusi määritys koodiin alemmaksi.
CSS tyylimääritys voidaan kirjoittaa sivun head -osaan, jolloin se koskee vain ko. sivua. Silloin se lisätään esim. seuraavasti:
<style type="text/css">
body {
background-color: #CCC;
}
</style>
Esimerkissä ensimmäisellä rivillä määritetään <style type="text/css"> -komennolla tyylimääritys alkavaksi ja kerrotaan että se on tyypiltään text/css tyylimääritys. Seuraavaksi kirjoitetaan halutut määritykset, esimerkissä on määritetty vain body -komennolle taustaväri, mutta tähän kohtaan voitaisiin siis kirjoittaa useita eri määrityksiä. Lopuksi tyylimääritysalue lopetetaan </style> -komennolla.
Useinmiten tyylimääritykset tehdään erilliseen tyylitiedostoon, joka sitten linkitetään HTML -sivun head osaan. Näin kaikki sivuston tyylimääritykset ovat yhdessä tiedossa, jonka muuttaminen muuttaa yhdellä kertaa koko sivuston ulkoasua (ellei jollain sivulla ole ohitettu tyylimääritystä uudella tyylimäärityksellä). Tällainen erillinen tiedosto voidaan kirjoittaa millä vaan tekstieditorilla (esim. Muistio) tai luoda esim. Dreamweaverin avulla. Alla esimerkki HTML -sivun yläosan koodista, johon on linkitetty erillinen tyylitiedosto (tyyli.css).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tyyliesimerkki</title>
<link href="tyyli.css" rel="stylesheet" type="text/css">
</head>
<body>
Sivun sisältö
</body>
</html>
Erillisessä tyyli.css -tiedostossa voisi olla esim. seuraava sisältö:
@charset "utf-8";
body {
background-color: #CCC;
}
CSS -tiedosto on hyvä aloittaa käytettävän merkistön määrityksellä (@charset "uft-8";). Sen jälkeen varsinaiset tyylimääritykset. Yllä on määritetty vain sivun taustaväri uudestaan. Varsinaiset määritykset tulevat aaltosulkujen { } väliin ja jokainen määritys tulee lopettaa puolipisteeseen. Alla vielä toinen esimerkki jossa h1 -tasoinen otsikko määritetään halutuksi.
h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
font-weight: bold;
color: #00F;
}
Määrityksen ensimmäisellä rivillä määritettän otsikon fontti Verdanaksi, jos sitä ei ole koneelle asennettu käytetään Genevaa ja jos sitäkään ei ole käytetään jotain sans-serif perheen fonttia. Toisella rivillä asetetaan fonttikoko pikseleissä, kolmannella kerrotaan että fontti lihavoidaan ja neljännellä sillä määritetään väri (tumma sininen). Itse komennoista lisää myöhemmin.
CSS määrityksestä on ilmestynyt kolme versiota (CSS1 (1996), CSS2 (2004) ja CSS3). Nykyisin eri selaimien tuki CSS -kielille on jo aika kattava. Voit katsoa kuinka eri selaimet tukevat uusinta CSS3 kieltä esim. tästä linkistä.
