Slogovno predlogo izdelamo po pravilih oz. standardu za določanje slogovnih lastnosti. Poglejmo si za začetek določitev lastnosti za element p :
p {
font-family: Helvetica, sans-serif;
font-style: italic;
color: green;
}Slogovna predloga, ki je podana v primeru, se sklicuje na vse oznake p v HTML dokumentu in za njih nastavi zeleno pisavo, ki je ležeča in je tipa Helvetica. V primeru, da v sistemu ni te pisave, pa privzeta pisava tipa sans-serif.
Naslov
To je prvi odstavek.
To je drugi odstavek.
Sintaksa
Vsako pravilo se začne s slogovno spremenljivko oz. selektorjem (v zgornjem primeru p).
ime_slogovne spremenljivke {
lastnost_1: vrednost_lastnosti_1 [, vrednost_lastnosti_1 ...];
[lastnost_2: vrednost_lastnosti_2 [, vrednost_lastnosti_2 ...] ...]
}
Slogovna spremenljivka je običajno eden ali več elementov (oznak) HTML dokumenta. Nato sledi določitev lastnosti znotraj zavitih oklepajev. Lastnost določimo s parom:
lastnost: vrednost [, vrednost ...];
Najprej zapišemo lastnost (npr. color), nato dvopičje, za njim pa vrednost (npr. green). V primeru, da je napisanih več pravil, jih med seboj ločimo s podpičji.
Definiranje področja z div in span
Kot pomoč pri oblikovanju lahko uporabljamo tudi HTML oznaki span in div. Prva je namenjena oblikovanju bloka, druga pa oblikovanju odstavka. Če jima ne določimo slogovne oblike, nimata nobenega oblikovnega učinka.