By default, most browsers display the ordered list numbers same font style as the body text. 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.

Preview samples

Download HTML file


Basically, what we need to do is style the ol element to Georgia font, and then reset the p element (nested in ol) to Arial.


1. HTML source code

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

    <p>This is line one</p>
    <p>Here is line two</p>
    <p>And last line</p>

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

View my demo file to see more samples.