How to Style an Unordered List with CSS

By

Introduction

With this article I will show you how to style an unordered navigation list using CSS, then take it a step further and show you how to add a pop-up information box for each link item so that your visitors will get an indication of the content for the page link.

We begin with an unstyled unordered list (old masters again):

• Paul Cézanne
• Henri Matisse
• William Turner
• John Constable
• Claude Monet

Part one of this tutorial will show how, using just CSS, we can produce a list like Example List One

Part two will add a pop-up information box to produce a styled lists like Example List Two. The third part of this tutorial will show you how (with just a small change of style), we can have the pop-up information box looking like Example List Three.

Methods

Part One

The !DOCTYPE

Firstly and most importantly, make sure that you have the correct (X)HTML !DOCTYPE. Without this most browsers will be thrown into 'quirks' mode which will lead to all sorts of incompatibility problems. The W3C QA - List of valid DTDs has a list of valid DOCTYPES that can be used. Select from XHTML1.0 or XHTML1.1 as these are more suitable for this styling. I use XHTML1.1 for all my current Web pages.

The (X)HTML for the basic unordered list is as below. This is a simple unordered list with no frills. The links would normally take you to another page giving information about each painter but I have used #nogo which will have no effect on this page.

<ul> <li><a href="#nogo">Paul Cézanne</a></li> <li><a href="#nogo">Henri Matisse</a></li> <li><a href="#nogo">William Turner</a></li> <li><a href="#nogo">John Constable</a></li> <li><a href="#nogo">Claude Monet</a></li> </ul>

The only change necessary to the above (X)HTML is to add a unique id to the <ul> tag. This is done so that we can target the list with our CSS.

So the (X)HTML list becomes:

<ul id="menu"> <li><a href="#nogo">Paul Cézanne</a></li> <li><a href="#nogo">Henri Matisse</a></li> <li><a href="#nogo">William Turner</a></li> <li><a href="#nogo">John Constable</a></li> <li><a href="#nogo">Claude Monet</a></li> </ul>

Styling Part One

Step 1: Removing the Bullets

The first step is to style the unordered list to remove the bullets and the indentation.

Browsers have different ways of doing this; Internet Explorer and Opera use margin values for the indentation whereas Mozilla/Netscape/Firefox all use padding values, so to cater to this we need to style the list as follows:

#menu { padding:0; margin:0; } #menu li { list-style-type:none; }

• padding:0; - removes all padding from the unordered list
• margin:0; - removes all margins from the unordered list
• list-style-type:none; - removes the bullets

‡ Part One/Step 1

In the above example I have added a light grey background to the body and a white background to the unordered list so that you can see exactly what effect this styling has on the list.

The bullets are gone and the list is now left aligned with no indentation. The unordered list stretches the full width of the screen (the white background of the <ul> tag is 100% by default).

Step 2: Styling the Link Width

The next step is to style the <a> and the <a:visited> tags which will be identical and can be grouped together.

Firstly, we will give the links a width just wide enough to hold the text in one line. In this case I have chosen to use em values for all sizes so that the menu will stay in shape when larger or smaller text sizes are chosen. It is also possible to use pixel or percentage values.

We can also add a border to each link just to show the size chosen:

#menu a, #menu a:visited { display:block; width:9em; border:1px solid #808; }

• display:block; - this will ensure that the link will be as wide as we specify. The height will be automatically set by the font size.
• width:9em; - sets the width of the links.
• border:1px solid #808; - adds a 1 pixel wide solid purple border.

‡ Part One/Step 2

The list items now have a fixed width and are enclosed in purple boxes. The unordered list is still the full width of the screen.

Step 3: Styling the Link Font

We can now style the font used for the links:

#menu a, #menu a:visited { display:block; width:9em; border:1px solid #808; font-family:arial, verdana, sans-serif; /* ADDED */ font-size:0.8em; /* ADDED */ text-align:center; /* ADDED */ text-decoration:none; /* ADDED */ }

• font-family:arial, verdana, sans-serif; - we select arial as our first choice, followed by verdana. Lastly, we set the generic font to 'sans-serif'. A generic font should always be included as the last font in the list.
• font-size:0.8em; - sets the font size slightly smaller than the default for the page. Using an em value allows your visitors to decide how big the font should be. You could choose pixel or point values.
• text-align:center; - centers the text within the link box.
• text-decoration:none; - removes the underline from the links.

‡ Part One/Step 3

Our text is now centered within the link box and we have lost the underline.