CSS-tyylien määrittäminen

Perusperiaate on muuttaa olemassa olevien XHTML-elementtien ominaisuuksia. Oletuksena tyylin nimi on siis sama kuin sen XHTML elementin nimi, jonka ulkoasuominaisuuksia halutaan muokata. Jokaisella muutettavalla ominaisuudella on tietty nimi.

Esim. määritellään body-elementin tekstin väriksi musta ja taustaväriksi valkoinen, kirjoittamalla kyseinen teksti tyylit.css tiedostoon:

body {
color: black;
background-color: white;
}

Esim2. Määritellään kaikille otsikkotasoille sama fontti ja väri:

h1, h2, h3, h4, h5, h6 {
font-family: Verdana, sans-serif;
color: blue;
}

Mittayksiköt

Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina tai em-yksikköinä. em suhteutetaan aina oletusfontin kokoon. Tämä kirjoitetaan jälleen tyylit.css tiedostoon, esimerkiksi:

p {
font-size: 120%;
}

h1 {
margin-top: 1em;
}

Sivuilla käytettävät värit

Värien määrittämisessä on käytössä useita tapoja. Perusvärit voidaan kirjoittaa suoraan nimillä tai värit voi määrittää RGB-arvoilla. Esimerkiksi:

p {
background-color: blue;
}

p {
background-color: #FF0000;
}

RGB-arvoja voi katsoa esimerkiksi sivulta http://colorschemedesigner.com/