totn CSS

CSS: list-style-type property

This CSS tutorial explains how to use the CSS property called list-style-type with syntax and examples.

Description

The CSS list-style-type property defines the appearance of a list item element.

Syntax

The syntax for the list-style-type CSS property is:

list-style-type: value;

Parameters or Arguments

value

The appearance of a list item element. It can be one of the following:

Value Description
disc Filled circle. This is the default.
ul { list-style-type: disc; }
circle Hollow circle
ul { list-style-type: circle; }
square Filled square
ul { list-style-type: square; }
decimal Decimal numbers starting with 1
ol { list-style-type: decimal; }
decimal-leading-zero Decimal numbers starting with 1, padded with 0 at the front for numbers less than 10
ol { list-style-type: decimal-leading-zero; }
lower-roman Lowercase roman numerals
ol { list-style-type: lower-roman; }
upper-roman Uppercase roman numerals
ol { list-style-type: upper-roman; }
lower-greek Lowercase Greek
ol { list-style-type: lower-greek; }
lower-alpha Lowercase ASCII letters
ol { list-style-type: lower-alpha; }
lower-latin Lowercase ASCII letters (not supported in IE7)
ol { list-style-type: lower-latin; }
upper-alpha Uppercase ASCII letters
ol { list-style-type: upper-alpha; }
upper-latin Uppercase ASCII letters (not supported in IE7)
ol { list-style-type: upper-latin; }
armenian Armenian numbering
ol { list-style-type: armenian; }
georgian Georgian numbering
ol { list-style-type: georgian; }
none No numbering or symbol will appear before each list item element
ol { list-style-type: none; }
ul { list-style-type: none; }
inherit Element will inherit the list-style-type from its parent element
ol { list-style-type: inherit; }
ul { list-style-type: inherit; }

Note

  • The list-style-type property can be applied to <ol>, <ul> or <li> tags.
  • The list-style-type applies to elements with display: list-item.
  • IE7 does not support lower-latin and upper-latin, instead use lower-alpha and upper-alpha.
  • Alphabetical styles such as lower-alpha or upper-alpha will render undefined numbers after 26 items have been listed.
  • See also the list-style, list-style-image, and list-style-position properties.

Browser Compatibility

The CSS list-style-type property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the list-style-type property below, exploring examples of how to use this property in CSS.

With Ordered Lists

Let's look at a CSS list-style-type example where we apply the list-style-type to an ordered list.

The HTML would look like this:

<ol>
  <li>TechOnTheNet.com</li>
  <li>CheckYourMath.com</li>
  <li>BigActivities.com</li>
</ol>

The CSS would look like this:

ol { list-style-type: upper-roman; }

The ordered list would look like this:

CSS

In this CSS list-style-type example, we have chosen to display uppercase roman numerals in front of each list item in the <ol> tag.

With Unordered Lists

Next, let's look at a CSS list-style-type example where we apply the list-style-type to an unordered list.

The HTML would look like this:

<ul>
  <li>TechOnTheNet.com</li>
  <li>CheckYourMath.com</li>
  <li>BigActivities.com</li>
</ul>

The CSS would look like this:

ul { list-style-type: none; }

The unordered list would look like this:

CSS

In this CSS list-style-type example, we have removed the disc from the front of each list item in the <ul> tag. The list items will still indent (unless overriden with CSS) but there will be nothing appearing before each list item.

With List Items

Let's look at a CSS list-style-type example where we apply the list-style-type to a list item.

The HTML would look like this:

<ul>
  <li>TechOnTheNet.com</li>
  <li>CheckYourMath.com</li>
  <li>BigActivities.com</li>
</ul>

The CSS would look like this:

li { list-style-type: square; }

In this CSS list-style-type example, we have chosen to display filled squares in front of every <li> element (instead of a disc for unordered lists).

This would also result in the list items appearing as follows (regardless of whether the list items are part of an ordered or unordered list):

CSS

Share on: