CSS and Lists

Written By

Joe Burns

Jan 4, 2005

Use these to jump around or read it all…

[List-Style-Image]
[List-Style-Position]

[List-Style-Type]
[List-Style]

Those of you who are list-happy HTML authors know you have the ability to change the bullets and numbers that create those lovely <OL> and <UL> lists. But with HTML alone, you’re pretty locked in once you make a decision to use numbers or to use a certain bullet. Well, not any more. CSS has really allowed Web page designers to be more free with what they have. Below, I have tried to lay out the opportunities provided by the CSS:

“list-style-image”
“list-style-position”
“list-style-type”
and the catch-all: “list-style” commands.

If you’re a list person, these things will make your day.

I am putting this CSS command in each <OL>, <UL>, or <LI> straightaway using the format:

STYLE=”list-style-image: something“.

Of course, you can also use this in a Style block at the beginning of the HTML document:

<STYLE>

UL {list-style: circle inside lower-alpha}

</STYLE>

List-Style-Image
List-Style-Position
List-Style-Type
List-Style
That’s That

List-Style-Image

This command denotes an external image you’d like to use as your list item identifier. Here’s what it looks like (I’ll explain the two attributes right afterward):

…and this is what you get:

List Item
List Item
List Item

This CSS command has only two attributes. You can either set up the path to the image you want to use through the url (path/image.gif) format or set the style to “none.” Look at the above example again. I’ve set the entire UL list to use an image titled “green_bullet.gif”. However, I don’t want the last list item to carry the image. That one should have the basic round bullet, so I set its list-style-image to “none.” Get it?

The command is good for <OL>, <UL>, <LI>, <DD>, and <DT> tags.

List-Style-Position

This command allows you to denote whether the text will fall inside or outside of the bullet when it wraps. First I’ll allow a normal bullet, then one with the “inside” attribute, and then one with the “outside” attribute. It looks like this:

<UL>
   <LI> This is a long list item text in order to show the text wrapping

   <LI STYLE=”list-style-position: inside”> This is a long list item text in order to show the text wrapping

   <LI STYLE=”list-style-position: outside”> This is a long list item text in order to show the text wrapping

</UL>

…and this is what you get:

This is a long list item text in order to show the text wrapping
This is a long list item text in order to show the text wrapping
This is a long list item text in order to show the text wrapping

The command is good for <OL>, <UL>, <LI>, <DD>, and <DT> tags.

List-Style-Type

Now we get into the fun of this command. The list-style-type command allows you to set the entire list, or just one element, to a specific type. You’ve done this before in HTML by adding TYPE=”–” to the main <UL> or <OL> tag. Here, you’re offered a little more freedom. Let’s take a look at the Unordered List styles first:

…and this is what you get:

List Item
List Item
List Item

There are actually three types to choose from: circle, square, and disc. Here are all three:

…and this is what you get:

List Item
List Item
List Item

But what about those Ordered Lists? Well, you get a few more choices there: decimal, lower-alpha, upper-alpha, lower-roman, and upper-Roman. You can pretty much guess what each looks like, but because I’m a cut-and-paste fool, here’s what it all looks like:

…and this is what you get:

List Item
List Item
List Item
List Item
List Item

And just to drive the point home:

decimal: basic 1, 2, 3, counting
lower-alpha: lowercase letters
upper-alpha: uppercase letters
lower-roman: lowercase Roman numerals
upper-roman: uppercase Roman numerals

The command is good for <OL>, <UL> (changes bullets to numbers/letters), <LI>, <DD>, and <DT> tags.

List-Style

Tired of writing all those list-item types? Do you want something that does it all for you? Well, search no more. The list-item catch-all command is for you!

You may not have noticed above, but none of the attributes across all of the list-item-something commands were equal. That means if you use “circle” or “inside” the browser knows you mean a specific list-item type. Thus, you only need this one list-item command.

Let’s say I want a list with uppercase Roman numerals and wrapping text to sit outside of the Roman number. I could set both a list-style-position and a list-item-type, but why? There’s no need. Use the basic list-style command and the browser will know what you mean from the attribute. Like so:

…and this is what you get:

List Item
List Item
List Item

That’s That

As with any CSS command, your browser may not support it just yet. If so, keep the commands in your back pocket and use them anyway. Those browsers that do understand the commands will display them; those that do not will ignore the commands and no one will be the worse for it.

[List-Style-Image]
[List-Style-Position]

[List-Style-Type]
[List-Style]

Enjoy!