CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES
Advertisements

CSS list-style-type Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The list-style-type CSS property specifies the type of marker for the list-items.

The following table summarizes the usages context and the version history of this property.

Default value: disc
Applies to: List items
Inherited: Yes
Animatable: No. See animatable properties.
Version: CSS 1, 2, 3

Syntax

The syntax of the property is given with:

list-style-type: 
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | initial | inherit

The example below shows the list-style-type property in action.

ol {
    list-style-type: decimal-leading-zero;
}
ul {
    list-style-type: square;
}

Property Values

The following table describes the values of this property.

Value Description
disc The marker is a filled circle.
circle The marker is a hollow circle.
square The marker is a filled square.
decimal

The marker is a –

  • Decimal number
  • Beginning with 1.
decimal-leading-zero

The marker is a –

  • Decimal number
  • Padded by initial zero
  • E.g. 01, 02, 03, ... 10, 11
lower-roman

The marker is –

  • Lowercase roman numerals
  • E.g. i, ii, iii, iv, v, ...
upper-roman

The marker is –

  • Uppercase roman numerals
  • E.g. I, II, III, IV, V, ...
lower-greek

The marker is –

  • Lowercase Greek letters
  • alpha, beta, gamma, ...
  • E.g. α, β, γ, ...
lower-latin

The marker is –

  • Lowercase Latin letters
  • E.g. a, b, c, ... z
upper-latin

The marker is –

  • Uppercase Latin letters
  • E.g. A, B, C, ... Z
armenian

The marker is –

  • Traditional Armenian numbering
  • E.g. ayb/ayp, ben/pen, gim/keem, ...
georgian

The marker is –

  • Traditional Georgian numbering
  • E.g. an, ban, gan, ... he, tan, in ...
lower-alpha

The marker is –

  • Uppercase Latin letters
  • E.g. a, b, c, ... z
upper-alpha

The marker is –

  • Uppercase Latin letters
  • E.g. A, B, C, ... Z
none Specifies no marker.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element list-style-type property.

Browser Compatibility

The list-style-type property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+

Further Reading

See tutorial on: HTML List, CSS Lists.

Related properties: list-style, list-style-image, list-style-position.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties