totn CSS

CSS: list-style property

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

Description

The CSS list-style property defines the appearance, position, and image for list item elements. It is a shorthand property for setting the list-style-type, list-style-position, and list-style-image CSS properties.

Syntax

The syntax for the list-style CSS property is:

list-style: list-style-type list-style-position list-style-image;

Parameters or Arguments

list-style-type is 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: disc; }
circle Hollow circle
ul { list-style: circle; }
square Filled square
ul { list-style: square; }
decimal Decimal numbers starting with 1
ol { list-style: decimal; }
decimal-leading-zero Decimal numbers starting with 1, padded with 0 at the front for numbers less than 10
ol { list-style: decimal-leading-zero; }
lower-roman Lowercase roman numerals
ol { list-style: lower-roman; }
upper-roman Uppercase roman numerals
ol { list-style: upper-roman; }
lower-greek Lowercase Greek
ol { list-style: lower-greek; }
lower-alpha Lowercase ASCII letters
ol { list-style: lower-alpha; }
lower-latin Lowercase ASCII letters (not supported in IE7)
ol { list-style: lower-latin; }
upper-alpha Uppercase ASCII letters
ol { list-style: upper-alpha; }
upper-latin Uppercase ASCII letters (not supported in IE7)
ol { list-style: upper-latin; }
armenian Armenian numbering
ol { list-style: armenian; }
georgian Georgian numbering
ol { list-style: georgian; }
none No numbering or symbol will appear before each list item element
ol { list-style: none; }
ul { list-style: none; }

list-style-position is the appearance of a list item element. It can be one of the following:

Value Description
inside The marker box is inside of the principal block box
ul { list-style: inside; }
outside The marker box is outside of the principal block box (this is the default)
ul { list-style: outside; }

list-style-image is the image to use for the list marker. It can be one of the following:

Value Description
url Location of the image resource
ul { list-style: url("/images/symbol.png"); }

Note

Browser Compatibility

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

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

Example

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

With Ordered Lists

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

The HTML would look like this:

<ol>
  <li>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</li>
  <li>CheckYourMath.com has answers to your every day Math questions.</li>
  <li>BigActivities.com is designed for parents, teachers, and caregivers to help kids learn the basics or just have fun!</li>
</ol>

The CSS would look like this:

ol { list-style: decimal-leading-zero outside; }

The ordered list would look like this:

CSS

In this CSS list-style example, we have chosen to display decimals with leading zeros in front of each list item in the <ol> tag by setting the list-style-type to decimal-leading-zero. The list-style-position is set to outside which results in the list item markers (ie: numbering) to appear less indented and when the list item text wraps, the text continues to remain more indented than the numbering.

With Unordered Lists

Next, let's look at a CSS list-style example where we apply the list-style 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: square; }

The unordered list would look like this:

CSS

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

With List Items

Let's look at a CSS list-style example where we apply the list-style 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: url("/images/symbol.gif"); }

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

CSS

In this list-style example, the symbol.gif image will appear in front of each list item.

Share on: