1.10 Tyyleissä käytettävät arvot ja ominaisuudet
Tyylin ominaisuuksien ja arvojen kirjoittamista koskevat hyvin monet säännöt. Seuraavissa kappaleissa on
kerrottu tarkemmin ominaisuuteen ja siihen liittyvien arvojen antamiseen liittyvistä asioista.
1.10.1 Arvojen oikeinkirjoittaminen
Arvojen ja ominaisuuksien kirjoittamisessa kannattaa kiinnittää huomiota muutamiin asioihin. Seuraavaan
on kerätty muutamia varottavia asioita ominaisuuksien ja arvojen antamisessa sekä niitä vastaavat oikeat
tavat.
Arvoille ja ominaisuuksille kelpaavat vain tiettyä muotoa olevat arvot. Mitä tahansa ominaisuutta tai
arvoa ei voida antaa tyylille. Ominaisuudet ja arvot ovat hyvin tarkkoja oikeinkirjoituksesta, mutta
isoilla ja pienillä kirjaimilla ei yleensä ole väliä.
Esimerkki ominaisuuden kirjoittamisesta väärin. Virhe on aika tyypillinen, koska bgcolor on yksi
body-elementin attribuutti, joten sen voi kirjoittaa helposti myös body-tyylin määrittelyyn.
background-color: black;	/* OIKEIN */

bgcolor: black;			/* VÄÄRIN */
Arvoa ei saa laittaa minkäänlaisten lainausmerkkien väliin, koska se muuttaa arvon merkkijonoksi.
Esimerkki oikeasta tavasta antaa ominaisuudelle arvo. 
color: red;  	/* OIKEIN */

color: "red";	/* VÄÄRIN */
Arvot annetaan usein pituusyksiköissä. Tällöin arvo-osassa ei saa olla välilyöntejä luvun ja yksikön
välissä. 
margin: 20mm;	/* OIKEIN */

margin: 20 mm;	/* VÄÄRIN */
1.10.2 Pituuden ilmoittaminen
Pituuden ilmoittamisella tarkoitetaan elementin vaaka- että pystysuuntaisen pituuden tai elementin
sijainnin ilmoittamista. 
Suhteelliset pituusmitat
Suhteellinen pituus voidaan ilmaista kolmea eri yksikköä käyttäen. Pituus voidaan ilmaista em-yksiköllä,
jolloin kyseessä on suhteellisen pituuden ilmoittaminen kappaleen oletuskirjasimeen nähden. Seuraavassa
esimerkissä h1-elementille määritellään marginaali, joka on 1,5-kertainen kappaleen peruskirjasimen
kokoon nähden. Jos em-yksikköä käytetään kirjasimen koon määrittämiseen, niin silloin kirjaisimen koko
lasketaan ylemmän tason elementin kirjasinkoon mukaan. Esimerkiksi h1:n kirjasinkoko laskettaisiin
body-elementin kirjasinkoon suhteen, koska h1-elementti sijaitsee body-elementin sisällä.
h1 { margin: 1.5em }
Pituus voidaan ilmaista myös käyttäen ex-yksikköä, jolloin kyseessä elementin pituus kappaleen pieneen
kirjaimeen nähden. Seuraavassa esimerkissä h1-tyylille määritellään uusi marginaali, joka on
1,5-kertainen verrattuna elementin pieneen oletuskirjaimeen nähden. Jos ex-yksikköä käytetään kirjasimen
koon määrittämiseen, niin silloin kirjasimen koko lasketaan periytyvän elementin kirjasinkoon kautta.
Esimerkiksi h1-elementin kirjasinkoko laskettaisiin body-elementin kirjasinkoon suhteen.
h1 { margin: 1.5ex }
Pituus voidaan ilmaista myös käyttäen px-yksikköä, joka tarkoittaa suhteellista kokoa verrattuna
katselulaitteen kuvapisteen kokoon. Seuraavassa esimerkissä h1-tyylille määritellään uusi kirjainkoko,
joka 14-kertainen katseltavan laitteen kuvapisteen kokoon verrattuna.
h1 { font-size: 14px }
Pituuden ilmoittamisessa pätevät myös perintään liittyvät säännöt. Suhteelliset pituusmitat eivät
periydy, mutta suhteellisista pituusmitoista lasketut kiinteät arvot periytyvät. Seuraavassa esimerkissä
body-tyylissä oleva tekstin sisennys on 36 pt:tä. Tällöin myös h1-tyylin tekstin sisennys on 36 pt:tä
eikä 45 pt:tä, kuten periytymisen perusteella voisi olettaa.
body { 
	font-size: 12pt;
	text-indent: 3em;
}
h1 { 
	font-size: 15pt; 
}
Absoluuttinen pituus
Absoluuttisia pituusyksiköitä ovat in, cm, mm, pt, ja pc. Absoluuttiset pituusyksiköt ovat huomattavasti
tunnetumpia kuin suhteelliset pituusyksiköt, joten niitä käsitellään ainoastaan muutamilla esimerkeillä.
Absoluuttisia pituuksia kannattaa välttää viimeiseen asti, koska sivujen katseltavuus voi heiketä
oleellisesti niitä käytettäessä!
Seuraavassa esimerkissä kappaleen marginaaliksi asetetaan 0,2 tuumaa.
p { margin: 0.2in }
Seuraavassa esimerkissä kappaleen marginaaliksi asetetaan 2 senttimetriä.
p { margin: 2cm } 
Seuraavassa esimerkissä kappaleen marginaaliksi asetetaan 20 millimetriä.
p { margin: 20mm }
Seuraavassa esimerkissä kappaleen kirjasimen kooksi asetetaan 12 pistettä. Piste on tässä yhteydessä 1/72
tuumaa.
p { font-size: 12pt }
Seuraavassa esimerkissä kappaleen kirjasimen kooksi asetetaan yksi pica. Yksi pica vastaa 12 pt:tä.
p { font-size: 1pc } 
1.10.3 Prosenttien ilmoittaminen
Elementtien pituus tai koko voidaan ilmoittaa myös prosenttilukuna. Tällöin pituusmitta on täysin
suhteellinen kyseisen kappaleen kirjasinkokoon tai ylemmän tason elementin kirjasinkokoon. Normaalissa
HTML-dokumentissa prosenttiarvot pitää antaa lainausmerkkien sisällä, mutta tyylilomakkeissa
lainausmerkkien käyttäminen prosenttiarvojen ympärillä on kiellettyä. Seuraavassa esimerkissä
h1-elementin kirjasinkoko määritellään prosentuaalisesti, jolloin sen uusi kirjasinkoko on 1,2-kertainen
ylemmän tason elementin oletuskirjasimeen nähden.
H1 { font-size: 120%}
1.10.4 Värien ilmoittaminen
Tyyleissä värien määrittäminen tapahtuu muutamaa poikkeusta lukuun ottamatta samalla tavoin kuin
normaalissa HTML-dokumentissa.
Värit voidaan määritellä värien englanninkielisillä nimillä, kuten esimerkiksi blue. Tällaisia värejä on
kuitenkin vain kuusitoista kappaletta (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white, ja yellow), joten yleensä värit joudutaan määrittelemään
heksadesimaalilukujen avulla. Värin heksadesimaaliluku  annetaan risuaitamerkin (#) jälkeen ja yhtä RGB
(RedGreenBlue)-väriä voi vastata joko yksi- tai kaksidesimaalista heksadesimaalilukua. Annettaessa väri
yhdellä desimaalilla  täydennetään väri kaksidesimaaliseksi tuplaamalla yksidesimaalinen arvo.
Esimerkiksi f muutetaan muotoon ff. Perinteisestä HTML-dokumentista poiketen värit voidaan antaa myös
prosenttilukuina ja kokonaislukuina. Tällöinkin värien suhteet määritellään kolmen RGB-värien (punainen,
vihreä ja sininen) osuuksina. Kaikkien seuraavien esimerkkien p-elementtien väriksi on asetettu punainen.
P { color: #f00; }
P { color: #ff0000; }
P { color: rgb(255, 0, 0); }
P { color: rgb(100%, 0%, 0%); }
Seuraavassa esimerkissä body-elementille on annettu väriksi keltainen ja taustaväriksi valkea.
H1-elementille on vastaavasti määritelty väriksi punainen ja taustaväriksi valkea. P-elementille on
vastaavasti määritelty väriksi valkea ja taustan väriksi musta.
body {
	color: yellow;
	background: #ffffff;
}
h1 {
	color: #f00; 
	background-color: white;
}
p {
	color: rgb(255,255,255); 
	background-color: rgb(0%,0%,0%); 
}