Tyyliohjeen liittäminen Html-sivuun (tapa1)
Erillinen tyyliohjetiedosto (voi olla useitakin) on suositeltavin vähänkin isommissa sivustoissa.
Tyyliohjeen toimiminen edellyttää kahta asiaa:
|
Otetaan esimerkkinä otsikkotyylin muokkaaminen. Jos halutaan, että kaikki ensimmäisen tason otsikot näytetään vihreinä, kirjoitetaan jollakin tekstieditorilla (vaikkapa Muistio eli NotePad) rivi h1 {color:green} ja tallennetaan vaikkapa nimellä tyylit.css esimerkiksi samaan kansioon nettisivun kanssa.
Tämän lisäksi täytyy HTML-dokumenttiin kirjoittaa osoite, jotta dokumentti osaa etsiä tyyliohjeen oikeasta paikasta. Tämä osoite (link-elementti) on muotoa
<link rel="stylesheet" type="text/css" href="tyylit.css" />,
joka ilmoittaa, että selaimen pitäisi hakea osoitteesta tyylit.css tyyppiä text/css oleva tyyliohje. Osoite sijoitetaan HTML-sivulla head-elementtiin, esimerkiksi heti title-elementin jälkeen.
Yllä kuvattu tapa asettaa CSS-ohje omaan tiedostoonsa on paras silloin, kun samaa tyylisivua käytetään useassa nettisivussa. Tällöin päivitykset ovat sangen helppoja.
