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 72 comments (+Add)

  • 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.

  • 68 Mike http://www.comastore.com

    Simple and easy for beginner like me.

  • 67 prabhu http://codinggeek.com

    Very Nice.. very Simple… Thanks….

  • 66 Cyrus

    Great , Style Your Ordered List
    Great article. CSS saved web design
    Cyrus
    Visit http://www.psdtoxhtmlcoder.com

  • 65 bagsin http://handbagsurf.com

    nice skill. strong css

  • 64 Bill http://fashionow.net

    Anyway to make the text wrap under the number using the ol?

  • 63 Ed http://www.behindthedot.net

    Thanks for the inspiration!

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