CSS Lists

CSS includes a number of list properties to help you style your HTML lists.

List Style Type

Determines what the bullet looks like. For info on the possible values see the list-style-type page.




<ul style="list-style-type:circle;">

<li>List item one</li>
<li>List item two</li>
</ul>

This results in:

• List item one


• List item two

List Style Image




<ul style="list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMkYiu-yBdgMJHbc16m0-Ku458Jet5pkVtaQlICedD0urUwmM3MVI3YHSLj0eUTecv4EdrKdF9_Ns2W9-XoRROYG-4y9my3p1xsE5MndrX5pUeL6OjHQe5JgqIO6o9HcAG2Fw8TTRp4eg/?imgmax=800);">
<li>List item one</li>

<li>List item two</li>
</ul>

This results in:

• List item one


• List item two

List Style Position

Determines whether the bullet is located inside the list's containing box or outside.




<ul style="list-style-position:inside;">
<li>List item one</li>

<li>List item two</li>
</ul>
<ul style="list-style-position:outside;">
<li>List item one</li>
<li>List item two</li>

</ul>

This results in:

• List item one


• List item two

• List item one



• List item two

List Style

The list-style property is shorthand for setting the list properties.




<ul style="list-style:square inside;">
<li>List item one</li>

<li>List item two</li>
</ul>

This results in:

• List item one


• List item two

Marker Offset

Used in conjunction with display:marker, marker-offset specifies the nearest border edges of the marker box and its associated principal box.




<ul>
<li style="display:marker;marker-offset:10px;">List item one</li>

<li>List item two</li>
</ul>

This results in:

• List item one


• List item two

At the time of writing, browser support for marker-offset was limited.