CSS Lists
In CSS, you can control the appearance of HTML lists, including the marker type, position, and even use images as markers.
list-style-type
The list-style-type property specifies the type of list item marker. For unordered lists, you can use values like disc, circle, or square. For ordered lists, you can use decimal, lower-roman, upper-alpha, and more.
Example
css
ul.circle { list-style-type: circle; }
ol.roman { list-style-type: upper-roman; }list-style-image
The list-style-image property allows you to specify an image to be used as the list item marker.
Example
css
ul {
list-style-image: url('sqpurple.gif');
}list-style-position
The list-style-position property specifies whether the list-item markers should appear inside or outside the content flow. Values are inside or outside.
Example
css
ul {
list-style-position: inside;
}List Shorthand
The list-style property is a shorthand for setting all the list properties in one declaration.
Example
css
ul {
list-style: square inside url("sqpurple.gif");
}Test Yourself with an Exercise
Which property is used to change the list item marker?