Yksiköt

Erilaisten leveyksien, pituuksien ym. etäisyyksien esittämiseen on olemassa kahdeksan mittayksikköä:

(Lähde: Jukka K. Korpela, CSS verkkosivujen muotoilussa, s. 138)

Lisäksi voidaan käyttää prosentteja (ilmoitetaan %-merkillä)

• Yksikkö on pakollinen, jos suure ei ole 0
• Yksikön edestä ei saa jättää suuretta pois
• Luku ja yksikkö kirjoitetaan aina yhteen. Esim. 5px
• CSS:ssä voidaan käyttää sekä kokonaislukuja että desimaalilukuja (käytetään desimaalipistettä, ei pilkkua). Esimerkiksi 1.2em
• Luku voidaan myös aloittaa pisteellä, jolloin kokonaisosa tulkitaan nollaksi. Esim. .55em -> 0.55em
• Luvun edessä voi olla myös negatiivinen etumerkki, esim. -1.2em. Monissa yhteyksissä negatiivisten lukujen käyttöon kielletty.

Suhteelliset yksiköt em ja ex

• Yksikkö em tarkoittaa ympäröivän lohkon fontin kokoa, joka on yleensä sama kuin fontin korkeus
• em soveltuu hyvin leveyksien ja korkeuksien esittämiseen: se mukautuu katselutilanteeseen ja käyttäjän fonttikoon valintoihin  
• ex vastaa x-kirjaimen korkeutta
• useimmat selaimet eivät varsinaisesti tue ex-yksikköä, vaan toteuttavat sen em-yksikön puolikkaana

Pikseli

• pikseli tarkoittaak kuvapistettä eli pientä alkiota, josta teksti ja kuvien esitys kuvaruudulla muodostuu
• pikselin fyysinen koko riippuu näytön koosta ja erotustarkkuudesta (resoluutiosta)
• yleensä kirjoittimessa pikselit ovat huomattavasti pienempiä kuin ruudulla
• yhtälö on yleensä 1 tuuma = 96 pikseliä

Yksikön valitseminen

Laajempia sivustoja suunnitellessa kannattaa miettiä yksikön käyttö tarkkaan. Yleensä tyylisäännöt ovat riippuvaisia toisistaan, ja yhden säännön yksikön muutos vaikuttaa moneen muuhun kohtaan sivustoa. Pitkän tyylitiedoston korjailu on työlästä ja aikaa vievää.

 Jukka J. Korpela suosittelee, että sivustoilla käytetään lähtökohtaisesti em-yksikköä, jolloin mitat ovat suhteessa siihen, kuinka isona teksti näkyy.

Värien käyttö verkkosivuilla

Kuvien ja multimedia-elementtien käyttö verkkosivuilla

    - img-elementin muoto ja määritteet (alt, align, border, width, height, hspace, vspace, longdesc )
    - http://matriisi.ee.tut.fi/~ph/hp99/kuva/

Läpinäkyvyys.

Harjoituksia.