CSS-tiedoston ominaisuuksia

Tässä osiossa opiskellaan CSS-dokumentin ominaisuuksia. Tutustutaan kirjasimen tyylin ja elementin asettelun ominaisuuksiin sekä värien määrittämiseen. Lopuksi opiskellaan linkkielementinulkoasun ominaisuuksia.

Kirjasimen tyylin määrittäminen

Kirjasimen eli fontin ominaisuuksiin voidaan tyylitiedostossa vaikuttaa esimerkiksi seuraavien ominasuuksien kautta:

font-family ominaisuudella määritellään kirjasintyyppi, jota käytetään. Esimerkkiksi:

 font-family: verdana, sans-serif;
Tässä Verdana on kirjasintyyppi ja sans-serif on yleinen-kirjasinperhe. font-family ominaisuudelle määritellään siis vähintään tyyppi ja yleinen-kirjasinperhe. Yleinen-kirjasinperhe voi olla:
  • serif (Times New Roman)
  • sans-serif (Verdana)
  • monospace (Courier)
Huomaa, että WWW-sivulla kannattaa käyttää sans-serif -kirjasinperheen kirjasimia. Ne näkyvät paremmin selaimessa ja ovat selkeämpiä lukea kuin serif -kirjasinperheen fontit, koska sans-serif -kirjasimissa ei ole päätteitä. Jos kirjasintyypin nimessä on välilyöntejä, täytyy se kirjoittaa lainausmerkkien sisään: 
font-family: "Times New Roman", serif;

font-style ominaisuus määrittää kirjasimen tyylin. Arvo voi olla:

  • normal
  • italic (kursivoitu)
  • oblique (vino)
Esimerkiksi kohdassa 1. kirjasin määritellään normaaliksi ja kohdassa 2. kursivoiduksi:
1.
font-style: normal;
2.
font-style: italic;

font-size ominaisuudella määritellään kirjasimen koko. Kirjasinkoko voidaan määrittää absoluuttisesti arvoilla: xx-small, x-small, small, medium, large, xx-large. Normaalikoko kirjasimelle on medium. Kirjasimen koko voidaan myös määrittää pisteinä. Esimerkiksi kohdassa 1. kirjasinkoko määritellään pieneksi ja kohdassa 2. kirjasinkoko on 15 pistettä:
1.

font-size: small;
2.
font-size: 15pt;

Kirjasimen ominaisuudet voidaan siis määritellä esimerkiksi p-elementin sisällä seuraavasti: 

p{

font-family: tahoma, sans-serif;

font-style: normal;

font-size: 12pt;

}

Elementtien asettelu

Jokaiselle elementille (teksti, taulukko,...) voidaan tyylitiedostossa määritellä ominaisuuksia, jotka muokkaavat elementin asettelua WWW-sivua katseltaessa:

Marginaalit määritetään margin-ominaisuudella. margin-top määrittää elementin ylämarginaali, margin-right oikean, margin-left vasemman ja margin-bottom alamarginaalin. Marginaalin koko ilmoitetaan px-yksikkönä: 

body{

margin-top: 10px;

margin-right: 12px;

margin-bottom: 10px;

margin-left: 12px;

}

HTML-elementtien järjestystä voidaan muuttaa float-ominaisuudella. HTML-elementtien järjestys on normaalisti se, mihin järjestykseen ne on määritelty HTML-dokumentissä. float-ominaisuus voi saada arvokseen left tai right. 

float: left;

Elementin täyteen leveyttä määritellään padding-ominaisuudella. Täyte on tyhjä alue, joka jää sisällön ja rajan väliin. padding-ominaisuus voidaan määritellä pituusyksikköinä: 

p{

padding-top: 2em;

padding-right: 3em;

padding-bottom: 2em;

padding-left: 3em;

}
Tässä esimerkissä on p-elementin padding-ominaisuudelle määritelty ylä- ja alatäytteen leveydeksi kaksi kertaa kappaleen kirjasimen koko ja vasemman ja oikean täyteen leveydeksi kolme kertaa kirjasimen koko.

Elementin rajan ominaisuutta voidaan määritellä border-ominaisuudella. Elementin raja erottaa marginaalin ja elementin täytteen toisistaan. Elementin rajalle voidaan määrittää width (paksuus), color (väri) ja style (ulkoasu). borde-width voi saada arvot: thin, medium, thick (ohut, normaali, paksu), border-color arvoiksi voidaan määritellä värit kuten fontille tai taustalle, border-style saa arvokseen solid (yhteynäinen),double (kaksinkertainen), dotted (pilkutettu), dashed (katkoviiva). 

border-width: thin;
border-color: black;
border-style: double;
Tässä määritellään elementin rajaksi ohut musta kaksinkertainen viiva.

Värien määrittäminen tyylitiedostossa

Värit voidaan määritellä englannin kielisellä nimellä kuten aikaisemmin on esimerkeissä tehty: black, blue. Näitä värejä, joilla on suoraan nimi on kuusitoista, joten yleensä värin määrittäminen kannattaa tehdä käyttämällä värien heksadesimaalilukuja. Tällöin luku määritellään #-merkin jälkeen heksadesimaalilukuna. Värien heksadesimaalilukuja löytyy esimerkiksi seuraavista linkeistä: CSS värisivut

Värejä määritettäessä kannattaa välillä katsoa miltä sivu näyttää selaimessa. Taustavärin ja fontin värin määrittämisen nyrkkisääntö: Jos taustaväri on vaalea, silloin tumma fonttiväri ja taustan ollessa tumma, valitaan vaalea väri fontille. Kohdassa 1. määritellään fontille väri tummansininen ja kohdassa 2. määritellään taustalle väriksi valkoinen.
1.

font-color: #000099;
2.
background-color: #FFFFFF;

Linkkien ulkoasu

Linkien ulkoasu määritellään myös CSS-dokumentissä. Olet varmaan huomannut surffatessasi internetissä, että käytetyt linkit muuttuvat erivärisiksi kuin käyttämättömät ovat. Tämä ominaisuus määritellään a-elementille seuraavasti: 

a:link {

color: #0000FF;

background-color: transparent;

}   

a:visited {

color:#800080;

background-color:transparent;

}

a:active {

color:red;

background-color:transparent;

}
Linkki (a:link)on määritelty siniseksi (#0000FF). Käytetty linkki (a:visited), eli linkki, joka on valittu muuttuu viininpunaiseksi (#800080). Aktiivinen linkki (a:active) on punainen.