list-style

Definition

The list-style CSS property is a shorthand property used to set all the properties related to list markers (the bullet points or numbers that appear next to each list item) in one declaration. The list-style shorthand property includes the following sub-properties: list-style-type, list-style-position, and list-style-image.

Examples

Using the shorthand property:

ul {
  list-style: square inside;
}

Setting all the properties individually:

ul {
  list-style-type: disc;
  list-style-position: outside;
  list-style-image: url('bullet.png');
}

Using the none value:

ul.no-marker {
  list-style: none;
}

Values

Best Practices

• Use the shorthand property to simplify your code and make it more readable.
• Choose a marker style that is appropriate for the content and style of your website.
• Use list-style-position: inside to place the marker inside the list item, rather than outside.
• Avoid using custom marker styles that are difficult to read or distinguish from one another.
• Keep in mind that some marker styles may not be supported in all browsers, so test your list styles thoroughly.

Browser Compatibility