CSS-sääntöjen kirjoitustapa:

a) jos valitsimella vain yksi kuvaus:
valitsin { ominaisuus: arvo; }

esim.
body { background-color: red } <i>Tällä saa taustavärin punaiseksi</i>

b) jos valitsimella monta kuvausta:
valitsin {
ominaisuus: arvo;
ominaisuus: arvo;
ominaisuus: arvo;
}

esim.
div {
color: green; <i>Tekstin väri vihreäksi</i>
text-align: right; <i>Tekstin sijainti oikeaan reunaan</i>
border: 2px red solid; <i>Alueen reunaviivan leveys kaksi pikseliä, väri punainen ja viivan tyyppi yhtenäinen</i>
}

Tyylimäärittelyt CSS:llä voi sijoittaa kolmella tavalla:

1) HTML-elementin esim. h1:n sisällä <i>(Ei suositeltava, koska ei poikkea juurikaan aikaisemmasta tyylimäärittelytavasta ja tekee koodista sekavan.)</i>

&lt;h1 style="color:blue;margin-left:30px;"&gt;Tämä on otsikko&lt;/h1&gt;<br />

2) upotetuna tyylisääntönä html-tiedostossa &lt;head&gt;-elementin sisällä

&lt;head&gt;
&lt;style&gt;
body { background-color: lightblue; } <i>Taustaväri vaaleansininen</i>
h1 {
color: orange; <i>h1-otsikon väri oranssi</i>
margin-left: 40px; <i>h1-otsikon vasen marginaali 40 pikseliä</i>
}
&lt;/style&gt;
&lt;/head&gt;

3) ulkoinen, linkitetty tyylisääntö eli oma, erillinen css-tiedosto (paras tapa!)

Head-elementissä linkitys ulkoiseen tyylitiedostoon:
&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="tyylit.css"&gt;</b> <i>Tiedoston nimen voi tietysti itse keksiä. Ei tarvitse aina olla tyylit.css.</i>
<b>&lt;/head&gt;

Tyylitiedostossa (tyylit.css) tyylimäärittelyt esim.
body {
background-color: lightblue;
}
h1 {
color: orange;
margin-left: 20px;
}


Tyylitiedoston voi tehdä kuten html-tiedoston muistio-tekstieditorilla. Tallennuksessa tiedostopäätteeksi .css ja tallennusmuodoksi kaikki tiedostot.