CSS list properties
With CSS list properties, you can specify how lists appear.
This lesson focuses on:
- Setting the marker for a list
- Specifying where a list is placed
Setting the marker for a list
The marker for a list is set with the list-style-type attribute.
Possible values for the list-style-type attribute:
- disc
- square
- decimal
- lower-roman
- upper-alpha
Example:
<html> <head> <title>Lists</title> </head> <body> <ul style="list-style-type: square;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ul> <ul style="list-style-type: upper-alpha;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ul> <ol style="list-style-type: disc;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ol> <ol style="list-style-type: circle;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ol> </body> </html>
Output:
- green
- blue
- gray
- orange
- green
- blue
- gray
- orange
- green
- blue
- gray
- orange
- green
- blue
- gray
- orange
In the above example, there are four lists. The marker for the first list is set to square. The marker for the second list is set to upper-alpha. The marker for the third list is set to disc. The marker for the fourth list is set to circle.
Specifying where a list is placed
The location of a list is specified with the list-style-position attribute. The location of a list can be specified as its default location using the value "inside" or as another location so that it can be displayed as an indented list using the value "outside".
Example:
<html> <head> <title>Lists</title> </head> <body> <ul style="list-style-position: outside;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ul> <ol style="list-style-position: inside;"> <li>green</li> <li>blue</li> <li>gray</li> <li>orange</li> </ol> </body> </html>
Output:
- green
- blue
- gray
- orange
- green
- blue
- gray
- orange
In the above example, there are two lists. The position of the first list is set to outside which is the default positioning of the list. The position of the second list is set to inside which makes the list indented.
