Styling HTML lists with CSS
Last week, we looked at HTML lists and some examples of ordered, unordered, and description lists. After doing some work with HTML lists, I decided to take a try at styling the lists and seeing what could be accomplished with a bit of CSS magic.
Do you ever get tired of plain old bullet points in your list? That can be fixed pretty easily with just a few strokes of the keyboard! We can use ‘list-style-type’ property in CSS to make quick and easy updates for unordered and ordered lists.
Unordered Lists
Here is an example of how to use ‘list-style-type’ and property values of ‘circle’ and ‘square’ to change up the default bullet point.
Ordered Lists
Here is an example of how to use ‘list-style-type’ and property values of ‘upper-roman’ and ‘lower-alpha’ to swap out from the default numbering for ordered lists.
More Options
CSS comes with a large list of property values which can be used with ‘list-style-type’. To see a full list to play with, check out the official documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
If you scroll down to “All list style types”, there is a nifty box titled “Result”. Here you can select a property value for ‘list-style-type’ and give it a test run quickly and easily without having to use your code as a first test.
