CSS Lists

The list-style-position property defines where to position the list marker, and it accepts one of two values: "inside" or "outside".

The list-style-type property defines the type of list by setting the content of each marker, or bullet, on the list. Acceptable keyword values for list-style-type include:

The list-style-type property applies to all lists, and to any element that is set to display: list-item.

The color of the list marker will be whatever the computed color of the element is (set via the color property).

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

  • unordered lists (<ul>) - the list items are marked with bullets
  • ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

  • Set different list item markers for ordered lists
  • Set different list item markers for unordered lists
  • Set an image as the list item marker
  • Add background colors to lists and list items

Different List Item Markers

The list-style-type property specifies the type of list item marker.

Example -

An Image as The List Item Marker

Example -

Position The List Item Markers

The position of the list item markers in a list can be set to be inside or outside of the list's principal block box via the 'list-style-position' property. This property can have values of: outside, inside, and inherit.

The effects of the 'outside' and 'inside' values for 'list-style-position' can be seen in the style-test.html file.The list-style-position property specifies the position of the list-item markers (bullet points)."list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.

Remove Default Settings

List - Shorthand property

One of the many great possibilities in CSS is the use of shorthand properties, which let you specify several properties by using only one. If you have started to learn about CSS and implement it on your Web pages, you’ll immediately see the benefit of using these shorthand properties. CSS shorthand makes it even easier for you to apply style to your markup, and makes your CSS code more concise.

In order for you to gain any value from this article you’ll need to know the common CSS properties and their values (see Kevin Yank’s "CSS Is Easy!"). They will be used here, but not extensively explained.

Browser support as indicated here for each shorthand property often only gives a general idea of actual compatibility. For more detailed information about the nature in which a particular property is buggy or partially supported under certain browsers, check the links at the end of this article.

Styling List With Colors