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:
Property: | list-style-type |
---|---|
Default value: |
|
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:
* These may not be supported by older browsers.
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.
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:
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.li
element. The text flows around it, as if it were floated left.For demonstration, I've created a simple page showing this:
Below is the stylesheet:
In each case, the bullet is aligned with the top line.
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:
And below, the result:
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.
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.