Styling Lists with CSS
Lists behave similarly to text in many ways, but there are a number of list-specific properties and best practices to consider.
Let's look at a simple example containing multiple types of lists:
The "unstyled" list actually has a default styling that comes from the browser's style sheet.
When styling lists, it's good practice to maintain the same vertical rhythm (spacing) consistent with other elements on the page (such as paragraphs and images), as well as consistent horizontal spacing.
List-Specific Styles
After adding some general spacing and text styling rules for lists, we will look at a few properties specific to lists:
- list-style-type: – sets the type of marker for the list: squares or circles for unordered lists, and numbers, letters, or Roman numerals for ordered lists.
- list-style-position: – determines whether the markers appear inside the list items or outside, before the start of each element.
- list-style-image: – allows the use of a custom image as a marker.
Regarding ordered lists, we can control how the items are numbered, meaning we can start numbering from a specific number, set reverse numbering, or define numbering steps.
- start – allows numbering to start from a number other than 1,
- reversed – starts numbering from bottom to top,
- value – allows setting specific numeric values for items.