Styling Lists
There are a number of properties that are specific to styling lists.
| Property | Description |
|---|---|
| list-style-type | the type of marker. |
| list-style-image | an image as a marker. |
| list-style-position | position of the marker in relation to the list item box(inside | outside). |
| list-style | Shorthand property to set all list characteristics. |
The format for the list-style shorthand property is as follows:
list-style: <list-style-type> <list-style-position> <list-style-image>
Setting the List Marker Type
The list-style-type property sets the style of marker(bullet). You can apply this property to entire lists or individual list items. You can see the allowed values for this property are
| Value | Description |
|---|---|
| none | No marker will be shown. |
| box | box shape as the marker. |
| check | check mark shape as the marker. |
| circle | circle shape as the marker. |
| diamond | dismond shape as the marker. |
| disc | disc shape as the marker. |
| dash | dash shape as the marker. |
| square | square shape as the marker. |
| decimal | Use decimal numbers for the markers. |
| binary | Use binary numbers for the markers. |
| lower-alpha | Use lowercase alpha characters for the markers. |
| upper-alpha | Use uppercase alpha characters for the markers. |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
ol {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
This is a test:
<ol>
<li>A</li>
<li>B</li>
<li style="list-style-type: decimal">C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ol>
</body>
</html>