Style Ordered List with CSS

admin — Mon, 03 Nov 2008 21:40:35 +0000

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

element to design a stylish numbered list.

Overview

Basically, all what we need to do is style the

element (nested in

element. I have to add left padding to
element in my example, to separate text from background image.
1. HTML source code

Make an ordered list. Don’t forget to wrap your text with a
tag.
```
  
    This is first line
  
  
    Here is second line
  
  
    And last line
  
```
Here is how the default ordered list will display:

2. ol element

Style the ol element:
```
ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}
```
The list will become like this:

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:

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:

View my demo file to see more samples.

Web Masters Wall» CSS Category on WMW

Style Ordered List with CSS

Overview

1. HTML source code

2. ol element

3. ol p element