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 41 comments (+Add)
Post Your Comments
Loading ...
41 Blog Sites http://www.gigaturn.com/web-2-development.htm
June 28th, 2008 at 9:46 am
Nice article for designers, I will use this trick in my next blog site.
40 CSS 2.0 http://www.gigaturn.com/technology.htm
June 13th, 2008 at 12:01 pm
Great tutorials on this site!
CSS 2.0 is very powerful to customize your html elements.
39 Steven http://www.joomla-showcase.com
May 28th, 2008 at 6:09 am
Very useful tutorial thanks.
38 Jayme http://www.nestinstyle.wordpress.com
May 20th, 2008 at 4:21 pm
When I click the “View my demo” link, a popup appears with ol p styling examples. Is the popup java? If not, how was it programed? Can this technique be done with CS3 behaviors?
37 Jakub Chodorowicz http://www.jakub.chodorowicz.pl
May 3rd, 2008 at 6:34 am
Thanks for the tip, I already used in one of my websites (its useful to use some Javascript to add the extra markup, I used ’span’ instead of ‘p’)
36 my name
April 23rd, 2008 at 6:02 pm
hi alert(”hey look, injection attack in your face”);
35 vincent
April 12th, 2008 at 1:15 am
good idea, thx
34 computer jobs
March 19th, 2008 at 8:01 am
Thanks. very useful information, all the time i was look for it
33 kane
March 19th, 2008 at 8:00 am
This is quite good thought
32 Foseptik Temizleme http://www.berismakina.com/
March 5th, 2008 at 4:29 am
very useful tips thanks