8 different ways to beautifully style your HTML lists with CSS

Placed in: Home

8 different ways to beautifully style your lists

The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we're going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We'll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality).

As a reminder, here's how a default ordered list and a unordered list look like:

Ordered list item #1
Ordered list item #2
Ordered list item #3

Unordered list item #1
Unordered list item #2
Unordered list item #3

And check out the demo to see what we're going to create with it.

Looks much better, doesn't it? And you get all that, just by adding a couple of sweet CSS stuff. Want to know how? Here we go!

List #1 : Simple navigation

The most common use currently for using a list on your web page, is because for navigation. In this HTML/CSS example, the code is shown that creates a simple, minimalistic yet beautiful navigation structure.

HTML

 
<div id="list1">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>

CSS

 
/* LIST #1 */
#list1 { }
#list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; }
#list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; }
#list1 ul li a { text-decoration:none; color:#eee; }
#list1 ul li a:hover { text-decoration:underline; }

List #2 : Different font for numbering

The problem with lists, is that you can't make the looks of the list be different than from the text. The number of the list always must have the same color and font as the text.

But, by adding an extra element in the list-item, you can work around these limitations and create a very slick list. Here's how to do it:

HTML

 
<div id="list2">
   <ol>
      <li><p><em>The Netherlands</em> is a country in ...</p></li>
      <li><p><em>The United States of America</em> is a federal constitutional ...</p></li>
      <li><p><em>The Philippines</em> officially known as the Republic ...</p></li>
      <li><p><em>The United Kingdom</em> of Great Britain and ...</p></li>
   </ol>
</div>

CSS

 
/* LIST #2 */
#list2 { width:320px; }
#list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1;  }
#list2 ol li { }
#list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; }
#list2 ol li p em { display:block; }

List #3 : Image bullets

You can change the bullet style of an unorered list to some other build-in values, but you can also change them into an image. This technique can make your list even prettier. Let's see how this is done.

HTML

 
<div id="list3">
   <ul>
      <li>Java</li>
      <li>.NET</li>
      <li>C++</li>
      <li>PHP</li>
   </ul>
</div>

CSS

 
/* LIST #3 */
#list3 { }
#list3 ul { list-style-image: url("../images/arrow.png"); color:#eee; font-size:18px; }
#list3 ul li { line-height:30px; }

List #4 : iPhone Style List

This list is taken from the the iPhone Contacts App with CSS and jQuery. It shows the Contacts.app style list as you can see them on the iPhone. Just a little bit more eye candy for your web site.

HTML

 
<div id="list4">
   <ul>
      <li><a href="#"><strong>Toronto</strong>2004</a></li>
      <li><a href="#"><strong>Beijing</strong>2008</a></li>
      <li><a href="#"><strong>London</strong>2012</a></li>
      <li><a href="#"><strong>Rio de Janeiro</strong>2016</a></li>
   </ul>
</div>

CSS

 
/* LIST #4 */
#list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; }
#list4 ul { list-style: none; }
#list4 ul li { }
#list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px;
  border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; }
#list4 ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png); background-repeat:repeat-x; }
#list4 ul li a strong { margin-right:10px; }

List #5 : Nested lists

Nested lists (lists inside lists) can be extremely useful and beautiful to style. By combining the third technique (Image bullets), we can create a "expanded list". Of course, with the help of jQuery, you can make this expanding even work (but we'll stick to CSS techniques only).

HTML

 
<div id="list5">
   <ol>
      <li>Google
         <ol>
            <li>Picasa</li>
            <li>Feedburner</li>
            <li>Youtube</li>
         </ol>
      </li>
      <li>Microsoft
         <ol>
            <li>Corel Corporation</li>
            <li>Zignals</li>
            <li>ByteTaxi</li>
         </ol>
      </li>
      <li>Yahoo!
         <ol>
            <li>Xoopit</li>
            <li>BuzzTracker</li>
            <li>MyBlogLog</li>
         </ol>
      </li>
   </ol>
</div>

CSS

 
/* LIST #5 */
#list5 { color:#eee; }
#list5 ol { font-size:18px; }
#list5 ol li { }
#list5 ol li ol { list-style-image: url("../images/nested.png"); padding:5px 0 5px 18px; font-size:15px; }
#list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }

List #6 : Roman numbering + inline multiline

By default, an ordered list uses numbers (1, 2, 3, 4 etc.) as list style type. By changing this value in CSS, you can create other numbering systems, for example the roman numbering style.

Also by default, a list displays it's bullets outside of the elements (you can see this pretty good in example #2 - different font for numbering). To get around this, we'll need to change the list-style-position to make the numbering display inside.

HTML

 
<div id="list6">
   <ol>
      <li>Lorem ipsum dolor sit amet, ...<br />Fusce sit amet ...</li>
      <li>Aenean placerat lectus tristique...<br />Vivamus interdum ...</li>
      <li>Mauris eget sapien arcu, vitae...<br />Phasellus neque risus...</li>
      <li>Phasellus feugiat lacus ...<br />Duis rhoncus ...</li>
   </ol>
</div>

CSS

 
/* LIST #6 */
#list6 { font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; }
#list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px; list-style-position: inside; }
#list6 ol li { }

List #7 : Comma separated inline list

Lists are mostly used to display a number of items under each other, in a totally new element. But what if you wanted an inline list? You can achieve this, by setting the display property to inline. But when you're in text, you can prefer to make it a comma seperated list. How to achieve this? With the :after pseudo code.

HTML

 
<div id="list7">
   <ul>
      <li>First inline item</li>
      <li>Second inline item</li>
      <li>Third inline item</li>
      <li class="last">Fourth inline item</li>
   </ul>
</div>

CSS

 
/* LIST #7 */
#list7 { }
#list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; }
#list7 ul li { display: inline; }
#list7 ul li:after { content: ", "; }
#list7 ul li.last:after { content: ". "; }

List #8 : Rotated navigation

Here's a last small technique that works with CSS3 (Supported by the latest versions of Firefox, Safari and Chrome). When hovering a block element, you'll get a rotated hover state. Might not be that useful, but it can be beautiful to see.

HTML

 
<div id="list8">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>

CSS

 
/* LIST #8 */
#list8 {  }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
  text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
  -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
  transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

Conclusion and Download

There you see, you can create extraordinary things with an ordinary list. And all this with the power of CSS.

I hoped you liked the use of these lists. Did you learn anything new today? And do you use any form of list that isn't placed in this article (breadcrumbs maybe)? Feel free to share.