Det finns några olika sätta att använda sig av CSS i ett HTML dokument:
<ol>
<li><a href="#inline">Inline Style</a></li>
<li><a href="#embed">Med hjälp av <STYLE></a></li>
<li><a href="#link">Med hjälp av länkade style sheets</a></li>
</ol>
<a name="inline"><h3>Inline Style:</h3></a>
För att använda <b>Inline Style</b> sätter man de egenskaper man vill ha direkt i
HTML "taggen" med följande syntax:
<p>
<div class=code>
<tag STYLE="property:value; property:value; ... "></tag>
</div>
<p>
Till exempel:<P>
<div class=code>
<B STYLE="color:navy;">I'm in the blue.</B>
</div>
Vilket ger:
<div class=res>
<B STYLE="color:navy;">I'm in the blue.</B>
</div>
<p>
<a name="embed"><h3>Med hjälp av inbäddade <STYLE>:</h3></a>
Man kan även sätta in "instruktioner" för hur olika HTML element skall formateras direkt i dokumentet :<p>
<div class=code>
<STYLE TYPE="text/css"><br>
<br>
</STYLE>
</div>
<p>
<div class=code>
<P>Denna text har en silverram och <B>Fetstil</B> blir versal.</P>
</div>
<p>
<P STYLE="border:silver thick solid; background-color:turquoise;
padding:10px; text-align:center;">Denna text har en silverram och <B STYLE="text-transform:uppercase;">Fetstil</B> blir versal.</P>

<p>
<a name="link"><h3>Länkade style sheets:</h3></a><p>
Man kan även sätta style sheets i en separat fil som sedan länkas in i dokumentet<p>
Denna fil innehåller inställningar skrivna på samma sätt som för inbäddade <STYLE> ovan men man
lämnar bort<br><b><STYLE TYPE="text/css"></b><br>
<b></b> och <br>
<b></STYLE></b> <br>
utan skriver bara
själva inställingarna i denna fil:<p>
Om vi har en fil men namet <b>mystyles.css</b> som innehåller följande:
<div class=code>
<br>
B { text-transform:uppercase; }<Br>
<Br>
</div>
Och sedan länkar in den med:
<div class=code>
<HTML><br>
<HEAD><br>
<TITLE>Oj va de svänger</ITLE><br>
<b><LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css"></b><br>
</HEAD><br>
</div>

Kommer alla texter markerade som fetstil även att bli versala.