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 78 comments (+Add)
Pages: 8 7 6 5 4 3 2 1 » Show All
Loading ...
78 khay http://ekas0615.student.ipb.ac.id
July 16th, 2010 at 1:39 pm
thank you so much for sharing. nice post. i like it :p
77 Devin Walker http://www.dlocc.com
June 30th, 2010 at 1:37 pm
Very useful trick there! Similar to using spans for the same purpose of styling
76 Laura http://www.webdezignstudio.com
May 16th, 2010 at 3:17 pm
Love IT!
75 Luke Stanley
April 13th, 2010 at 6:58 pm
Shelt, Bob is right, because P is a paragraph. Span doesn’t imply that it’s a paragraph.
74 Shelt
March 31st, 2010 at 10:48 am
Bob, what planet are you on? how is a span more semantic than a P lol
73 Bob Marley http://www.bobmarley.com
February 18th, 2010 at 12:37 pm
Or just use a span instead of a p. Its more semantic and it works in Firefox…
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.