Little Web Hut

CSS 2.1 Reference: list-style Property

CSS list-style Property
Syntax
selector {list-style: type position image;}
  • type is specified by using one of the following keywords: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha, or none.
  • position is specified by using one of the following keywords: inside or outside.
  • image is specified by using a URI or the keyword none.
  • type, position, and image are all OPTIONAL but at least one of them must occur.
(OR)
selector {list-style: value;}
  • value is specified by using the keyword inherit.
Usage

The list-style property is used as a shorthand method to specify one or more of the following 3 list-style properties all in one place.

All 3 of these properties are optional but at least one of them must be specified.


CSS Example: The list-style property is set to lower-alpha and inside.
  ol {list-style: lower-alpha inside;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • list-style-type keywords:
    • disc
    • circle
    • square
    • decimal
    • decimal-leading-zero
    • lower-roman
    • upper-roman
    • lower-greek
    • lower-latin
    • upper-latin
    • armenian
    • georgian
    • lower-alpha
    • upper-alpha
    • none

    Note: The list-style-type samples, shown above, may not appear identically in all browsers.

  • list-style-position keywords:
    • inside - The list item marker is located inside the element's box.
    • outside - The list item marker is located outside the element's box.
  • list-style-image keywords:
    • none - No image is specified. The list item marker's appearance will be determined by the value of the list-style-type property
  • inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.
Applies To Elements that have a display property value of list-item. This is typically the default value for the HTML <li> element.
Inherited Yes
Initial Value


list-style Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe list-style property is set to lower-alpha and inside.