Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

style
list
css

How to style a list in CSS

Educative Answers Team

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:

svg viewer
list-style-position: "outside"
svg viewer
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 ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring