Tutorials

Sexy Ordered Lists with CSS

Tags: Beginner

Recently I was working on a site where I had to style an ordered list and thought this may help some of you in future projects. The snag that some people tend to run into is that they are not sure how to separate the styles of the numbers and the actual content of the list.

It may feel easier to number each list item manually but then we end up defeating the purpose. In this tutorial I will show how to give an ordinary ordered list a face lift.

HTML

We will first create an ordered list and add two elements, the heading and a paragraph.

<ol class="steps">
	<li>
		<h2>heading</h2>
		<p>paragraph</p>
	</li>
	<li>
		<h2>heading</h2>
		<p>paragraph</p>
	</li>
</ol>

CSS

Start by styling the ordered list itself. Note that we will specify a font style to the list item first (this will be the styles for the numbers).

ol.steps {
	margin: 20px 0;
	background: url(ul_bg_repeat.gif) repeat-y; /*--Bg of the order numbers--*/
	padding: 0 0 0 35px; /*--Distance between the order numbers--*/
	border: 1px solid #111;
}
ol.steps li {
	margin: 0;
	padding: 15px 15px;
	color: #cbff78;
	font-size: 1.7em;
	font-weight: bold;
       /*--The bevel look is styled with various colors in the border properties below--*/
	border-top: 1px solid #000;
	border-bottom: 1px solid #353535;
	border-right: 1px solid #333;
	border-left: 1px solid #151515;
	background: #222;
}

When using border colors to create the bevel look, you will notice we will have an extra pixel at the top and bottom of your list.

You can fix this in two ways. First create a class for the top and bottom list items.

ol.steps li.first { border-top: 1px solid #353535; }
ol.steps li.last { border-bottom: none; }

Method 1 – Manual
Specify the above classes for the first and last list item manually in the HTML

<li class="first"><!--Content--></li>
<li><!--Content--></li>
<li class="last"><!--Content--></li>

Method 2 – jQuery
Use jQuery to add the classes on the first and last list item.

<script type="text/javascript">
	$(document).ready(function() {
		$("ol.steps li:first").addClass("first");
		$("ol.steps li:last").addClass("last");
	});
</script>

Now that we are done styling the list item, we will override the base font style with the heading and paragraph tags.

ol.steps li h2 {
	font-size: 0.9em;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px dashed #333;
	color: #fff;
}
ol.steps li p {
	color: #ccc;
	font-size: 0.7em;
	font-weight: normal;
	line-height: 1.6em;
}

Conclusion

As you can see, ordered lists don’t have to be boring. If you have any other techniques to style ordered lists, please let me know!

Related Resources

• Better Ordered Lists (Using Simple PHP and CSS)
• CSS Design: Taming Lists
• CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices