Styling Lists with CSS

Lists are extremely important whether you are designing for print, or the web. On the web, lists are one of the fundamental elements that make your website's information organized. For the most part, lists of links are used for navigation. In this tutorial though, we will simply talk about how to style lists themselves.

Styling Lists

If you take a normal list, created in html, you can style the list in several different ways using CSS. You can decide on the different shapes available as the bullet points for each list item. The different choices are disc, circle, square, decimal, lower-roman, upper-roman, lower alpha, upper-alpha and none. Here are a couple of examples, and their CSS:

The HTML

<ul id="menu">
<li>Love
</li>
<li>Hate
</li>
<li>Work
</li>
<li>Play
</li>
</ul>

Square

#menu li {
	list-style-type: square;	
}

Upper-Roman

#menu li {
	list-style-type: upper-roman;	
}

Multi-Level Lists

Using these properties will allow you to create multi-level lists that really organize and break down your key points on your websites. For example, you can use one style for a top-level list, and for each subcategory that you have, you can use a different list style. Here is a realistic example:

The HTML:

<ul>
<li>Love
	<ul id="menu">
    <li>Happiness</li>
    <li>Emotions</li>
    </ul>
</li>
<li>Hate
	<ul>
    <li>Fear</li>
    <li>Shame</li>
    </ul>
</li>
<li>Work
	<ul>
    <li>Jobs</li>
    <li>Careers</li>
    </ul>
</li>
<li>Play
	<ul>
    <li>Retirement</li>
    <li>Recreation</li>
    </ul>
</li>
</ul>

The HTML is structured so that each list item has two subcategories. You do this by adding another unordered list inside of each top-level list item tag. You can do this multiple times to break down lists into multiple subcategories, with a different style for each level.

The CSS:

#menu li {
	list-style-type: square;	
}
#menu li li{
	list-style-type: upper-roman;
}

The Result: