Lists


Lists are the backbone of organized web content. Whether you are building a navigation menu, a table of contents, or a simple "to-do" list, CSS provides a robust set of properties to transform plain bullet points into high-quality design elements.

In this tutorial, we will explore how to control list markers, use custom imagery, and manage the flow of list items within your layout.

1. Choosing the Right Marker: list-style-type

The list-style-type property allows you to choose from various predefined shapes for unordered lists (<ul>) or numbering systems for ordered lists (<ol>). Common values include disc, circle, square, decimal, and none.

Code Block Loading...

2. Adding Branding with list-style-image

When standard circles and squares aren't enough, you can use a custom graphic as your list marker. This is perfect for branded checklists or themed content.

Code Block Loading...

3. Positioning the Marker: list-style-position

This property determines if the marker sits inside or outside the list item's content box.

  • outside (Default): The bullet hangs in the margin, separate from the text blocks.
  • inside: The bullet becomes part of the text flow, causing wrapped text to sit directly underneath the bullet.

Code Block Loading...

4. The Shorthand: list-style

To keep your CSS clean and readable, you can combine type, position, and image into a single line. The order is generally: type position image.

Code Block Loading...

Key Takeaways

  • User Clarity: Use list-style-type: none only when the context makes it clear the items are related (like in a navigation menu).
  • The "Inside" Advantage: Use list-style-position: inside when you have limited horizontal space, such as in a narrow sidebar.
  • Consistency: If using list-style-image, ensure your icon size is small (usually 12px to 16px) to avoid disrupting the line height.
  • Accessibility: Remember that markers help screen reader users identify list structures; don't remove them without providing alternative visual cues.