On useita tapoja tyylisivujen linkittämiseksi HTML-dokumenttiin, jokaisella niistä on omia etuja ja huonoja puolia. Uusia HTML elementtejä ja attribuutteja on tehty tyylisivujen linkittämisen HTML:ään helpottamiseksi.
Ulkoinen tyylisivu on erillinen css-päätteinen tiedosto. Ulkoiset tyylisivut linkitetään HTML :n LINK-elementtiä käyttäen:
<LINK REL="Stylesheet" HREF="Style.css" TYPE="text/css
MEDIA="screen">
<LINK REL="Stylesheet" HREF="color-8b.css" TYPE="text/css
TITLE="8-bit Color Style" MEDIA="screen,print">
<LINK REL="Alternate Stylesheet" HREF="color-24b.css"
TYPE="text/css" TITLE="24-bit Color Style
MEDIA="screen,print">
<LINK REL="Stylesheet" HREF="aural.css"> TYPE="text/css
MEDIA="aural"><LINK> tagi sijoitetaan HTML:n HEAD osioon.
Ulkoiset tyylisivut eivät saa sisältää mitään HTML-tageja kuten <HEAD> tai <STYLE>.
<LINK>-tagille voidaan määrittää valinnainen MEDIA-attribuutti, joka ilmaisee mille esitysvälineelle tyylisivu on tehty. Mahdolliset arvot ovat:
Useampi esitysväline määritetään pilkulla erotettuina tai arvolla all.
Netscape Navigator 4.x virheellisesti ohittaa minkätahansa ulkoisen tai sisäisen tyylisivun, jonka MEDIA-atribuutin arvo on muu kuin screen. Esimerkiksi, MEDIA="screen,projection" tapauksessa Navigator 4.x ohittaa tyylisivun vaikka esitysväline on näyttö. Navigator 4.x ohittaa myös tyylisivut joille on tehty MEDIA="all" määritys.
REL-attribuutti kuvaa linkitetyn tiedoston ja HTML-tiedoston suhdetta. REL="StyleSheet" määrittää suositeltavan tyylisivun, kun taas REL="Alternate StyleSheet" määrittää vaihtoehtoisen tyylisivun. Suositeltavaa tyylisivua käytetään aina kun tyylisivut ovat päällä selaimessa. TITLE-attribuutin poissaolo, kuten ensimmäinen <LINK>-tagi esimerkissä, määrää pysyvän tyylisivun.
Suositeltava tyylisivu on se jota aina käytetään automaattisesti, kuten toinen <LINK> -tagi esimerkissä. REL="StyleSheet"- ja TITLE- attribuuttien yhdistelmä määrää suositellun tyylisivun.
Vaihtoehtoinen tyylisivu merkitään REL="Alternative StyleSheet" -attribuutilla. Kolmas <LINK> tagi esimerkissä määrittää vaihtoehtoisen tyylisivun, jonka käyttäjä voisi valita suositeltavan tyylisivun tilalle.
Nykyisistä selaimista yleensä puuttuu mahdollisuus vaihtoehtoisten tyylisivujen valitsemiseen.
Yksi tyyli voidaan antaa myös useilla tyylisivuilla:
<LINK REL="StyleSheet" HREF="perus.css" TITLE="tyyli">
<LINK REL="StyleSheet" HREF="taulukot.css" TITLE="tyyli">
<LINK REL="StyleSheet" HREF="lomake.css" TITLE="tyyli">Tässä esimerkissä kolme tyylisivua on yhdistetty yhdeksi "tyyli"-nimiseksi tyyliksi jota kätetään kuin suositeltua tyylisivua. Useiden tyylisivujen yhdistämiseksi yhdeksi tyyliksi niillä kaikilla täytyy olla sama TITLE-attribuutti.
Ulkoinen tyylisivu on ihanteellinen kun samaa tyyliä käytetään useilla sivuilla. Ulkoisella tyylisivulla voidaan vaihtaa kerralla koko sivuston tyyli muuttamalla vain yhtä tiedostoa. Useimmat selaimet sijoittavat ulkoisen tyylisivun selaimen välimuistiin viiveen välttämiseksi seuraavalla sivun esityskerralla.
Tyylisivu voidaan sulauttaa HTML-dokumenttiin sijoittamalla se STYLE-elementin sisään.
<STYLE TYPE="text/css" MEDIA="screen">
<!--
BODY { background: url(tausta.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>STYLE-elementti sijoitetaan dokumentin HEAD-osioon. Pakollinen TYPE-attribuutti toimii samoin kuin ulkoisilla tyylisivuilla. Samoin myös TITLE ja MEDIA -attribuutit voidaan määrittäää STYLE-elementille.
Vanhemmat selaimet jotka eivät tunnistaisi STYLE-elementtiä näyttäisivät sen normaalisti kuten BODY-elementin sisällön. Tämän estämiseksi STYLE-elementin sisältö merkitään kommentiksi (<!-- kommentti -->), kuten edeltävässä esimerkissä.
Sisäisiä tyylisivuja kannattaisi käyttää kun vain yhdellä dokumentilla on sama tyyli. Jos samaa tyyliä käytetään useilla sivuilla on suositeltavaa käyttää ulkoisia tyylisivuja.
Ulkoinen tyylisivu voidaan tuoda CSS:n @import määritteellä. Sitä voidaan käyttää sekä ulkoisilla tyylisivuilla (oma css-päätteinen tiedosto) että STYLE-elementin sisällä:
<STYLE TYPE="text/css" MEDIA="screen,projection">
<!--
@import url(perus.css);
@import url(erikois.css);
DT { background: yellow }
-->
</STYLE>
Huomaa että muita CSS-sääntöjä voidaan yhä
sisällyttää STYLE-
elementtiin, mutta kaikkien @import-
määritysten täytyy olla tyylisivun alussa. Kaikki
tyylisivulla määritetyt säännöt ohittavat
ristiriitaiset säännöt tuoduissa tyylisivuissa.
Esimerkiksi vaikka yksi tuoduista tyylisivuista sisältäisi:
DT { background : aqua }
säännön, DT-elementin
tausta olisi yhä keltainen.
Tyylisivujen tuontijärjestys on tärkeää niiden lomittumisen/tärkeysjärjestyksen varmistamiseksi. Jos yläpuolisessa esimerkissä tuodussa perus.css tyylisivussa STRONG -elementti on määritetty näkymään punaisena ja erikois.css tyylisivulla se olisi määritetty keltaiseksi, näistä jälkimmäinen voittaisi ja elementti näkuisi keltaisena.
Tuodut tyylisivut ovat hyviä modulirakenteen tekoon. Esimerkiksi eri valitsimet voidaan jakaa eri tyylisivuille. Voi olla perus.css, jossa on kaikki yleisesti käytetyt elementit kuten: BODY, P, H1 ja H2. Toinen erikois.css-tyylisivu voi sisältää vähemmän käytettyjä elementtejä kuten: CODE, BLOCKQUOTE ja DFN. taulukot.css voi sisältää säännöt taulukon elementeille. Nämä kolme tyylisivua voidaan tarvittaessa sisällyttää HTML-dokumenttiin @import-määritteellä. Tyylisivut voidaan myös yhdistää LINK-elementillä.
Tyylisääntö voidaan sijoittaa rivin sisään STYLE-attribuutilla. STYLE-attribuutti voidaan määrittää mille tahansa BODY-elementin sisältämälle elementille (Mukaanlukien BODY-elementti), paitsi BASEFONT, PARAM ja SCRIPT-elementeille. Attribuutti ottaa arvokseen minkä tahansa määrän CSS-sääntöjä, jotka erotetaan toisistaan puolipisteellä. Esimerkiksi:
<P STYLE="color: red; font-family:
'New Century Schoolbook', serif">
Tämä kappale näkyy punaisena ja New Century
Schoolbook fontilla, jos ks. fonttia ei löydy fonttina
käytetään jotain serif-ryhmän fonttia.
</P>Huomaa että New Century Schoolbook on yksinkertaisissa lainausmerkeissä, koska kaksinkertaisia lainausmerkkejä käytetään tyylisäännön ympärillä.
Rivinsisäiset tyylit ovat vähemmän joustavia kuin muut menetelmät. Rivinsisäisten tyylien käyttämiseksi dokumentille täytyy määritellä yksi tyylisivu kieli käyttämällä Content-Style-Type laajennusta dokumentin HEAD-osassa. Seuraava rivi pitää silloin sijoittaa HTML-dokumentin otsikko-osaan:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">Rivinsisäiset tyylisivut menettävät monia etuja sekoittaessaan sisällön ulkoasuun. Rivinsisäiset tyylit vaikuttavat myös kaikilla esitysvälineillä, koska rivinsisäisille tyyleille ei ole menetelmää esitysvälineen valitsemiseen. Tätä keinoa pitää käyttää vähän, kuten jos elementti näkyy kaikilla esitysvälineillä ja vain kerran. Jos tyyli pitää määrätä yksittäiselle elementille ja tietylle esitysvälineelle silloin kannattaa käyttää ID-attribuuttia STYLE -attribuutin sijaan.
CLASS-attribuuttia käytetään määrittämään tyyliluokka johon elementti kuuluu. Esimerkiksi otsikko ja varoitus -luokat voidaan luoda seuraavasti:
.otsikko { color: lime; background: #FF80C0 }
P.varoitus { font-weight: bolder; color: red
background: white }Näihin luokkiin voidaan viitata HTML:ssä CLASS-attribuutilla.
<H1 CLASS="otsikko">Omat laajenukset</H1>
<P CLASS="varoitus">Monilla selainten HTML-laajennuksilla
on negatiivisia sivuvaikutuksia, sekä niitä tukevissa
että tukemattomissa selaimissa</P>Tässä esimerkissä varoitus -luokka voidaan liittää mihintahansa BODY-elementin sisältämään elementtiin, koska sille ei ole määritetty mitään tiettyä elementtiä. Esimerkin tyylisivua käytettäessä varoitus-luokka voidaan liittää vain P-elementtiin.
Hyvä käytäntö on nimetä luokat niiden toiminnan eikä ulkoasun mukaan. varoitus-luokka olisi voitu nimetä nimellä punainen, mutta silloin nimi olisi muuttunut merkityksettömäksi väriä vaihdettaessa.
ID-attribuuttia käytetään määrittämään yksilöllinen tyylisääntö jollekin tietylle elementille, jota käytetään vain kerran dokumentissa.
#tervetuloa { font-size : larger }Voidaan osoittaa HTML:ssä ID -attribuutilla:
<P ID="tervetuloa">Tervetuloa!</P>Jokaisella ID-attribuutilla täytyy olla uniikki arvo, jota ei käytetä muualla dokumentissa. Arvon täytyy alkaa kirjaimella, jota voi seurata kirjaimia, numeroita tai väliviiva. Kirjaimet on rajoitettu välille a-z ja A-Z.
Huomaa että HTML 4 sallii pisteen ID-attribuutin arvona, mutta CSS1 ei. Huomaa myös että CSS1 sallii ASCII-merkit 161-255 merkkeinä samoin kuin numerokoodeina, mutta HTML 4 ei salli näitä merkkejä ID-attribuutin arvona.
ID-attribuutin käyttö on sopivaa silloin kun tyyliä käytetään vain yhden kerran dokumentissa. ID- ja STYLE-attribuutit eroavat sillä että ensinmainittu mahdollistaa esitysväline kohtaiset tyylit ja voidaan osoittaa useaan dokumenttiin (Vain kerran per dokumentti).
SPAN-elementti otettiin mukaan HTML:än tyylien tekemiseksi, jota rakenteelliset HTML-elementit eivät mahdollistaneet. SPAN -elementtiä voidaan käyttää valitsimena ja se hyväksyy myös STYLE, CLASS ja ID -attribuutit.
SPAN on inline-elementti (Ei rivinvaihtoa ennen tai elementin jälkeen), joten sitä voidaan käyttää kuten EM ja STRONG -elementtejä HTML:ssä. Tärkeä ero on se että EM ja STRONG -elementeillä on rakenteellista merkitystä mutta SPAN-elementillä ei ole sellaista merkitystä. Se on olemassa vain tyylien määrittämiseksi ja sillä ei ole vaikutusta kun tyylisivut on laitettu selaimesta pois päältä.
Joitain esimerkkejä SPAN -elementistä:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">
<HTML>
<HEAD>
<TITLE>Esimerkkejä SPAN-elementistä</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
.firstwords { font-variant: small-caps }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS="firstwords">Kappaleen ensimmäisten
sanojen</SPAN> kuuluu olla pienehköillä isoilla
kirjaimilla. Tyyli voi olla myös rivinsisäinen, kuten
sanan ulkonäön muuttamiseksi: <SPAN
STYLE="font-family:arial">Arial</SPAN>.</P>DIV-elementti on toiminnaltaan samanlainen kuin SPAN-elementti ,sillä erotuksella että DIV (Lyhenne sanasta division=jako) on block -tason elementti (Rivinvaihto ennen ja jälkeen elementin). DIV-elementti voi sisältää kappaleita, otsikoita, taulukoita ja jopa toisia DIV-elementtejä. Tämä tekee DIV-elementistä ihanteellisen luokkien määrittelyyn sisällölle, kuten kappaleille, lyhennelmille tai huomautuksille. Esimerkiksi:
<DIV CLASS="note">
<H1>Jaot</H1>
<P>DIV-elementti on määritelty HTML 3.2:ssa,
jossa vain ALIGN-attribuutti on sille sallittu. HTML 4
lisää CLASS, STYLE ja ID attribuutit sallittuihin.
</P>
<P>Koska DIV-elementti voi sisältää muita
"block"-elementtejä, se on hyödyllinen dokumentin
isompien osien merkitsemiseen (Kuten tämän huomautuksen).
</P>
</DIV>Jotkut CSS-tyyleillä tehdyt dokumentit ovat HTML 3.2:n (Wilbur) standardin mukaisia. HTML 3.2 ei määrittele SPAN-elementtiä eikä liioin CLASS , STYLE tai ID-attribuutteja ja siitä puuttuu tuki myös LINK ja STYLE-elementtien TYPE ja MEDIA-attribuuteille.
Nämä tyyleihin liittyvät elementit ja attribuutit eivät vaikuta selaimiin jotka eivät tue niitä, koska silloin selain vain yksinkertaisesti ohittaa ne. Dokumentti joka sisältää näitä elementtejä ja attribuutteja voidaan verrata HTML 4.0 standardiin.