CSS-tyylimerkinnät

Perusmerkinnät

CSS-tyylimääritykset ovat muotoa:

tyylinimi {
ominaisuus:arvo
}

Tyylinimi viittaa yleensä johonkin HTML-tiedoston elementtiin. Tyylinimet ja ominaisuuksien nimet kirjoitetaan aina pienillä kirjaimilla. Edellä esitetty merkintätapa on selkeä, mutta mahdollinen on myös

tyylinimi {ominaisuus: arvo}

Ominaisuuksien nimet ja arvot ovat yleensä helposti käännettävissä englannin kielestä. CSS-tiedostossa tulisi aina olla määriteltynä vähintään dokumentin taustaväri ja fonttiväri.

Esim. Tässä taustaväri on vaaleansininen ja fontin väri sininen.

body {
background-color: aqua;
color: blue
}

Tyyliin voi sisältyä useita eri ominaisuuksia, jotka erotetaan toisistaan puolipisteillä.  Viimeisen ominaisuuden jälkeen puolipistettä ei tarvita, mutta sen voi halutessaan merkitä. Ominaisuuksien arvoissa voi käyttää myös suuria kirjaimia värikoodeissa tai fonttien nimissä. Esim. sekä verdana että Verdana käyvät fonttia määriteltäessä.

Kun samalla ominaisuudella on useita keskenään vaihtoehtoisia arvoja, erotetaan ne toisistaan pilkulla.

Esim. Tekstikappaleelle voidaan antaa useita fonttivaihtoehtoja seuraavasti:

p {
font-family: “century gothic”, verdana, helvetica, arial
}

Tässä esimerkissä vaihtoehtoisia arvoja annetaan, koska listassa ensimmäisenä olevaa hieman harvinaisempaa fonttia ei voi olettaa löytyvän kaikkien käyttäjien tietokoneilta. Selain valitsee vasemmalta käsin ensimmäisen fontin, joka käyttäjän koneelta löytyy. Huomaa, että arvon koostuessa useammasta sanasta se tulee merkitä lainausmerkeillä!

Tyylien ryhmittely

Usealle tyylille voidaan määrittää samanlaiset ominaisuudet yhtäaikaisesti. Vaikka elementille on määritelty ominaisuuksia yhdessä muiden kanssa, voi sillä sen lisäksi olla erikseen määritelty tästä poikkeavia ominaisuuksia.

Esim. Tässä pääotsikoilla ja alaotsikoilla on useita samanlaisia ominaisuuksia, ne on järkevää ryhmitellä. Kuitenkin pääotsikolle halutaan myös tekstin lihavointi.

h1, h2 {
color: green;
font-family: verdana, arial
}

h1 {font-weight: bold}

Tyylien periytyminen

Tyylit periytyvät sisäkkäisille elementeille, ellei niille anneta erikseen muita ominaisuuksia.

Esim. Tässä kaikki teksti on sinistä. Alaotsikoiden väriksi on erikseen määritelty musta.

body {
background-color: lime;
color: blue;
font-family: verdana, arial
}

h2 {
color: black
}

Samankaltaisten ominaisuuksien ryhmittely

Joitakin samankaltaisia ominaisuuksia voidaan myös ryhmitellä. Tällaisella ryhmittelyominaisuudella on oma nimensä. Eri arvot erotetaan toisistaan välilyönneillä.

Esim. Seuraavat fonttiin liittyvät ominaisuudet voidaan merkitä seuraavasti

td {
font-family: “times new roman”, garamond, serif;
font-size: small;
font-style: italic
}

tai tiivistää

td {
font: “times new roman”, garamond, serif small italic
}

Väriarvot

#FFFF00

rgb(255, 255, 0)

Mittayksiköt

margin-left: 1.3em