Lists in CSS

Ordered lists
By using CSS it is easy to short-cut using different bullets (markers) for lists. First, let's look at ordered lists.

As you know, you can specify the list type when you create a numbered list. By using css, you can short-cut the process. Suppose you want all lower-case alphabet letters to be used as your bullets. Here's an example of how to do that with css:

That's what you put in the heading. Then, in the text, you'll put:

<ol class="lalpha">
<li> This is the first item</li>
<li> This is the second item</li>
<li> This is the third item</li>
</ol>

And here's what you'll see

This is the first item
This is the second item
This is the third item

Here are some examples of different style types for ordered lists. Of course, you can change the class by changing the word following the decimal. Class names aren't that important, but be consistent; it's easier to remember.

ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}

Unordered lists
You can easily specify which type of bullets are used on your list if it's an unordered list as well. It is done almost the same way. Here's an example and some info that might help you.

That's what you put in the heading. Then, in the text, you'll put:

<ul class="square">
<li> This is the first item</li>
<li> This is the second item</li>
<li> This is the third item</li>
</ul>

And here's what you'll see

This is the first item
This is the second item
This is the third item

And here are some commands that might help,

ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}

Pictures as bullets
If you are using Internet Explorer, you may be able to see this, but many versions of Netscape don't support the next two items. You can actually use a picture as the bullet for a list. To do this, select a picture and specify an unordered list. For example, if you find a picture you want to use as a bullet, like this one ===>

save it into your picture file. Its name is "reedbullet.gif"

That's what you put in the heading. Then, in the text, you'll put:

<ul class="pic">
<li> This is the first item. I made this one longer so you could see what happens with a very long list item. Notice that the bullet works exactly like an ordinay bullet, signalling the beginning of the list item.</li>
<li> This is the second item</li>
<li> This is the third item</li>
</ul>

And here's what you'll see

List item 1. I made this one longer so you could see what happens with a very long list item. Notice that the bullet works exactly like an ordinay bullet, signalling the beginning of the list item.
List item 2
List item 3

If you're doing this, make sure the pictures are very, very small. Using large pictures cuts them off, which is very annoying and ugly.

Placement of bullets
If you'll notice, in the list above, the bullets are out in front of the list. There is one other possible placement for them, and that is inside of the list. Let me show you:

List item 1. I made this one longer so you could see what happens with a very long list item. Notice that the bullet is actually indented, which can be useful when making a list. I'm not sure how, exactly, or even why you would want to do this, but know that you can.
List item 2
List item 3

Here's the code in the top:

In the body:

<ul class="inside">
<li> List item 1. I made this one longer so you could see what happens with a very long list item. Notice that the bullet is actually indented, which can be useful when making a list. I'm not sure how, exactly, or even why you would want to do this, but know that you can.</li>
<li> List item 2</li>
<li> List item 3</li>
</ul>

So, can these things be combined? You bet! You can apply all of these codes into a single code, if you'd like. Let's say you'd like an unnumbered list, inset picture bullets, and on Netscape you'd like the bullets to be circles. Here's the code:
Heading:

Code in the text:

<ul class="cute">
<li> List item 1. I made this one longer so you could see what happens with a very long list item. Notice that the bullet is indented, and if you have IE, pictures are present. </li>
<li> List item 2</li>
<li> List item 3</li>
</ul>

And all of that nonsense produces this final masterpiece:

List item 1. I made this one longer so you could see what happens with a very long list item. Notice that the bullet is indented, and if you have IE, pictures are present.
List item 2
List item 3

So, you're done. Go back to the tutorial and close this window.