Jul 23
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.
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.
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:
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:
View my demo file to see more samples.
Startdrawing.org 33 Artistic Sites
Comments
Pages: 8 7 6 5 4 3 2 1 » Show All
There are 72 comments (+Add)
Pages: 8 7 6 5 4 3 2 1 » Show All
Loading ...
72 vincent http://www.hibirdal.com
January 5th, 2010 at 11:23 pm
The designs showed here show what simple and tasteful design is all about. Another one to consider
71 yennaiv
December 6th, 2009 at 5:49 am
i like ur BG too.
70 yennaiv
December 6th, 2009 at 5:48 am
tnx.
love it!
69 Webchester http://w-blog.org.ua/
November 22nd, 2009 at 5:00 pm
Very nice lesson
Thanks.
68 Mike http://www.comastore.com
October 31st, 2009 at 4:16 am
Simple and easy for beginner like me.
67 prabhu http://codinggeek.com
October 19th, 2009 at 1:59 am
Very Nice.. very Simple… Thanks….
66 Cyrus
September 21st, 2009 at 12:29 pm
Great , Style Your Ordered List
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
65 bagsin http://handbagsurf.com
September 10th, 2009 at 7:18 pm
nice skill. strong css
64 Bill http://fashionow.net
September 4th, 2009 at 10:06 pm
Anyway to make the text wrap under the number using the ol?
63 Ed http://www.behindthedot.net
August 24th, 2009 at 4:30 am
Thanks for the inspiration!