Ensimmäinen CSS-tyylitiedosto

HTML-merkkausta voi kirjoittaa millä tahansa tekstieditorilla kuten vaikkapa Muistiolla (Notepad). Tarkastellaan seuraavaa merkkausta (tehtävissä kokeilet vastaavaa käytännössä):

Merkkauksessa on HTML-sivun perusosat, head ja body. Head-osaan tulee yleisiä määrittelyitä ja selaimen yläpalkissa näkyvä "title", mutta kaikki nettisivulla näkyvät elementit kirjoitetaan body-osaan.

Oletetaan, että yllä oleva merkkaus on tallennettu nimellä "ekaomasivu.html". Kun tiedoston nimeä klikataan resurssienhallinna kautta, pitäisi sivun avautua oletusselaimessa suunnilleen seuraavan kuvan näköisenä:

Kuva 1

Otsikko on kuvassa vasemmassa laidassa ja normaaliteksti on aika pientä. Tehdäänpä pieni tyyliohje, joka muuttaa otsikon keskellä ruutua ja vieläpä vihreäksi ja normaalitekstin isommaksi. Tämä saadaan aikaan kirjoittamalla uuteen tekstitiedostoon seuraava teksti:

Tallennetaan tämä teksti nimellä "tyyliohje.css" samaan kansioon "ekaomasivu.html"-tiedoston kanssa. Jotta nyt omaekasivu-tiedosto osaa lukea tyyliohjeen, pitää html-merkkaukseen lisätä linkki ohjeeseen (merkitty alla punaisella), jolloin merkkaus näyttää kokonaisuudessaan seuraavalta:

Kun tiedostoa nyt klikataan resurssienhallinnan kautta, pitäisi sivun avautua suunnilleen seuraavan näköisenä:

Kuva 2

Tarkkanäköinen huomaa, että otsikkokin on hieman suurentunut, vaikka se ei varsinaisesti ollut ajatuksena. Jos tämä haittaa, voi tyylitiedostossa määritellä otsikon koon samalla tavalla kuin body-tekstin koon. Kokeilemalla saa prosenttiluvun sopivaksi (170% lienee aika hyvä).