Css ja www-sivu

Css (Cascading style sheets) on webbisivuille kehitetty tyylimäärittely-koodi. Ideana tässä määrittelyssä on mahdollisuus jakaa www-sivujen sisältö staattisesta koodista erilaisiksi tyylitiedostoiksi, joiden avulla dokumenttien muotoja, tyylejä ja sijoittelua voidaan määritellä. Css-tyylimääritemiä voidaan ohjata ulkoisesta tiedostosta ja sen avulla verkkosivuston sisällön esittämistapaa pystytään muuttamaan helposti ja nopeasti. Css-määritelmät laaditaan dokumentiksi ja niiden tiedostopääte on yleensä *.css. Näiden dokumenttien avulla ehdotetaan miten www-sivut voidaan esittää. Nämä eivät ole kuitenkaan ehdottomia sääntöjä ja ne voidaan halutessa kiertää ja muokata itse sivuilla toisien koodien avulla.

Css,n perussyntaksi sisältää valitsimen, ominaisuuden ja arvon. Ominaisuudet ja arvot laitetaan aaltosulkeiden sisään. Näitä voi olla useampia ja ne erotetaan puolipisteelllä toisistaan. Ne laitetaan usein omille riveilleen selkeyden lisäämiseksi.

valitsin { ominaisuus: arvo; }

Taustaväri
Seuraavassa esimerkissä määrittelemme sivuille taustavärin css-tyylimäärittelyllä. Tyylimäärittely aloitetaan kertomalla mistä koodista on kyse <style> -tageilla. Valitsimeksi on valittu html-koodi body. Ominaisuudeksi tulee background-color, eli taustaväri. Arvona voi käyttää hexadesimaalia #003399), rgb-arvoa (rgb(120,0,50)) tai nimeämällä väri suoraan (blue).

Taustan muotoja voidaan muuttaa myös seuraavilla koodeilla:

background-image - taustakuva
background-repeat - taustakuvan jatkaminen
background-position - taustakuvan sijainti
 
esim: body {background-image:url('kuva.jpg');
         background-repeat:repeat-x;
         background-position:top center;}

Tekstit ja muotoilu
Css-tyylimäärittelyssä usein määritellään sivulla käytettävien tekstien tyylit. Tavallisimpia ominaisuuksia ovat:

font-family - fontti/kirjaisinperhe esim arial, verdana
font-size - koko esim 12px, 100%, xx-large
font-style - kursivointi esim normal, italic
font-weight - lihavointi esim bold, 900
color - väri esim red, rgb(120, 10,50)
text-decoration - korostukset esim line-through, blink
text-align - sijoitus esim center, justify

Tyylit määritellään id,n avulla. Kun kyse ei ole html-valitsimista, voidaan uusi määritelmä luoda #-merkin avulla. Tyylit voidaan ottaa käyttöön <div> -koodin avulla käyttämällä id-tageja.

Ulkoinen css-tiedosto
Jos samaa tyyliä käytetään useammassa sivussa, kannattaa määritelmät sijoittaa ulkoiseen tiedostoon ennemmin kuin erikseen jokaiseen dokumenttiin. Näin muutokset voidaan tehdä suoraan yhden tiedoston kautta. Sivuihin liitetään linkki css-tyylimääritelmään.

Ulkoinen css-tiedosto tallennetaan .css muotoon ja se sisältää vain tyylimääritelmiä.