4.1 Tyylit

Tämän kurssin aikana on jo moneen kertaan puhuttu siitä, että oikeaoppisessa WWW-suunnittelussa täytyy sivujen rakenne (sisältö, content) ja ulkoasu (layout) pitää erillään. Tähän mennessä olemme käyttäneet kuitenkin HTML-standardin versiota 4.01 Loose (Transitional), joka sallii ulkoasun määrittelyn HTML-koodin seassa. Esimerkiksi tehtävässä 11 otsikoiden kirjaisintyyppi piti kirjoittaa jokaiseen otsikkoon erikseen <h3> ja </h3>-tunnisteiden sisään, jolloin koodista tulee varsin pitkää ja sekavaa spagettia:

<h3><font face="Courier New, Courier, monospace">Opinnot</font></h3>

Nyt ryhdymme käyttämään kehittyneempää menetelmää, joka on ulkoasun määrittelyn suhteen tiukempi (HTML Strict): siinä ei HTML-koodin sekaan saa laittaa mitään ulkoasuun liittyvää, vaan ulkoasu pitää määritellä erikseen jossain muualla ns. tyylitiedostossa (CSS eli Cascading Style Sheets, nimen alkuperä selitetään myöhemmin).

Tyylimäärittelyt voivat sijaita
a) samassa tiedostossa kuin itse HTML-koodikin ja ihan siellä täällä sekaisin (ei lainkaan suositeltavaa, ja siksi sitä ei käydä tässä läpi), tai
b) samassa tiedostossa kuin itse HTML-koodikin, mutta ei sekaisin koodin kanssa vaan omassa lohkossaan, tai
c) erillisessä tiedostossa (paras vaihtoehto).

Käydään ensin läpi esimerkki, jossa elementtien ulkoasu määritellään samassa tiedostossa mutta omassa lohkossaan. Tämä on näppärää esim. silloin kun haluaa testata, kokeilla ja opetella tyylimäärittelyjen tekemistä:

Esimerkki 1a: HTML-dokumentti ilman tyylimäärittelyjä (huomaa doctype strict!!)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>CSS-testi</title>
</head>

<body>

<h1>Otsikko 1</h1>
<p>blah-blah blah blah-blah blah blah-blah blah</p>

<h1>Otsikko 2</h1>
<p>blah-blah blah blah-blah blah blah-blah blah</p>

<h1>Otsikko 3</h1>
<p>blah-blah blah blah-blah blah blah-blah blah</p>

</body>
</html>

Klikkaamalla tähän saat näkyviin esimerkkikoodia vastaavan sivun.

Jos nyt haluaisin kaikki otsikot sinisellä ja Arial-kirjaisimella, niin vanhalla menetelmällä minun pitäisi jokaikiseen otsikkoon käydä käsin lisäämässä tarvittavat font color ja font face -attribuutit. Ja jos en jostain syystä sitten pidäkään valitsemastani väristä tai kirjaisintyypistä, täytyisi minun käydä muuttamassa koodia jokaisen otsikon osalta erikseen (moninkertainen työ).

Käyttämällä oikeaoppista tyylimäärittelyä minun ei tarvitse kirjoittaa koodin sekaan mitään ylimääräistä, ja voin määritellä kaikkien h1-elementtien tyylin alla olevan esimerkin mukaisesti (katso head-osaan lisättyä koodia):

Esimerkki 1b: HTML-dokumentti tyylimäärittelyn kanssa
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>CSS-testi</title>
	<style>
		h1 { font-family: arial; color: navy; }
	</style>
</head>

<body>

<h1>Otsikko 1</h1>
<p>blah-blah blah blah-blah blah blah-blah blah</p>

<h1>Otsikko 2</h1>
<p>blah-blah blah blah-blah blah blah-blah blah</p>
...
...

Klikkaamalla tähän saat näkyviin jälkimmäistä esimerkkikoodia vastaavan sivun.

Voin siis yhden rivin koodilla muuttaa kaikkien otsikoiden ulkoasua! Ja samalla itse HTML-koodi säilyy selkeänä, eikä alussa esitettyä spagettimössöä pääse syntymään.

Tyylimäärittelyt

Tyyleillä voidaan määrittää

  • jokaisen elementin (h1...h6, p, li, tr, th, td, b, strong, em, i, tt...) kirjaisintyyppi, koko, alleviivaus/lihavointi/kursivointi yms.
    Voidaan siis helposti määrittää vaikkapa kaikkien 2-tason otsikoiden kirjaisintyypiksi Arial tai Courier.
  • elementtien värit ja taustavärit (sivun/kappaleen/taulukon taustaväri, taulukon solussa olevan tekstin väri, lihavoidun tekstin väri ja taustaväri jne).
  • taulukoiden leveys + solujen leveys + solun sisällä olevan tekstin tyylit (fontti, väri...)
  • sivun leveys ja marginaalit (ylä, ala, vasen, oikea)
  • tekstin asemointi: vasen, oikea, keskitetty, tasattu
  • taulukon (tai kehyksen) välistykset (spacing, padding)
  • reunaviivojen paksuus ja väri (kuvat, taulukon solut, otsikot etc)
  • luoda omia tyyliluokkia ja nimetä ne miten itse haluaa
  • paljon sellaisia ulkoasuun liittyviä ominaisuuksia ja toimintoja, joita ei pelkällä HTML-kielellä pystytä lainkaan toteuttamaan.

Itse asiassa tyylistandardeja on viime vuosina kehitetty hirmuisesti, ja tyylien käytöstä täytyisi pitää ihan oma kurssinsa. Tyylit auttavat merkittävästi HTML-sivujen kirjoittamista ja ylläpitämistä, ja mahdollistavat sellaisia ulkoasumäärityksiä, joita ei HTML-kielellä voida edes tehdä.

Katsotaanpa miten tyyli tai tyylit oikein määritellään:

<style>
p { color: #80FF45; }

h1 {
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	color: Navy;
}
</style>

Tyylimäärittely alkaa tunnisteella <style> ja päättyy lopetustagiin </style>. Tyylimäärittelyt sijoitetaan HTML-dokumentin head-osaan.

Yllä olevassa esimerkissä on määritelty, että kaikkien kappaleiden ( p, paragraph) tekstin väri on #80FF45, ja että 1-tason otsikoiden fonttikoko on 16 pikseliä, teksti on lihavoitua ja tasattu vasempaan reunaan sekä sen väriksi on valittu laivastonsininen (tummamnsininen).

CSS-kielen kielioppi eli syntaksi on seuraava:

<elementin nimi> { tyylimäärittelyt hakasulkujen sisään }

Noita tyylimäärittelyjä kutsutaan elementin ominaisuuksi (eng. property). Jokaisen ominaisuusmäärittelyn perään tulee puolipiste. Tämä on erittäin tärkeää, ja yksi yleisimpiä virheitä aloittelevilla koodaajilla onkin noiden puolipisteiden unohtaminen.

Jos ominaisuusmääreitä tulee useita, on tapana selkeyden vuoksi kirjoittaa niistä kukin omalle rivilleen ja käyttää sisennystä:

<elementti> { 
	ominaisuus: arvo; 
	ominaisuus: arvo; 
}

Elementtinä voi olla mikä tahansa HTML-elementti:

  • body
  • h1-h6
  • p
  • sub/sup
  • pre/blockquote
  • li
  • table/tr/th/td
  • img/a (kuvat ja linkit)
  • b/strong/i/em/tt
  • div/span
  • ... jne ...

Samat ominaisuudet voidaan antaa myös useammalla elementille yhtäaikaa:

h1,h2,h3,p {
	text-align: left;
	color: Navy;
}

tai vaikkapa kaikille elementeille samalla kertaa:

* {
	font-family: Courier New, Courier, monospace;
	text-align: center;
}

Käydään hetken kuluttua läpi vielä lisää CSS-kielen kielioppia. Mutta sitä ennen esittelen vielä yhden tekniikan, joka vielä entisestäänkin helpottaa sivujen ylläpitoa ja ulkoasujen määrittelyä.