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: 6 5 4 3 2 1 » Show All

There are 60 comments (+Add)

  • 60 flashfs http://souleaterwallpaper.co.cc

    Very good tutorial for beginners. Thanks.

  • 59 Scott Foley http://scottfoley.net

    Amazingly simple yet beautiful results. Nice one.

  • 58 rightie

    Beautiful. But is there any way to control the line height of the paragraphs in the p section to achieve a uniform look within the whole list?

  • 57 Xtence http://www.xtence.be

    Very nice, i like typography, didnt think ’bout this one, thanks !

  • 56 Peter http://www.sifupeter.com

    Do you know how to get rid of the period after the number in ordered lists? I want to style the numbers with the number only, and a circle around it, probably by putting a circular image in the background of the li.

  • 55 andy http://rokkan.com

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

  • 54 Ray Acosta http://www.rayacosta.com

    Dear Nick:
    Thanks, thanks, thanks. Only a designer could explain “programming jargon” so clear like your posts. I love your site and the spirit on it. By the way, to be a designer you have a great understanding of programming!

    Greetings,

    Ray

  • 53 Michael Wilson http://www.thisiswilson.com

    Stupid easy - and such a brilliantly beautiful way of presenting lists.

  • 52 sanat http://student.cankaya.edu.tr/~c0511055/

    thanks

  • 51 Met-art http://www.met-art.lt

    Nice article for designers

Pages: 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

advertisement

Back to top