Tyylitiedostojen muoto ja rakenne

CSS on muotoa:

selektori { ominaisuus: arvo; }

esim. p { color: blue; }

Tällaista kokonaisuutta kutsutaan deklaraatioksi.

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;}

Tyyliohjeiden soveltaminen

ks. span-tagin käyttö

     div-tagin käyttö

   display-ominaisuus

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.

Tärkeimmät CSS-ominaisuudet

Tekstin muotoilu CSS:n avulla

Kirjasimen ominaisuudet

Tekstin ulkoasun muuntelu (W3 Schools)

Esimerkkejä:

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

Linkkien muotoilu

Linkkien muotoilu: ns. pseudo-luokat

• Linkin väri

Muita ulkoasun muotoiluja CSS:ssä

• Taustavärit
• Reunat (border)
• Marginaali
• Täyte (padding)

Yleistä

Värin ja taustavärin ominaisuudet

Elementin raja, täyte ja marginaalit

Muut elementin ominaisuudet

Täydellinen lista CSS:n ominaisuuksista (CSS1, CSS2, CSS3)

Esimerkkejä:

Valideja CSS-pohjia: Template World