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
There are 60 comments (+Add)
Post Your Comments
Loading ...
60 flashfs http://souleaterwallpaper.co.cc
May 25th, 2009 at 9:25 am
Very good tutorial for beginners. Thanks.
59 Scott Foley http://scottfoley.net
May 13th, 2009 at 3:12 pm
Amazingly simple yet beautiful results. Nice one.
58 rightie
April 21st, 2009 at 6:33 am
Beautiful. But is there any way to control the line height of the paragraphs in the p section to achieve a uniform look within the whole list?
57 Xtence http://www.xtence.be
March 11th, 2009 at 9:50 am
Very nice, i like typography, didnt think ’bout this one, thanks !
56 Peter http://www.sifupeter.com
March 2nd, 2009 at 7:21 pm
Do you know how to get rid of the period after the number in ordered lists? I want to style the numbers with the number only, and a circle around it, probably by putting a circular image in the background of the li.
55 andy http://rokkan.com
February 12th, 2009 at 11:14 pm
Anyway to make the text wrap under the number using the ol?
54 Ray Acosta http://www.rayacosta.com
February 11th, 2009 at 3:06 pm
Dear Nick:
Thanks, thanks, thanks. Only a designer could explain “programming jargon” so clear like your posts. I love your site and the spirit on it. By the way, to be a designer you have a great understanding of programming!
Greetings,
Ray
53 Michael Wilson http://www.thisiswilson.com
February 2nd, 2009 at 5:30 pm
Stupid easy - and such a brilliantly beautiful way of presenting lists.
52 sanat http://student.cankaya.edu.tr/~c0511055/
January 22nd, 2009 at 11:27 am
thanks
51 Met-art http://www.met-art.lt
December 20th, 2008 at 1:31 pm
Nice article for designers