Jul 23

Tagged in: , Comments:Add

Style Your Ordered List

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.

Delicious Stumbleupon Digg

Startdrawing.org 33 Artistic Sites

Comments

Pages: 8 7 6 5 4 3 2 1 » Show All

There are 78 comments (+Add)

  • 78 khay http://ekas0615.student.ipb.ac.id

    thank you so much for sharing. nice post. i like it :p

  • 77 Devin Walker http://www.dlocc.com

    Very useful trick there! Similar to using spans for the same purpose of styling

  • 76 Laura http://www.webdezignstudio.com

    Love IT!

  • 75 Luke Stanley

    Shelt, Bob is right, because P is a paragraph. Span doesn’t imply that it’s a paragraph.

  • 74 Shelt

    Bob, what planet are you on? how is a span more semantic than a P lol

  • 73 Bob Marley http://www.bobmarley.com

    Or just use a span instead of a p. Its more semantic and it works in Firefox…

  • 72 vincent http://www.hibirdal.com

    The designs showed here show what simple and tasteful design is all about. Another one to consider

  • 71 yennaiv

    i like ur BG too.

  • 70 yennaiv

    tnx. :) love it!

  • 69 Webchester http://w-blog.org.ua/

    Very nice lesson :) Thanks.

Pages: 8 7 6 5 4 3 2 1 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

Back to top