SimcoMedia Professional Web Design » ordered list css http://www.simcomedia.com Custom Web Designs And Ecommerce Specialists Sun, 08 Jan 2012 21:02:29 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Ordered List Styling Using CSS http://www.simcomedia.com/ordered-list-styling-using-css http://www.simcomedia.com/ordered-list-styling-using-css#comments Sat, 21 Nov 2009 20:00:25 +0000 SimcoMedia Design http://www.simcomedia.com/?p=531 We’ve addressed unordered lists but haven’t really done much with the ordered ones. What’s the difference? Well, unordered lists use bullets and ordered list use numbers. They both use the <li> tag but start differently with the unordered being <ul> while the ordered is <ol>. Without using any styling for the ordered list you get that ugly set of numbers that label each list item. Using a little bit of styling produces much better results.

Check it out – this is standard list display:

  1. blah blah
  2. blah blah blahhhh
  3. blah blah blahhhhhh

Now, with some style use in our CSS we can come up with something like this:

  1. blah blah

  2. blah blahhh

  3. blah blah blahhhhhhhhhh

Here’s the CSS:

ol {

font: italic 1em Georgia, Times, serif;

color: #999999;

}

ol p {

font: normal .8em Arial, Helvetica, sans-serif;

color: #000000;

}

And the HTML:

    

  1. 

This is line one
    2. 

  2. 

Here is line two
    3. 

  3. 

And last line
    4.
]]> http://www.simcomedia.com/ordered-list-styling-using-css/feed 0