Formatting lists with CSS

Bullets

Standard

The default bullet point, or list marker, is disc (a solid black dot). This can easily be modified using the list-style-type attribute:

ul {
	list-style-type: square;
}

The values are disc (default), circle, square.

Custom image

Your CSS rule will look like this:

ul {
	list-style-image: url('custom-bullet-image.png');
}

For a once-off customisation, the inline CSS version:

<ul style="list-style-image: url('custom-bullet-image.png');">
	<li>Fantastic Mister Fox</li>
	<li>Reynard the Fox</li>
	<li>Br'er Fox</li>
	<li>Freddy Fox</li>
</ul>

And a Codepen to play in:

See the Pen CSS: Use an image as a custom bullet by David Fox (@foxbeefly) on CodePen.

Ordered

list-type ^[2]

For a once-off customisation, the inline CSS version:

<ol style="list-style-type: lower-roman;">
	<li>Fantastic Mister Fox</li>
	<li>Reynard the Fox</li>
	<li>Br'er Fox</li>
	<li>Freddy Fox</li>
</ol>

Your CSS rule will look like this:

ol {
	list-style-type: lower-roman;
}

<ol>
	<li>Fantastic Mister Fox</li>
	<li>Reynard the Fox</li>
	<li>Br'er Fox</li>
	<li>Freddy Fox</li>
</ol>

Advanced numbering

Advanced numbering can be applied to elements without using ordered or numbered HTML lists. See the tutorial Number HTML elements automatically with CSS.