\(\renewcommand{\vec}[1]{\mathbf{#1}} \DeclareMathOperator*{\sijoitus}{\Big/} \newcommand{\eval}[2]{\sijoitus_{\kern-0.7em#1}^{\kern0.7em#2}\!} \)

5.1.2.2 Tyyliohjeen liittäminen Html-sivuun (tapa1)

Erillinen tyyliohjetiedosto (voi olla useitakin) on suositeltavin vähänkin isommissa sivustoissa.

Tyyliohjeen toimiminen edellyttää kahta asiaa:
  1. tarvitaan tyyliohje eli tiedosto, jonka tunniste (nimen lopussa) on .css
  2. nettisivun head-osaan pitää lisätä tyyliohjeen osoite (<link rel="stylesheet" type="text/css" href="tiedostopolku.css" />)

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.