CSS and Lists

By Joe Burns

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

     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):

<UL STYLE="list-style-image: url(green_bullet.gif)">
   <LI> List Item
   <LI> List Item
   <LI STYLE="list-style-image: none"> List Item
</UL>

...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:

<UL STYLE="list-style-type: square">
   <LI> List Item
   <LI> List Item
   <LI> List Item
</UL>

...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:

<UL>
   <LI STYLE="list-style-type: circle"> List Item
   <LI STYLE="list-style-type: square"> List Item
   <LI STYLE="list-style-type: disc"> List Item
</UL>

...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:

<OL>
   <LI STYLE="list-style-type: decimal"> List Item
   <LI STYLE="list-style-type: lower-alpha"> List Item
   <LI STYLE="list-style-type: upper-alpha"> List Item
   <LI STYLE="list-style-type: lower-roman"> List Item
   <LI STYLE="list-style-type: upper-roman"> List Item
</OL>

...and this is what you get:

1. List Item
2. List Item
3. List Item
4. List Item
5. List Item

     And just to drive the point home:

1. decimal: basic 1, 2, 3, counting
2. lower-alpha: lowercase letters
3. upper-alpha: uppercase letters
4. lower-roman: lowercase Roman numerals
5. 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:

<OL STYLE="list-style: upper-roman outside">
   <LI> List Item
   <LI> List Item
   <LI> List Item
</OL>

...and this is what you get:

1. List Item
2. List Item
3. List Item

---

That's That