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(/pix/printer_icon.gif);">
<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.