Trusted answers to developer questions

How to style a list in CSS

Get Started With Machine Learning

Learn the fundamentals of Machine Learning with this free course. Future-proof your career by adding ML skills to your toolkit — or prepare to land a job in AI or Data Science.

We can modify the following three properties in a list:

  1. list-style-position
  2. list-style-type
  3. list-style-image

Note: These can also be applied to items of a list separately.


1. list-style-position

The list-style-position indicates the position of the markers (i.e. bullet points or numbers) in the list. Setting it as outside will make the markers appear separately from the text; this is a better option as it will align the start of every line with the text:

A list with position set as inside will make the list markers part of the text. This will make the text, at the start of every new line, aligned with the marker instead of the actual text:

list-style-position: "outside"
list-style-position: "outside"
list-style-position: "inside"
list-style-position: "inside"

2. list-style-type

The list-style-type property indicates the type of the marker. For unordered lists, it may be set to circle, square, or none. The default value is disc:

For ordered lists, many options are available. Commonly used numbering options include lower-alpha and lower-roman:

3. list-style-image

An image can be displayed as a marker. Pass the URL of the image in url() (if the URL is not working, then list-style-type is applied):

Basic styling

Colouring, padding, margin, and other basic styling can be applied to the list and its items:

RELATED TAGS

style
list
css
Copyright ©2024 Educative, Inc. All rights reserved
Did you find this helpful?