CSS Styling Lists

Friday, March 23, 2012

tags CSS

CSS Styled HTML lists have become an invaluable tool in an HTML developer’s toolbox. This is mainly due to the fact that HTML lists are versatile and flexible in nature. Lists can be used for simple tasks such as creating an ordered listing of items, or for fully featured navigation bars. CSS allows you to set different list item markers for ordered lists and unordered lists, as well as an image as the list item marker.


In HTML, there are two main types of lists.

  • unordered lists - the list items are marked with bullets
  • ordered lists - the list items are marked with numbers or letters

List-style Property (Shorthand)

With CSS, we can use the shorthand list-style property. The list-style property sets three values: list-style-type, list-style-position, and list-style-image. Not all three values are required.

ul {list-style: circle inside}


While the list-style-type property is supported by most modern browsers, not all of the property values listed below may be supported.

armenianArmenian numbering
cjk-ideographicIdeographic numbers
decimal-leading-zeroNumber with leading zero
discFilled circle.
georgianGeorgian numbering
hebrewHebrew numbering
hiraganaHiragana numbering
hiragana-irohaHiragana iroha numbering
inheritInherited from parent element
katakanaKatakana numbering
katakana-irohaKatakana iroha numbering
noneNo marker


The list-style-position property simply specifies if the list-item markers should appear inside or outside the content flow. Values are as follows: inside, outside, or inherit. Here is an example:

  • Inside 1
  • Inside 2
  • Inside 3
  • Outside 1
  • Outside 2
  • Outside 3


The list-style-image property specifies that the list-item marker use an image. You may want to specify the list-style-type property in addition to the list-style-image property. The list-style-type property will be used if the image is not available. Here is an example of the list-style-image property.

ul {list-style-image: url('marker.gif');}

  • Item 1
  • Item 2
  • Item 3

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS: The Complete Reference HTML CSS and JavaScript Editor CSS: The Missing Manual