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

There are 41 comments (+Add)

  • 41 Blog Sites http://www.gigaturn.com/web-2-development.htm

    Nice article for designers, I will use this trick in my next blog site.

  • 40 CSS 2.0 http://www.gigaturn.com/technology.htm

    Great tutorials on this site!
    CSS 2.0 is very powerful to customize your html elements.

  • 39 Steven http://www.joomla-showcase.com

    Very useful tutorial thanks.

  • 38 Jayme http://www.nestinstyle.wordpress.com

    When I click the “View my demo” link, a popup appears with ol p styling examples. Is the popup java? If not, how was it programed? Can this technique be done with CS3 behaviors?

  • 37 Jakub Chodorowicz http://www.jakub.chodorowicz.pl

    Thanks for the tip, I already used in one of my websites (its useful to use some Javascript to add the extra markup, I used ’span’ instead of ‘p’)

  • 36 my name

    hi alert(”hey look, injection attack in your face”);

  • 35 vincent

    good idea, thx

  • 34 computer jobs

    Thanks. very useful information, all the time i was look for it ;)

  • 33 kane

    This is quite good thought :)

  • 32 Foseptik Temizleme http://www.berismakina.com/

    very useful tips thanks

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

WooThemes
Flashmint Download Flash Templates
Next generation of Flash Templates. XML, CMS, Video.

Back to top