In deze rubriek maken we gebruik van het programma Notepad++ en Google Chrome. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Chrome de codes anders weer als bijvoorbeeld Internet Explorer of Firefox.

[table=header]Tekst|Voorbeeld

disc|

circle|

square|

decimal|1, 2, 3

upper-alpha|A, B, C

lower-alpha|a, b, c

upper-roman|I, II, III

lower-roman|i, ii, iii

none|Geen teken[/table]

Dit zit je allemaal als waarde bij LIST-STYLE-TYPE. Hieronder zie je een voorbeeld, met CIRCLE.

CSS:

li {
list-style-type: circle;
}

HTML:

<ol>
<li>Regel 1</li>
<li>Regel 2</li>
<li>Regel 3</li>
<li>Regel 4</li>
<li>Regel 5</li>
</ol>

Dit geeft het onderstaande resultaat.



Als je in plaats van CIRCLE bijvoorbeeld UPPER-ROMAN neemt, krijg je onderstaand resultaat:

CSS:

li {
list-style-image: url(http://topdrives.nl/rightarrow.gif);
}

HTML:

<ol>
<li>Regel 1</li>
<li>Regel 2</li>
<li>Regel 3</li>
<li>Regel 4</li>
<li>Regel 5</li>
</ol>

Onderstaand resultaat krijg je dan:

CSS:

ol li {
list-style-type: upper-roman;
}

ol ol li {
list-style-type: upper-alpha;
}

ol ol ol li {
list-style-type: decimal;
}

HTML:

<ol>
<li>Titel 1
	<ol>
		<li>Deel 1</li>
		<li>Deel 2</li>
	</ol>
</li>

<li>Titel 2
<ol>
	<li>Deel 1</li>
	<li>Deel 2</li>
	<li>Deel 3</li>
	<li>Deel 4</li>
</ol>
</li>

<li>Titel 3
<ol>
	<li>Deel 1
		<ol>
			<li>Stukje 1</li>
			<li>Stukje 2</li>
		</ol>
	</li>
</ol>
</li>
</ol>

Een wat lastigere code dan we tot nog toe hebben gehad. Hieronder zie je het resultaat.



Waar het dus op neer komt, is: bij 1x OL in je CSS, kijkt hij naar de eerste OL in je HTML. Bij 2x OL in je CSS, kijkt hij naar de tweede OL in je HTML. En zo verder...