CSS ordered list

CSS ordered 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

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.

HTML source code

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

  1. This is first line

  2. Here is second line

  3. And last line

Here is how the default ordered list will display:

ol element

Style the ol element:

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

The list will become like this:

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:

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:

Demo

View my demo file to see more samples.