Tyylisivu koostuu tyylisäännöistä, jotka kertovat selaimelle kuinka HTML-dokumentti esitetään. Tyylisääntöjen littämiseksi HTML-dokumenttiin on useita tapoja, mutta yksinkertaisin tapa on käyttää HTML:n STYLE elementtiä. Tämä elementti sijoitetaan HTML-dokumentin HEAD osioon ja se sisältää tyylisäännöt kyseiselle dokumentille.
Huomaa että vaikka STYLE elementti on hyvä tyylisivu harjoitteluun on huomioitava sen huonot puolet ennenkuin sitä käyttää käytännössä. Eri menetelmien edut on selvitetty tyylisivujen linkitys osassa.
Jokainen sääntö koostuu valitsimesta -- tavallisesti HTML-elementistä kuten BODY, P tai EM--ja tyylisäsäännöistä joita valitsin käyttää.
Elementiin voidaan liittää monia ominaisuuksia. Jokainen ominaisuus tarvitsee arvon, jonka kanssa se määrittelee miten elementti esitetään
Tyylisäännöt muodostetaan seuraavasti:
valitsin { ominaisuus : arvo }
Useat samaan elementtiin liitetyt tyylisäännöt erotetaan puolipisteellä:
valitsin { ominaisuus1 : arvo 1 ; ominaisuus2 : arvo2 }
Esimerkiksi seuraava koodin pätkä määrittää color ja font-size ominaisuudet H1 ja H2 elementeille:
<HEAD> <TITLE>CSS esimerkki</TITLE> <STYLE TYPE="text/css">H1 { font-size : x-large ; color : red } H2 { font-size : large ; color : blue }</STYLE> </HEAD>
Yläpuolinen tyylisivu kertoo selaimelle että 1-tason otsikko esitetään extra-isolla, punaisella tekstillä ja 2-tason otsikko isolla, sinisellä tekstillä. W3C:n on määrittänyt käytettävät ominaisuudet ja arvot. Ne löytyvät ominaisuudet ja yksiköt sivuilta.
Tämä sivu on tarkoitettu lyhyeksi yleisesittelyksi, jonka tiedoilla voi itse tehdä joitain pieniä kokeiluja. Tarkemmat tiedot löytyvät seuraavista osioista.