Lists are a fundamental part of web design, helping to organize content in an easy-to-read format. CSS provides various styling options to enhance both unordered and ordered lists. In this lesson we will look at the different ways in which we can style these lists.
Bullet Point Styles
Unordered lists (<ul>) display bullet points by default, but you can change the style using the list-style-type property. Some common values include:
- disc (default)
- circle
- square
- none
For ordered lists (<ol>), you have a range of numbering styles to choose from, including:
- decimal (1, 2, 3, …)
- decimal-leading-zero (01, 02, 03, …)
- lower-alpha (a, b, c, …)
- upper-alpha (A, B, C, …)
- lower-roman (i, ii, iii, …)
- upper-roman (I, II, III, …)
- and more
You can even use special numbering systems like Georgian, Armenian, or CJK ideographic.
Custom Bullet Points
Want to use your own images instead of default bullets? The list-style-image property lets you set a custom image:
list-style-image: url("images/bullet.png");
đź’ˇ Tip: CSS does not allow you to resize the bullet image, so it should be pre-sized (e.g., 16×16 pixels).
- Learn HTML
- Learn CSS
- Learn JS
List Positioning
By default, list items are indented, but you can control the position of the bullet or number using list-style-position:
list-style-position: outside; /* Default, bullet stays outside */ list-style-position: inside; /* Aligns bullet with text */
Shorthand Property
To combine multiple list styles, use the list-style shorthand:
list-style: inside square; /* position type */
Final Thoughts
Lists are more than just bullet points—they can be stylish and customized to match your design! Experiment with different styles to enhance readability and aesthetics.
