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

Overview

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.

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 line one</p>
  </li>
  <li>
    <p>Here is line two</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

View my demo file to see more samples.

129 Comments

1 5 6 7
  1. gifeasy
    Jul 30, 2012 @ 11:47 am

    Very good thanks!!

    Reply

  2. Ibiza
    Aug 1, 2012 @ 3:57 am

    I genuinely love how it truly is simple on my eyes and the data are nicely written. I am wondering how I may well be notified whenever a new post has been made. I’ve subscribed to your RSS which should do the trick! Have a terrific day!

    Reply

  3. lakshmi
    Sep 20, 2012 @ 2:27 pm

    good idea! thanks.

    Reply

  4. Adrian
    Oct 11, 2012 @ 4:22 am

    Here is a great deal I came to know in terms of discount for SoGoSurvey Yearly Enterprise Account. Goto the home page of SoGoSurvey after you’ve login to your Free Account. Click on Upgrade and select the Enterprise Package. If on the payment page you enter SOGOEN in the Promo Code section and you will see that they offer you a $499 deal instead of $590. I purchased one. Try the code, maybe you get lucky too.

    Reply

  5. Viron Media
    Dec 5, 2012 @ 11:54 am

    This is a great idea. So simple yet very effective.

    Reply

  6. Graham copsey
    Jan 26, 2013 @ 1:03 am

    When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get four emails with the same comment. Is there any way you can remove me from that service? Thanks a lot!

    Reply

  7. oto cam
    Nov 24, 2016 @ 6:36 pm

    Very good thanks!!

    Reply

1 5 6 7

Leave a Reply