CSS-tiedosto

Tyylitiedostossa nimetään tyyli HTML-elementtien mukaisesti, jolloin tyyli vaikuttaa HTMl-elementin sisällön ulkoasuun. Esimerkiksi kappale-elementin tyyli p määrittelee koko HTML-dokumentin kaikkien p-elementtien sisällön ulkoasun. HTML-elementeillä on valmiiksi selaimen oletusmääritysten mukainen tyyli, esimerkiksi h1-tason otsikot näytetään suuremilla kirjasimilla kuin h2, jota voidaan tyylitiedoston määrittelyillä muokata. Esimerkiksi kappale-elementin p tyyli:

p{
color: blue;
background-color: white;
text-aling: justify;
}

Tyylitiedostossa eri HTML-elementtien tyylit määritellään {}-sulkeiden väliin. Nyt p-elementin tyyli on seuraava: tekstin väri on sininen (color: blue), taustaväri on valkoinen (background-color: white) ja teksti on tasattu kumpaankin reunaan (text-aling: justify). Tyylin määrittelyssä eri ominaisuuksien määrittely lopetetaan puolipisteeseen (;).

Lisätään samaan tyylitiedostoon h1-elementin tyylin määrittely:

p{
color: blue;
background-color: white;
text-aling: justify;
}
h1{
color: black;
text-aling: center;
font-size: 16pt;
}

Nyt h1-elementin tyyli on seuraava: tekstin väri on musta (color: black), teksti on keskitetty (text-aling: center) ja kirjasimen koko on 16 pt (font-size: 16pt).