List Style Type
Use
list-style-type: to change the list marker (bullet, number or etc.) for both ordered
(ol) and unordered lists
(ul).
Unordered Lists
Unordered lists usually have markers such as:
- square
- circle
- disc (the default)
ul {list-style-type: square;}
To remove the markers from an unordered list, set the value to
none:
ul {list-style-type: none;}
Ordered Lists
By default,
ol will display as a numbered list. The markers can be changed to a variety of options including (but not limited to) the following:
- upper-alpha
- lower-alpha
- upper-roman
- lower-roman
- decimal (the default)
ol {list-style-type: upper-alpha;}
You could potentially use alpha or numeric type list markers for an unordered list or use circle (or etc.) markers for an ordered list, but it's better to keep your HTML and CSS consistent.
List position
You can also adjust the spacing of the markers for either list type with
list-style-position. The 2 values are:
- inside - inside the text area
- outside - outside the text area
ol {list-style-position: inside;}
Images as Markers
You can add an image to replace the list-style-type from the default bullet to the image of your choice. The image should be quite small:
ul {list-style-image: url('images/marker.gif');}