CSS For Lists

In most webpages, you will have at least one list, usually more. This can be for navigation, or a links page, or whatever. CSS provides three special properties and a fourth collective property allowing you to style these lists to your heart's content. All of the above properties apply to unordered and ordered lists; definition lists aren't affected by these properies. These properties are:

List Style Type

Property:list-style-type
Default value:

disc for unordered lists

decimal for ordered lists

Inherited:Yes

Unordered lists (ul elements) have bullets and ordered lists (ol elements) have numbers by default. However, there are other options as well, and the list-style-type property allows you to decide what sort of bullets or numbers the list items get. It is important to note that again, semantics must dictate which type of list you use, because this property will allow you to make an unordered list get numbers and ordered lists get bullets. I'm dead serious.

There are several values for lists, one of which is commonly used to get rid of numbers and bullets altogether:

Removing List Style
ul, ol{list-style-type:none;}
List with styling removed

Unordered List Style Types

list-style-type:disc;
List with disc bullet points
list-style-type:circle;
List with circle bullet points
list-style-type:square;
List with square bullet points

Ordered List Style Types

list-style-type:decimal;
List with decimal numbering
list-style-type:decimal-leading-zero;*
List with decimal numbering using a leading zero
list-style-type:upper-roman;
List with capital Roman numerals
list-style-type:lower-roman;
List with lower-case Roman numerals
list-style-type:upper-alpha;
list-style-type:upper-latin;
List with capital letters
list-style-type:lower-latin;
list-style-type:lower-alpha;
List with lower-case letters
list-style-type:lower-greek;*
List with lower-case greek letters
list-style-type:armenian;*
List with Armenian numerals
list-style-type:georgian;*
List with Georgian numerals

* These may not be supported by older browsers.

Limitations Of Numbered Lists

list-style-type:upper-roman;
list-style-type:lower-roman;
3,999
list-style-type:armenian;
9,999
list-style-type:georgian;
19,999
All others
2,147,483,647

When the maximum values of the above (excluding the last) list style types are exceeded, the numbering automatically switches to decimal numbering.

The last value represents the highest number that a browser can handle and is equal to 231 - 1. When that's exceeded, strange things tend to happen: Firefox, Internet Explorer, Google Chrome, Safari, and Lynx (although Lynx requires a different method to show this), go up to 2,147,483,647, then switch over to negative numbers starting with -2,147,483,648. Opera, on the other hand, tops out at 536,870,911 (229-1), and stays there. That being said, it is difficult to imagine a list so long that even Roman Numerals would not suffice (which would require at least 4,000 items).

As for the lower limit, only decimal and decimal-leading-zero are capable of displaying 0 or showing negative numbers, though the treatment of negative numbers using decimal-leading-zero is inconsistent from browser to browser.

List Style Position

Property:list-style-position
Default value:outside
Inherited:Yes

A list element, as you know, is a block element. The bullet or number of a list normally exists outside of that block, out on its own. But that can be changed. This property has two values:

outside
The bullet or number is outside the li element, just outside the border, but within the margin area. In fact, increasing the left-side margin (assuming your page is oriented left-to-right) will move the bullet or number right, along with the left side of your li element.
inside
The bullet or number is inside the li element. The text flows around it, as if it were floated left.

For demonstration, I've created a simple page showing this:

A page showing list style positions.

Below is the stylesheet:

Specifying List Style Position
li{
border:1px solid black;
padding:10px;
}
#li_1{list-style-position:outside;}
#li_2{list-style-position:inside;}

In each case, the bullet is aligned with the top line.

List Style Image

Property:list-style-image
Default value:none
Inherited:Yes

The last property allows for a list to have an image instead of a bullet. Like background images, this uses a URI, and the value works in the exact same way.

For demonstration, I've created a simple page showing this. Below is the stylesheet:

Specifying A List Style Image
li{list-style-image:url('./arrow.PNG');}

And below, the result:

A page using images as bullets

The images completely override the bullets—so long as the image shows up. If it doesn't, then list-style-type takes over.

Do note: The images stretch off to the left. It's possible to have your images stretch right off the left side of the screen.

List Style Shorthand

Property:list-style
Default value:See individual properties
Inherited:Yes

The list-style attribute allows you to set the list style properties all in one declaration. The values for list-style-position, list-style-type, and list-style-image can be set in any order, and you may use any one, any two, or even all three of those properties.