Computers & ProgrammingCSSWeb Development

CSS Styling Lists

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.

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');
}

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top