CSS list properties
With CSS list properties, you can specify how lists appear.
This tutorial 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
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 using the value "outside" so that it can be displayed as an indented list.
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