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.

Preview samples

Download HTML file

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.

overview

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:

step 1

2. ol element

Style the ol element:

ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}

The list will become like this:

step 2

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:

step 3

View my demo file to see more samples.

131 Comments

Arctic
Jul 30, 2007 at 6:26 am

Thanks! It is useful.

Biscuitrat
Jul 30, 2007 at 11:07 am

Huh, that makes things so much easier. I knew you could stick a good deal into a list-item, but I forgot that you could style them independently also. Thanks! And lovely site! This one’s a keeper :)

Wolf
Jul 30, 2007 at 1:16 pm

Agree completely with Biscuitrat

Mohammed
Jul 30, 2007 at 4:12 pm

Sir, very useful indeed, i liked to use the ’em’ unit insted of the pixel/point, but not so sure how do you measure font size using the ’em’ ?
one more thing, would u write a tutorial about the new DIV/CSS trend, using DIVs instead of Tables ?
And what do you recommend to read about CSS ?
Thanks Alot.

God blesses

Justin
Jul 31, 2007 at 4:36 pm

Wouldn’t it be easier to just style the <li> tags instead of adding <p> tags inside the list items? Just a though… haven’t tried this, though, great idea!

Luis
Aug 1, 2007 at 11:37 am

Justin, i tested it here (ff), and unfortunately if you use
ol li {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
it will overwrite the “ol” style.

Justin
Aug 1, 2007 at 6:34 pm

Ah, dang! Well, ’twas worth a shot, eh?

Jermayn Parker
Aug 2, 2007 at 12:36 am

aaahhhhh very good indeed.

Some people will argue about the p being in there but it makes sense to style the actual listing and not font.

@Mohammed – CSS reading I would recommend notepad. If you are after div styling tuts it should not be too hard to do so because it is now the ‘common’ way of coding for websites.

yakuter
Aug 2, 2007 at 4:10 am

Thanks for this great post. However there should be more about ul, ul li ul.classname, ul li a:hover etc ;)

@Mohammed here you should find a chart that shows the ration of px,em and points. My way is to make em equal to pixel in body section of css
body {
font-size:%75;
}
Then 1px=1em ;)

Aleksey
Aug 2, 2007 at 4:37 am

Problem with transparent the close button ( X )

MarkB
Aug 2, 2007 at 5:42 am

Wikkid… only thing with this is that it’d be extra work to get the p tag into the li tag when working with a CMS – especially if the site will ultimately be controlled by a client who probably couldn’t be bothered.

I’d suggest just bolding the li and then instead of

ol p

style it with

ol bold

That will make it a bit more ‘CMS friendly’ :)

Heri
Aug 2, 2007 at 4:51 pm

MarkB, an excellent point, but sadly that just proves what I’ve said for years. A CMS should be for content database management, hence Content Management System. A CMS should have nothing to do with how the content is displayed. How content is displayed should be handled by a separate CDS, or Content Display System (a term I kinda made up myself).

I’ve written my own universal CMS that I use for most of my clients, and I write a separate CDS for each client’s website. It’s a quick and speedy process to code a CDS when you’re already familiar with the database structure of the CMS. This way content is truly separated from the design. I don’t feel hindered in the least as to how I design and code my websites, because I never have to put up with the templating garbage that you have to deal with on most content management systems. It also works better for my clients; since my CMS has a client and webmaster mode, my clients don’t get overwhelmed by a bloated WYSIWYG editor and the bloated settings and modules that most systems today, have.

But not everyone is familiar with server-side programming (PHP, ASP, SQL, etc.), hence they couldn’t code their own CDS even if they wanted to; so I guess I’m probably a little over-opinionated in this matter. So don’t take what I just said too seriously.

Mohammed
Aug 7, 2007 at 6:02 pm

Thanks Guys for your replies.
Yes, liked the CSS although i used to use tables and still can do things fixed and nice with Tables, but with CSS still hard to align-middle, center objects, wrap columns !, i know there are alot of workaround and hacks, but still not 100% portable i guess. but am trying.

@Heri ? are you a designer or programmer?, for your CDS, how do you split the formatting out of the CMS db ? or it is just a way of displaying the layout ? providing options of different templates or ready customized profiles of displaying the contents.
it is still a nice idea indeed.

Good luck.
God Blesses.

Jenny
Aug 19, 2007 at 10:50 pm

Oh I’ve been looking for something like this. Thanks.

Jason
Aug 24, 2007 at 4:13 pm

This is a fun tip. Thanks. I’ll be using this soon.

Lewis
Aug 25, 2007 at 4:54 am

Great tutorial, Thanks!

المصمم توقيع
Aug 26, 2007 at 9:01 am

Nice tip :)
but it is not semantically correct; if anyone cares.

fontaine
Aug 26, 2007 at 11:49 pm

I don’t know you can read chinese or not .( My English is poor) Your site is so beautiful and the article is also nice for me ! (hope my word no mistakes)

Diego
Aug 30, 2007 at 4:14 pm

I’d like to know if it’s possible to display 1) instead of 1. in ordered lists. Thanks.

Eirik
Sep 9, 2007 at 12:11 pm

I’m a bit curious about your CDS, a term I have never heard before. I do like the idea though, and like MarkB points out, a p within a li is not what I expect any other than someone working with web would get. It is hard enough to make systems that makes publishing easy for customers.

A way to go would perhaps be to render a
*list thing
* and another

as a li with a p inn it when it is outputted to the screen (well, actually: swap the star with li p before insert to the db) . But: if you have some CDS that makes it possible to keep markup out of the database, that would be great. I’m not asking you to shear your code, but how to go about starting a project like that would be nice.

I searched your page for CDS, and a lite google search, but nothing that strikes me as the answer.

Web Design Blog
Sep 29, 2007 at 4:04 am

I’ve come across a better way (although not well supported)…but it does require less markup.

li:first-child { color: green; }
li { color: blue; }

this is *supposed* to color just the numbers green.

Anonymous
Oct 6, 2007 at 1:45 am

This is a tip? I fail to see what is so profound about this tip. Its just simple CSS that anybody can do. So you can italicize the numbers and change the font to something else for the text. What was so worthy about writing this as an article?

Anastasia
Oct 6, 2007 at 4:35 pm

@Anonymous: I actually found this tip quite useful. I wouldn’t have known how to do this otherwise, and I’ve been wantingto learn how to give list numbers and text different styles ever since I saw the cool effects on Jon Hick’s website.

I like this website by the way, it’s very useful, although I’m not a big fan of the layout. Especially the font! *kills arial*.

Gab
Oct 6, 2007 at 10:22 pm

Why not use ‘span’ to style the list items differently? This would be a bit more semantically correct, would it not?

Carly
Oct 15, 2007 at 1:20 pm

This is great, but I’d love a tutorial on fun ways to style ul lists, like horizontal navigation. I’ve been looking online for days for different ways…!

Alexandra
Oct 26, 2007 at 2:20 pm

Very simple and useful tip. I always wanted to style my numbers but never knew how. This is a great approach!

Milan
Nov 23, 2007 at 12:31 pm

Hi thanks a lot for this small and fine tutorial!!

Madhavan M
Jan 1, 2008 at 12:36 am

HI Buddy! Thanks a lot for your useful tips. It’s very easy and simple to understand. Good job, thanks again.

Fabian
Jan 2, 2008 at 8:48 am

I tried to add this on my wordpress blog but wordpress removes the tag.
So I tried to apply the “normal” style onto the element but that doesn’t work.
Any ideas??

Joomlabased
Jan 4, 2008 at 4:24 pm

Good turorial. Thank you

sunrise
Feb 20, 2008 at 11:50 pm

very useful and simple tip!

Foseptik Temizleme
Mar 5, 2008 at 4:29 am

very useful tips thanks

kane
Mar 19, 2008 at 8:00 am

This is quite good thought :)

computer jobs
Mar 19, 2008 at 8:01 am

Thanks. very useful information, all the time i was look for it ;)

vincent
Apr 12, 2008 at 1:15 am

good idea, thx

my name
Apr 23, 2008 at 6:02 pm

hi alert(“hey look, injection attack in your face”);

Jakub Chodorowicz
May 3, 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’)

Jayme
May 20, 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?

Steven
May 28, 2008 at 6:09 am

Very useful tutorial thanks.

CSS 2.0
Jun 13, 2008 at 12:01 pm

Great tutorials on this site!
CSS 2.0 is very powerful to customize your html elements.

Blog Sites
Jun 28, 2008 at 9:46 am

Nice article for designers, I will use this trick in my next blog site.

Robin
Aug 4, 2008 at 3:07 pm

Nice tip…so simple yet looks great!

scott
Aug 7, 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

Web design company
Oct 6, 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!

dfs design www
Oct 23, 2008 at 12:12 pm

nice and easy

Annanimous :-P
Oct 27, 2008 at 10:19 am

Good one actually :)

Annanimous :-P
Oct 27, 2008 at 10:20 am

This is a nice article.. Great !

Annanimous :-P
Oct 27, 2008 at 10:20 am

http://www.pixobel.com

Pieter
Nov 22, 2008 at 5:26 pm

Thank you for this one!
I used it on my site.

-visible multimedia

ntas
Nov 26, 2008 at 5:55 pm

Nice !

Met-art
Dec 20, 2008 at 1:31 pm

Nice article for designers

sanat
Jan 22, 2009 at 11:27 am

thanks

Michael Wilson
Feb 2, 2009 at 5:30 pm

Stupid easy – and such a brilliantly beautiful way of presenting lists.

Ray Acosta
Feb 11, 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

andy
Feb 12, 2009 at 11:14 pm

Anyway to make the text wrap under the number using the ol?

Peter
Mar 2, 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.

Xtence
Mar 11, 2009 at 9:50 am

Very nice, i like typography, didnt think ’bout this one, thanks !

rightie
Apr 21, 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?

Scott Foley
May 13, 2009 at 3:12 pm

Amazingly simple yet beautiful results. Nice one.

flashfs
May 25, 2009 at 9:25 am

Very good tutorial for beginners. Thanks.

Quyen
Aug 13, 2009 at 9:44 pm

This means I have to manually put the text between the tags every time I make an ordered list. In wordpress 2.8 however, the tags are removed after a switch between Visual and HTML type mode. Then all my work is gone.

Is there any function or php loop I can use to stop this? Or better yet, insert tags automatically.

zhuzhiyan
Aug 24, 2009 at 3:15 am

i use the old html first ,now i use css/html ,very useful

Ed
Aug 24, 2009 at 4:30 am

Thanks for the inspiration!

Bill
Sep 4, 2009 at 10:06 pm

Anyway to make the text wrap under the number using the ol?

bagsin
Sep 10, 2009 at 7:18 pm

nice skill. strong css

Cyrus
Sep 21, 2009 at 12:29 pm

Great , Style Your Ordered List
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

prabhu
Oct 19, 2009 at 1:59 am

Very Nice.. very Simple… Thanks….

Mike
Oct 31, 2009 at 4:16 am

Simple and easy for beginner like me.

Webchester
Nov 22, 2009 at 5:00 pm

Very nice lesson :) Thanks.

yennaiv
Dec 6, 2009 at 5:48 am

tnx. :) love it!

yennaiv
Dec 6, 2009 at 5:49 am

i like ur BG too.

vincent
Jan 5, 2010 at 11:23 pm

The designs showed here show what simple and tasteful design is all about. Another one to consider

Bob Marley
Feb 18, 2010 at 12:37 pm

Or just use a span instead of a p. Its more semantic and it works in Firefox…

Shelt
Mar 31, 2010 at 10:48 am

Bob, what planet are you on? how is a span more semantic than a P lol

Luke Stanley
Apr 13, 2010 at 6:58 pm

Shelt, Bob is right, because P is a paragraph. Span doesn’t imply that it’s a paragraph.

Laura
May 16, 2010 at 3:17 pm

Love IT!

Devin Walker
Jun 30, 2010 at 1:37 pm

Very useful trick there! Similar to using spans for the same purpose of styling

khay
Jul 16, 2010 at 1:39 pm

thank you so much for sharing. nice post. i like it :p

youtube
Sep 16, 2010 at 5:22 am

so with this i can also make it colored or different size but to change the single line color ill do the same but with each right ?

replica sunglasses
Nov 13, 2010 at 5:05 am

The designs showed here show what simple and tasteful design is all about

tütüne son
Nov 24, 2010 at 4:48 am

The designs showed here show what simple and tasteful design is all about. Another one to consider

Henry Peise
Dec 24, 2010 at 1:33 am

I just heard the gossip that since there’s some technic problems on white iphone 4, iphone 4b is going to release. It that true?

Juno Mindoes
Dec 24, 2010 at 11:08 pm

Want to buy the hotest white iphone 4 Conversion Kit? http://www.whiteiphone4.com will be your best online store. Don’t hesitate to buy the charming iphone 4 Conversion Kit!

supratall
Dec 27, 2010 at 3:53 pm

I just heard the gossip that since there’s some technic problems on white iphone 4, iphone 4b is going to release. It that true?

Uçak Bileti
Jan 11, 2011 at 4:55 pm

takimi almasak ne olurdu

Uçak Bileti
Jan 12, 2011 at 5:30 am

tanrim kaderimi baştan yaz

Colin Oakes
Jan 18, 2011 at 9:17 pm

Thanks for the tip. Just came in really handy.

altın çilek
Feb 2, 2011 at 6:14 am

That’s Great! Thanks for the post!

hcg damla
Feb 2, 2011 at 1:54 pm

The designs showed here show what simple and tasteful design is all about

Bay Area Webdesigner
Feb 16, 2011 at 6:22 pm

Thank you for this quick tutorial. Very helpful in a pinch!

kilo aldirici
Feb 17, 2011 at 5:55 pm

ignore weight

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:56 pm

It works perfectly!!!:) Thanks.

http://www.howtogettallersecrets.com
Mar 17, 2011 at 5:56 pm

I am really happy I discovered your website. This is quite an interesting read.

dexx
Apr 17, 2011 at 1:48 pm

Excessive fear, anger, and work under stress last pregnancy, infants can lead to excessive hassaslığa. Intense emotions, going through the mother’s blood circulatory system and brain functions that affect the baby in some leads to the release of chemical

Fernando Jorge
Apr 19, 2011 at 4:30 pm

Hey there… I love these examples, this tutorial is excellent.

I have a question that I haven’t seen anywhere yet (maybe I haven’t searched enough). Does anyone knows how to make an ordered list like:
Point 1 – something
Point 2 – another something
Point 3 – yet another

What I meant was to have something written before the number (in this example “Point “).
Is this possible to be made?

Many thanks to all! :)

Valery
Apr 27, 2011 at 8:45 am

hey Fernando,

Yes, it’s possible.

Please try it :

ol li:before{
content:’Point ‘;
position:absolute;
left:-20px;
}

bye

Malaysia Online Radio
Apr 28, 2011 at 8:44 am

This is pretty cool although it’s simple !

shaggy
May 19, 2011 at 3:32 pm

@Fernando

Use

shaggy
May 19, 2011 at 3:47 pm

@Fernando

Use Definition List
http://www.w3.org/MarkUp/html3/deflists.html

New-york-Suboxone-Physicians
Jul 16, 2011 at 2:55 pm

Another interesting post. Thank you for the information, It is good to see such quality posts. I am subscribing to your blog. Keep them coming.

complex 41
Aug 23, 2011 at 9:25 am

hello thank you for this great post 23

δονητές
Sep 12, 2011 at 3:14 am

Thank you for another magnificent article. Where else could anyone get that type of information in such an ideal way of writing? I’ve a presentation next week, and I’m on the look for such information.

How to Save My Marriage from Divorce
Sep 29, 2011 at 1:54 pm

Really it was very helpful information!

How to Save My Marriage from Divorce
Sep 29, 2011 at 1:55 pm

Really it was very helpful information! I was looking for this for a long.

digitalpbk
Oct 4, 2011 at 1:19 am

Awesome .. now i can have some fancy numbers..

Edward Sotelo (@EdwardSotelo)
Oct 14, 2011 at 1:09 pm

Hmm, I wish you could style the list style. Or can you?

.
Oct 26, 2011 at 7:00 am

.

Webdesign Links
Nov 10, 2011 at 12:36 am

Cool, exactly what i was looking for!

Eyewebmaster
Nov 29, 2011 at 6:52 pm

Very informative post. Most of the simple task to do sometimes need your help.

Thank you!

Alex
Dec 6, 2011 at 8:54 am

I wonder if there’s a way of doing this without the extra ‘p’ markup. Or if you can somehow just traget the number in the ol as a seperate item to the rest of the list.

Thomas | Website Design Durban
Dec 19, 2011 at 12:01 pm

Simple, yet very effective.

Bags Men
Jan 10, 2012 at 2:18 pm

Great web site! I genuinely love how it truly is simple on my eyes and the data are nicely written. I am wondering how I may well be notified whenever a new post has been made. I’ve subscribed to your RSS which should do the trick! Have a terrific day!

Veeps
Jan 11, 2012 at 1:41 pm

I’ve wound up using your styling expertise a number of times and decided to finally say thanks. THANKS!

allsaints
Jan 16, 2012 at 6:26 pm

You really make it appear so easy along with your presentation but I to find this topic to be actually one thing that I believe I’d by no means understand. It sort of feels too complex and very vast for me. I am having a look ahead for your next publish, I will attempt to get the cling of it!

ram
Jan 17, 2012 at 5:53 am

Iam using this list styles on my website – is there a way to design the list numbers with images?

Sam
Jan 17, 2012 at 12:02 pm

Not my code but hope it helps you RAM.
ul {
list-style-type: none;
padding: 0px;
margin: 0px;}

li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px; }
You can also use an image to style the list with:
ul
{
list-style-image: url(‘sqpurple.gif’);
}
but it’s not cross browser compatible.

Jean
Feb 10, 2012 at 5:19 pm

YOU ARE A GOD!!!! This is the only place I found info on this that actually worked. Even the wordpress codex was useless. THANK YOU!!!!!

Online Survey Software
Apr 5, 2012 at 10:44 am

Thanks for the free tips!

Web designer
May 2, 2012 at 3:53 am

Really nice!Thanks!

magazin
May 2, 2012 at 11:18 am

You really make it appear so easy along with your presentation but I to find this topic to be actually one thing that I believe I’d by no means understand. It sort of feels too complex and very vast for me. I am having a look ahead for your next publish, I will attempt to get the cling of it!

resimler
May 2, 2012 at 11:27 am

definitely, a BIG BIG deals.thx, for article

cctv
May 31, 2012 at 10:21 pm

nice article

gifeasy
Jul 30, 2012 at 11:47 am

Very good thanks!!

Ibiza
Aug 1, 2012 at 3:57 am

I genuinely love how it truly is simple on my eyes and the data are nicely written. I am wondering how I may well be notified whenever a new post has been made. I’ve subscribed to your RSS which should do the trick! Have a terrific day!

lakshmi
Sep 20, 2012 at 2:27 pm

good idea! thanks.

Adrian
Oct 11, 2012 at 4:22 am

Here is a great deal I came to know in terms of discount for SoGoSurvey Yearly Enterprise Account. Goto the home page of SoGoSurvey after you’ve login to your Free Account. Click on Upgrade and select the Enterprise Package. If on the payment page you enter SOGOEN in the Promo Code section and you will see that they offer you a $499 deal instead of $590. I purchased one. Try the code, maybe you get lucky too.

Viron Media
Dec 5, 2012 at 11:54 am

This is a great idea. So simple yet very effective.

oto cam
Nov 24, 2016 at 6:36 pm

Very good thanks!!

maket pasta
Dec 20, 2016 at 4:11 pm

thank you good job!!!

sineklik
Dec 21, 2016 at 3:52 pm

thank you good post..

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.