...
- 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:
No Format <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)
...
Harjoituksia
Harjoitus 1
1. Avaa Notepad ja tallenna ja samaan kansioon muin muutkin harjoitukset nimellä tyyli.css
2. Avaa jokin viime kerralla tehty harjoitussivu, joka sisältää kuvia ja tekstiä. 2.
3. Linkitä tyyli.css -tiedosto harjoitussivuun LINK-määritteellä
4. Lisää tyylitiedostoon perustyylejä: body, p, a (+ pseudoluokat).
Esim.
| No Format |
|---|
BODY {
background-color : #FFFFFF;
font-family : Verdana, Arial, sans-serif;
color : #000088;
margin: 0px;
}
|