In this chapter, you will learn how you can apply different list of styles to html list. The html list style usually apply to ul li or ol li tags.
Example of ul li or ol li tags in html.
Html Code | Html Display |
<ul> <li>Product A</li> <li>Product B</li> <li>Product C</li> </ul> |
|
<ol> <li>Product A</li> <li>Product B</li> <li>Product C</li> </ol> |
|
Here is the available List Properties
Property Syntax | Values | Example: |
list-style-image | - url(location of image) - none |
ul li{ list-style-image:url(images/list.gif) no-repeat; } |
list-style-position | - inside - outside |
ul li{ list-style-position: inside; } |
list-style-type | - circle - decimal - disc - lower-alpha -lower-roman - square - upper-alpha - upper-roman - none |
ul li{ list-style-type:disc; } |
list-style | Combination of list style type, image or position. Note you do not have to include 3 of them, by default you can set at least using 1 property only. |
ul li{ list-style: url(images/list.gif) no-repeat inside; } |