Lists are very helpful in conveying a set of either numbered or bullet points. This chapter teaches you how to control list type, position, style, etc., using CSS.
We have the following five CSS properties, which can be used to control lists:
- The list-style-type allows you to control the shape or appearance of the marker.
- The list-style-position specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker.
- The list-style-image specifies an image for the marker rather than a bullet point or number.
- The list-style serves as shorthand for the preceding properties.
- The marker-offset specifies the distance between a marker and the text in the list.
The list-style-type Property
The list-style-type property allows you to control the shape or style of bullet point (also known as a marker) in the case of unordered lists and the style of numbering characters in ordered lists.
Here are the values which can be used for an unordered list −
|disc (default)||A filled-in circle|
|circle||An empty circle|
|square||A filled-in square|
<html> <head> </head> <body> <ul style="list-style-type:circle;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style="list-style-type:decimal;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>