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

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

Yleistä verkkosivustojen typografiasta

Suora lainaus Maritta Inkisen verkko-opetusaineistosta Typografiaa:

Verkkosivujen typografiaa - vastaanottajan ehdoilla

Verkkosivujen typografia perustuu täsmälliseen rakenteeseen: otsikkotasoihin, listoihin, peruskorostustapoihin. Typografisia keinoja on varsin rajallinen määrä. Erikoismerkkeihin ei edelleenkään ole saatu toimivaa standardointia, mikä tarkoittaa monen kirjapainomerkin poisjäämistä nettisivuilta (esim. ajatusviiva, valuuttamerkit, erilaiset lainausmerkit, matemaattiset merkit, symbolit). Olennaista on kuinka suuren vallan vastaanottaja on saanut typografiasta - artikkelin visualisoija antaa perussäännöt, vastaanottaja päättää omalla koneellaan sääntöjen soveltamisen ilmiasun; fontin, koon, katseltavan alueen laajuuden jne. Jopa värit näyttäytyvät erilaisina eri näytöillä, eri järjestelmissä.

• Kirjasintyyppinä joko päätteellinen tai päätteetön kirjasin. Jopa tämän määrittelyn vastaanottaja voi helposti ohittaa määräämällä oman selaimensa tai s-postinsa fonttivalinnat.
• Kirjasinkokoja käytännössä vain muutama (perusteksti, otsikko1,2,3,4..). Kirjasinkokojen suhteet määrää lähettäjä, vastaanottaja määrittelee täsmällisemmät koot; suhteellisesti mitoitetuilla sivuilla hän voi suurentaa ja pienentää tekstikokoja. Sivun leveyden määrää vastaanottajan näytön resoluutio, tai vastaanottaja voi halutessaan kaventaa tai leventää sivua.
• Korostuskeinoina lihavointi, kursivointi ja näiden yhdistelmä
• Listat, luetelmat voivat saada erinäköisiä pompuloita listakohtien osoittamiseksi
• Sisennyksiä voidaan käyttää listojen lisäksi marginaaleihin yms.
• Palstoja voidaan luoda esim. taulukoilla. Monimutkaisten ratkaisujen toistettavuutta kaikissa selaimissa ei voi taata. Suunnittelija voi mitoittaa palstat myös suhteellisiksi käyttämällä em-yksiköitä.
• Kuvia voidaan sijoitella kohtuullisen vapaamuotoisesti - mutta niiden näkyvyyttä ja latautumisnopeutta vaikeuttavat edelleen mitä eritasoisimmat tekniset epäyhtenäisyydet.

Tärkeäksi kirjapainotypografian korvaajaksi näyttää muodostuneen väri. Värin avulla

• erotetaan eri asiat toisistaan (väri on ottanut osan välin tehtävistä)
• erotetaan erimerkityksiset linkit
• korostetaan otsikoita ja muutakin tekstiä
• pohjaväreillä luodaan kokonaisuuksia ja erotetaan asioita toisistaan
• luodaan omaa persoonallista sävyä sivulle
• havahdutetaan, huomautetaan Värin käyttö ei tuo lisäkustannuksia, joskin sivujen latautumisnopeus voi kärsiä ylettömästä värien ja sävyjen käytöstä.

Kirjapainotypografiaa pyritään monesti jäljittelemään tekstistä tehdyillä kuvilla - ja niin sivun latautuminen hidastuu.

HTML ja  tekstin merkkaus

CSS tekstin muotoilussa

Lisää selektoreista. Selektorien käytön periaatteet.

Testaaminen tyylien kanssa ja ilman.

Selaimet ja niiden väliset erot.

Harjoituksia.