html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS list-style property

Definition

The CSS list-style property is a shorthand for specifying the other list style properties.

Applies To

All elements with 'display: list-item;'.

Property Values

inherit - The list-style properties are inherited from the parent element.

List Style Type Property Values


Valid values for list-style-type keywords are circle, disc, square, armenian, decimal, decimal-leading-zero, georgian, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin and upper-latin.

List Style Image Property Values


Valid values for list-style-image keywords are none and url.

List Style Position Property Values


Valid values for list-style-position keywords are inside and outside.

Default Value

Default value for list style type is set to decimal for ordered lists and disc for unordered lists.

Default value for list style image is set to none.

Default value for list style position is set to outside.

Inheritance

The list-style property is inherited from the parent element if no value is applied to the current element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS list-style property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS list-style Property</title>

<!-- Valid values for CSS list-style Property are:

     inherit, none, a valid CSS list style, a valid CSS 
     list style image and a valid CSS list style position.

--> 

<style type="text/css">

ol { 
  list-style: lower-greek url(http://htmldoctor.info/images/bullet_purple.png) inside;
}

ul { 
  list-style: none;
}

li { 
  padding: 5px;
  border: 1px solid blue;
}

#list { 
  list-style: armenian outside;
}

</style>

</head>
<body>
<h1>The CSS list-style Property</h1>
<h2>Using image list-item marker inside</h2>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ol>
<h2>Using no list-item marker or position</h2>
<ul>
  <li>Tin of Tomatoes</li>
  <li>Bacon</li>
  <li>Loaf of Bread</li>
  <li>Mushrooms</li>
</ul>
<h2>Using armenian list-item marker outside</h2>
<ol id="list">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ol>
</body>
</html>

How It Looks

The results of using the list-style property with the values above will look something like the following:

notepad
CSS line-height    << Prev          Next >>   CSS list-style-image

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.