Did you find this useful?
Socialize it today.


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.


Lists

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}


List-style-type

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

ValueDescription
armenianArmenian numbering
circleCircle
cjk-ideographicIdeographic numbers
decimalNumber
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
lower-alphaLower-alpha
lower-greekLower-greek
lower-latinLower-latin
lower-romanLower-roman
noneNo marker
squareSquare
upper-alphaUpper-alpha
upper-latinUpper-latin
upper-romanUpper-roman


List-style-position

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

List-style-image

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

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

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