Tyylimäärittely voidaan liittää HTML-dokumenttiin kolmella tavalla:
1. HTML-elementtiin upottaminen
- Määrittely kirjoitetaan HTML-dokumentissa sen elementin alkutunnisteeseen, jonka ulkoasua halutaan muokata
- Määrittely ohittaa kaikki muut määrittelyt
<p style="font-size: 12px">Tämän tekstin fonttikoko on 12 pikseliä</p>
2. HTML-dokumenttiin upottaminen
- Määrittely kirjoitetaan HTML-dokumentin HEAD-lohkoon
<style type="text/css"> p {font-size: 12px;} </style>
3. Erillinen tyylitiedosto
- Ulkoasu määritellään erilliseen tyylitiedostoon
- Tiedosto liitetään HTML-dokumenttiin HEAD-lohkossa LINK-tunnisteella
- Suositeltava tapa, koska sama tyylitiedosto voidaan helposti liittää mihin dokumenttiin tahansa
- Tyylitiedoston linkittäminen:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Määrittelyiden vaikutus html-sivuun:
Jos ulkoasun määrittely on tehty eri kahdella tai useammalla tavalla, ne vaikuttavat ulkoasuun tässä järjestyksessä:
1. Ensisijaisesti huomioidaan yksittäisen html-elementin tyyli (kohta 1)
2. Toiseksi HEAD-lohkossa määritetty tyyli (kohta 2)
3. Kolmanneksi ulkoisessa tyylitiedostossa määritelty tyyli (kohta 3)