How to Create Beautiful and Elegant HTML Lists Using CSS

Posted on February 24th • Under: Design Suggetions

HTML list have become one of the most used HTML elements for marking-up various semantic content structures — navigation, comments and even image galleries.

This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents.

Before we start, it is necessary to understand the importance of using specific HTML tags <ul> and <ol>, instead of simple numbering (like 1., 2. or •, ») for building lists. By applying content a semantic structure, we emphasize the relationships between different content elements. In case of lists we are able to imply that there is a certain relationship between all of the list members, which is possibly described by the paragraph introducing the list. It also helps screen reader users for whom the total number of items is announced before the rest of the list.

Default list rendering in standards aware browsers and Internet Explorer

Let’s look at the default rendering of ordered <ol> and unordered <ul> lists by Web standards aware browsers (with Gecko, Webkit or Opera rendering engine) and Internet Explorer (IE).

It turns out that IE applies default left side margin to the list container (<ul> and <ol>) while standards aware browsers apply left side padding. These differences in list rendering force us to set both padding and margin of <ul> to 0 and continue to work only with styling <li> tag.

Another thing we notice is that list bullets or numbering becomes invisible in IE with the left side margin set to 0.

Getting the list rendering consistent among all browsers

To solve the invisible bullet problem described above, its a good idea to use relative positioning of list containers <ul> and <ol>. By doing so, we will be able to create much more advanced list style later without repeating most of the CSS.

ul, ol { 
margin:auto -3em 1em 0; 
padding:0; 
position:relative; 
left:-3em;
overflow:hidden;
}
 
li { 
margin-top:0.25em;
margin-bottom:0.25em; 
}
 
ul ul, ul ol, 
ol ol, ol ul { 
margin-left:1em; 
padding-left:0; 
}
 
ul li, ol li { 
margin-left:5em; 
}
 
li li { 
margin-left:1em; 
}

<!--[if lte IE 6]><style>
ul, ol { 
    height:0; 
    overflow:visible;
}
</style>< ![endif]-->
 
<!--[if gt IE 6]><style>
    ul, ol { height:1%; }
</style>< ![endif]-->

Flat lists for more content per list item

Sometimes you have multiple lines of content per list item and then it might be reasonable to align the lists with the rest of the content in order to sustain the vertical flow of it.

CSS for flat lists

.flat li { 
margin-left:3em; 
}
 
.flat li ul, .flat li ol { 
margin-left:1em; 
padding-left:0; 
}
 
.flat li li { 
margin-left:0; 
}

Notice the little amount of CSS, but more importantly that it is rendered equally among all of the browsers and we can still use the default bullet styles instead of images.

However, sometimes one might want to use custom style list bullets. This can be done using the list-style-image property in CSS.

Lists with custom style bullets

Note: don’t forget to remove the line break after list-style-image: to get it working.

CSS:

ul.bullet-a li { 
list-style-image: 
url('bullet-image-a.png');  
}
 
ul.bullet-b li { 
list-style-image: 
url('bullet-image-b.png'); 
}

Although the alignment of the list image is not pixel perfect among all of the browsers, it is more than satisfactory if the height of the bullet image doesn’t exceed 10 pixels. One might suggest to use background of <li> tag as a list bullet image, but this would brake the ability to combine multiple CSS identifiers per list, like <ul class="flat bullet-a"> because of inherited margin settings.

All the small details

Notice that the spacing between list items in the last example (rounded image bullets) is larger than the default one (arrow image bullets). This enhances readability and separates list items similarly to paragraphs. So here is the final set of CSS styles to suite most of the needs:

.spaced { 
margin-bottom:0;
}
 
.spaced ul, .spaced ol { 
margin-top:1em;
}
 
.spaced li { 
margin-bottom:1em;
}

.indent li { 
padding-left:1em; 
text-indent:-1em; 
}
 
.inside li { 
list-style-position:inside; 
}
 
.clear li { 
list-style-type:none; 
}

You can see that one of the previous examples already utilizes the “spaced” styling, while “indent”, “inside” and “clear” might benefit from a few examples:

All of CSS combined & list style cheat-sheet

• View all of the list style examples in your browser.
• View the resulting CSS as a seperate file (bullet images: )
• Download a list style CSS classname cheat-sheet (.pdf) which you can print and use as a reference when composing your articles, blog posts or other HTML documents.

Screenshot showing the use of various HTML list styles

Internet Explorer specific HTML and CSS

<!--[if lte IE 6]>
    <style>ul, ol { height:0; overflow:visible; }</style>
< ![endif]-->
<!--[if gt IE 6]>
    <style>ul, ol { height:1%; }</style>
< ![endif]-->

Few suggestions:

• Bullet image height preferably should not exceed 10 pixels. Lower image height makes them look better in Internet Explorer. If you want bullet images to be transparent, save them as transparent GIF or 8-bit PNG files.
• You might find it useful to apply this styling only to your post content, which can be easily done by prepeding the identifier of your post wrapper (like .post or .article) to all of the list styles. The end result would be something like .post ul, .post ol {}.