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

5.1.2.3 Tyyliohjeen liittäminen Html-sivuun (tapa2)

Joissakin tilanteissa, kuten esimerkiksi testatessa uudenlaista sivun asemointia, voi olla helpompaa, että CSS-ohje on samassa dokumentissa HTML-merkkauksen kanssa, joilloin tyyliohjeen muokkaaminen ja testaaminen on kätevämpää. Tällöin tyyliohje lisätään head-elementtiin seuraavan esimerkin mukaisesti (tärkeät osat punaisella):

<html> <head> <title>CSS-esimerkki 1</title> <style type="text/css"> h1 {color: green} .omakorostus {font-weight: bold; color:red} </style> </head> <body> <h1>Vihreä otsikko</h1> <p>Tässä kappaleessa sana <span class="omakorostus">pölvästi</span> on korostettu!</p> </body> </html>

Alla kuvassa nro 1 on yllä olevan merkkauksen tulos Mozilla-selaimessa. Kuvassa 2 on sama ilman CSS-tyyliohjetta.

Kuva 1Kuva 2 (ilman CSS:ää)
cssesim1 (4K) cssesim1eicss (3K)