[IMAGE]

 Tyylin sijoittaminen
Tyylien avulla voidaan muokata sivun ulkoasua helposti. Määritykset voidaan tehdä kolmella tavalla. Erillisenä tyylitiedostona, HEAD-lohkoon sijoitettuna tai sitten tyyli määritellään yksittäiselle elementille. 

Tyylit kiinnitetään normaalisti HTML:n elementteihin niin, että tehdään esimerkiksi H1-elementille muotoilumääritykset ja sen jälkeen automaattisesti kaikki dokumentissa olevat H1-elementillä merkityt otsikot ovat samanlaisia. Jos tyylit määritellään erillisessä tiedostossa, voidaan samaa tyylitiedostoa käyttää koko sivuston kaikkien sivujen pohjana. Ajattele mikä helpotus sivujen päivittäjälle. Jos halutaan vaihtaa otsikoiden muotoa, niin yksi korjaus tyylitiedostossa ja kaikilla sivuilla tapahtuu muutos.

Ongelmia tuottaa tyylien käytössä vielä se, että kaikki selaimet eivät lupauksista huolimatta tue tyylejä kaikilta osin. Esimerkkinä käy hyvin kappaletyyli eli P-elementille tehty tyylimääritys. Jos kappale sijaitsee taulukon solussa, ei tyyli toimi Netscapessa. Tällöin pitää tyyli määritellä solulle eli TD-elementille tai tehdä oma tyyliluokka, johon solu kiinnitetään <TD class="muotoilu">

 

Tapa 1: Kirjoitetaan suoraan HTML-elementtiin tyylimäärittely:
<P STYLE="font-family:arial;font-weight:bold;color:blue"> muotoiltava kappale</P>

Eli STYLE-attribuutin jälkeen sitaattien sisään kirjoitetaan tarvittavat määritelyt. Erilliset määrittelyt erotetaan toisistaan puolipisteellä.

Tapa 2: Kirjoitetaan HTML-koodiin joukkoon <HEAD> ja </HEAD>-elementtien väliin

<HTML>
<HEAD>
<TITLE>Tyylisivu</TITLE>
<STYLE TYPE="text/css">
P {
font-family:arial;
font-weight:bold;
color:blue;
}
</STYLE>
</HEAD>
<BODY>
<P> Tähän kappaleeseen liitetään yllämääritellyt tyylit</P>
<P> ja sama koskee mitä tahansa kappaletta eli P-elementillä merkittyä kohtaa</P>
</BODY>
</HTML>

Tyyliluokat:

Joillekin kappaleille voidaan tarpeen vaatiessa määritellä lisää ominaisuuksia. Niiden liittäminen tapahtuu merkitsemällä tyyliluokka STYLE-elementtien väliin:
.luokka{
ominaisuus:arvo;
}

Tällä tavalla määritelty tyyli liitetään HTML-tagiin CLASS-attribuutilla:

<HTML>
<HEAD>
<TITLE>Tyylisivu</TITLE>
<STYLE TYPE="text/css">
P {
font-family:arial;
font-weight:bold;
color:blue;
}
.tarpeellinen{
font-size:18pt;
font-style:italic;
}
</STYLE>
</HEAD>
<BODY>
<P> Tähän kappaleeseen liitetään yllämääritellyt tyylit</P>
<P CLASS="tarpeellinen"> ja sama koskee mitä tahansa kappaletta eli P-elementillä merkittyä kohtaa</P>
</BODY>
</HTML>

Yllä olevassa esimerkissä molempiin P-elementeillä aloittetuihin kappaleisiin käytetään P:llä määriteltyä tyyliä. Alempaan kappaleeseen lisätään vielä CLASS-attribuutilla lisämääritteitä.

Tapa 3: Kirjoitetaan tekstieditorilla (esim. muistio) erillinen tyylitiedosto. Jolloin merkitään vain tyylimäärittelyt ja tallennetaan tiedosto nimellä jokin_tyyli.css
Tyylitiedosto otetaan käyttöön lisäämällä HTML-koodiin HEAD-lohkoon elementti:
<LINK href="tiedoston_nimi.css" rel="stylesheet" type="text/css">

Tällöin tyylejä voi käyttää missä tahansa HTML-dokumentissa, jotka käyttävät yhteistä tyylitiedostoa eli sivujen yhtenäisyys on taattua....jos vain käytössä on selain, joka tukee tyylimäärittelyjä.

Yllä olevia määrittelyjä voidaan tehdä myös BODY (koko sivu), H1-H6 (otsikot)ja A:link (linkki), A:visited (vierailtu linkki), A:active (aktiivinen linkki) ja SPAN-elemetillä liittää yksittäisiin sanoihin kappaleen sisällä.

.muotoilu{
font-family:monospace;
}
.............
<P>Tämä on <SPAN CLASS="muotoilu">Span elementillä muotoiltu</SPAN>tekstin osa.

Tekstien muotoilu