Ordered List Styling Using CSS

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:

<ol>
	<li>

This is line one</li>
	<li>

Here is line two</li>
	<li>

And last line</li>
</ol>