Style Ordered List with CSS

If you want to use something different from the default numbering of ordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes. For exampe, ordered list styles: decimal (default), lower-alpha, upper-alpha, lower-roman, upper-roman and none.

By default, most browsers display the ordered list numbers same font style as the body text. But what if I want change style only ordered list numbers. Here is a quick CSS tutorial on how you can use the ordered list <ol> and paragraph <p> element to design a stylish numbered list.

Overview

Basically, all what we need to do is style the <ol> element to Georgia font and set background image, and then reset the <p> element (nested in <ol>) to Arial. By default numbers of ordered list positioned outside of <ol> element. So if you want numbers lie on background, you need to set left margin to <li> element. I have to add left padding to <li> element in my example, to separate text from background image.

overview

1. HTML source code

Make an ordered list. Don’t forget to wrap your text with a <p> tag.

<ol>
  <li>
    <p>This is first line</p>
  </li>
  <li>
    <p>Here is second line</p>
  </li>
  <li>
    <p>And last line</p>
  </li>
</ol>

Here is how the default ordered list will display:

step 1

2. ol element

Style the ol element:

ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}

The list will become like this:

step 2

3. ol p element

Now style the ol p element:

ol p {
  font: normal .8em Arial, Helvetica, sans-serif;
  color: #000000;
}

Your final list should look like this:

step 3

You can also add background under numbers. Don’t forget to reset margin for ol and ol p elements and add it to ol li element.

ol {
  background: #555555;
  margin:0px;
 
 
 
  padding: 0px;
}
p {
  margin:0px;
  padding:3px 0;
}
li {
  background: #ffffff;
  margin-left: 40px;
  padding-left: 10px;
}

This is how it look like now:

step 4

View my demo file to see more samples.

Posted in: CSS, Tutorials

Tags: , , , , , , ,

This entry was posted on Monday, November 3rd, 2008 at 11:40 pm and is filed under CSS, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

>>

Leave a Reply