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 51 comments (+Add)
Post Your Comments
Advertise Here
Loading ...
51 Met-art http://www.met-art.lt
December 20th, 2008 at 1:31 pm
Nice article for designers
50 ntas http://www.kalicido.com
November 26th, 2008 at 5:55 pm
Nice !
49 Pieter
November 22nd, 2008 at 5:26 pm
Thank you for this one!
I used it on my site.
-visible multimedia
48 Annanimous :-P http://www.pixobel.com
October 27th, 2008 at 10:20 am
http://www.pixobel.com
47 Annanimous :-P http://www.pixobel.com
October 27th, 2008 at 10:20 am
This is a nice article.. Great !
46 Annanimous :-P http://www.pixobel.com
October 27th, 2008 at 10:19 am
Good one actually
45 dfs design www http://www.tanieprojektowanie.com
October 23rd, 2008 at 12:12 pm
nice and easy
44 Web design company http://www.kronikmedia.co.uk
October 6th, 2008 at 2:55 pm
Thank you for the great solution. The current design trends are for clean cust minimalist websites In such css driven designs, styling ordered lists and bullet lists presents an excellent opportunity to go that extra mile.Its interesting to see what simple formatting using css can achieve!
43 scott
August 7th, 2008 at 12:19 am
Hello Looking for some code to make a customise can i have the type being (a) (b) (v) etc! like <ol type=”(a)” etc) oor
42 Robin
August 4th, 2008 at 3:07 pm
Nice tip…so simple yet looks great!