Yleistä CSS:n käytöstä

CSS eli tyylimäärittelyn taustaa ja käytön mahdollisuudet

CSS Wikipediassa

Tyyliohjeet yleisesti

CSS:n muoto ja rakenne

(Lainaus: Vuokko Nurmesniemi: http://myy.helia.fi/~vanvu/html/tyylisivut.html)

CSS on muotoa:

elementti { ominaisuus: ominaisuuden_arvo; }

esim. p { color: blue; }*

Jos usealla elementillä on sama esittely, ne erotetaan pilkulla:

h1, h2, p { color: blue; }

Jos ominaisuudella on useita arvoja, ne erotetaan pilkulla,
jos elementillä on useita ominaisuuksia, ne erotetaan puolipilkulla:

h1 {font-family: arial, sans-serif;
    font-size:   12pt;}

Tyylimäärittelyn liittäminen html-sivuun

Tyylimäärittely voidaan liittää HTML-dokumenttiin kolmella tavalla:

1. HTML-elementtiin upottaminen

• Määrittely kirjoitetaan HTML-dokumentissa sen elementin alkutunnisteeseen, jonka ulkoasua halutaan muokata
• Määrittely ohittaa kaikki muut määrittelyt

  <p style="font-size: 12px">Tämän tekstin fonttikoko on 12 pikseliä</p>
  

2. HTML-dokumenttiin upottaminen

• Määrittely kirjoitetaan HTML-dokumentin HEAD-lohkoon

  <style type="text/css">
  p {font-size: 12px;}
  </style>
  

3. Erillinen tyylitiedosto

• Ulkoasu määritellään erilliseen tyylitiedostoon
• Tiedosto liitetään HTML-dokumenttiin HEAD-lohkossa LINK-tunnisteella
• Suositeltava tapa, koska sama tyylitiedosto voidaan helposti liittää mihin dokumenttiin tahansa.

Määrittelyiden vaikutus html-sivuun:
Jos ulkoasun määrittely on tehty eri kahdella tai useammalla tavalla, ne vaikuttavat ulkoasuun tässä järjestyksessä:
1. Ensisijaisesti huomioidaan yksittäisen html-elementin tyyli (kohta 1)
2. Toiseksi HEAD-lohkossa määritetty tyyli (kohta 2)
3. Kolmanneksi ulkoisessa tyylitiedostossa määritelty tyyli (kohta 3)

Tärkeimmät selektorit

Yleistietoa selektoreista: http://www.w3.org/TR/CSS2/selector.html

Yleisselektori (Universal selector)

Elementin nimi selektorina

Luokkaselektori class

Tunnisteselektori id

Kontekstiselektori, esim. sisalto ul li

Selektoreiden yhteenveto

CSS ja selainten tuki

Sivujen toimivuus on välttämätöntä tarkistaa etenkin IE 6 ja 7 -versioilla, joita valtaosa käyttäjistä käyttää.

Vanhat selaimet tukevat vain CSS 1.

Firefox ja Opera tukevat CSS:n uusimpia ominaisuuksia paremmin kuin IE. Siksi niillä voidaan kokeilla ja kehitellä sivuja, jotka hyödyntävät CSS:ää monipuolisesti.

Lisäksi on hyödyllistä kokeilla ja tuntea myös muita käytössä olevia selaimia, vaikka niiden käyttäjäkunta onkin pienempi kuin em. selainten.

Tekstin muotoilu CSS:n avulla

Tekstin ulkoasun muuntelu

Esimerkkejä:

• fontin asettaminen
• tekstin väri
• fonttikoko
• tekstin taustaväri
• merkkien välit
• sanojen välit
• rivinkorkeus
• tekstin koristelu

Harjoituksia