If you want to use something different from the default numbering of ordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes. For exampe, ordered list styles: decimal (default), lower-alpha, upper-alpha, lower-roman, upper-roman and none.
By default, most browsers display the ordered list numbers same font style as the body text. But what if I want change style only ordered list numbers. 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.
Overview
Basically, all what we need to do is style the <ol> element to Georgia font and set background image, and then reset the <p> element (nested in <ol>) to Arial. By default numbers of ordered list positioned outside of <ol> element. So if you want numbers lie on background, you need to set left margin to <li> element. I have to add left padding to <li> element in my example, to separate text from background image.
1. HTML source code
Make an ordered list. Don’t forget to wrap your text with a <p> tag.
<ol>
<li>
<p>This is first line</p>
</li>
<li>
<p>Here is second line</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>Here is how the default ordered list will display:
2. ol element
Style the ol element:
ol { font: italic 1em Georgia, Times, serif; color: #999999; }
The list will become like this:
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:
You can also add background under numbers. Don’t forget to reset margin for ol and ol p elements and add it to ol li element.
ol { background: #555555; margin:0px; padding: 0px; } p { margin:0px; padding:3px 0; } li { background: #ffffff; margin-left: 40px; padding-left: 10px; }
This is how it look like now:
View my demo file to see more samples.
Hi every one!
I have some problem that how to design order list for persian language I mean from left to right for persain like الف ب ت ث
plz help me
Hi there
Fabulous layouts above. Love them.
One question you may be able to assist: why do your layouts work in IE6 and mine don’t? For IE I have to place a no-wrap otherwise the content will appear down the left side of the container only. I have tested the lists in IE but still having probs. Cheers
Hi,
Is there a way to have an ol within another ol but is styled different? Example, I have an ol that is decimal and I’d like a second ol within that ol that is alpha:
1. this is the first list
A. this is the second list
Please let me know if you can help.
Thanks!
Cool thanks!
I guess it’s a bit late, but…
@Ghezal, put the attribute dir with the value rtl on it:
With dir meaning “direction” and rtl meaning “right to left”
@Brian you could use css inheritance if you are reluctant to add ids or classes
ol {color: red}
ol ol {color: black}
Your decimals will be red and your alphabetic characters will be black.
Great info. Thanks for posting!
Ok, i think i will save this for thenext time I’ll have to argue with Frank (friend of mine) about it! I wasn’t wrong :D
Nice description! Is it possible to make an ordered list with something other than periods after the numbers? I would like two numbered lists:
1)
2)
and
1>
2>
From the various examples seen online to style ordered lists, the common method seems to be to style the numbers via the OL tag, then set additional styling on the list LI elements to override the OL styling.
You can see this list styling method taken to the next level on this price comparison site where the list is displayed as a top chart and incorporates H3 and P tags for even further style customizations – see an example of that here:
http://www.superstoresearch.com/~Argos#Argos_Extra
I like the tip where you can add an image for the bullet. That was something I was unaware of. Thanks