CSS Lists

Lists are fundamental for structuring content on a webpage. In this tutorial, you’ll learn how to style HTML lists using CSS to enhance their appearance and usability.

HTML Lists

There are three types of lists in HTML:

  1. Ordered Lists (ol): Numbered lists.
  2. Unordered Lists (ul): Bullet-point lists.
  3. Definition Lists (dl): Lists with terms and their definitions.

Styling Lists

Basic List Styling

Custom Bullet Styles

Horizontal Lists

Advanced List Styling

Nested Lists

Custom Icons for Lists


  1. Create an ordered list with custom Roman numerals (I, II, III, IV).
  2. Style a nested list within an unordered list.
  3. Experiment with different list-style-type values for both ul and ol elements.


In this tutorial, you’ve learned how to style HTML lists using CSS. You can customize list markers, create horizontal lists, and apply styles to nested lists. The knowledge you’ve gained will help you design attractive and functional lists for your web projects. Keep practicing and experimenting to become a CSS list styling pro!