Tutorial: How To Style HTML Lists With CSS

CSS adds that stylistic touch to your HTML code, which means that even boring elements such as lists can look amazing on your website. When styling HTML lists with CSS, we have a lot of options. We'll cover the following methods so that you can browse through each one and go with whatever method you prefer:

  • Standard list settings
  • Custom list settings
    • Bullets
    • Positioning
    • Images
  • Advanced list settings (including links)
    • Vertical menus
    • Horizontal menus

For this example, we will be working with two separate files: the HTML document and the CSS document. You can view the files in the JSFiddle below:

Standard list settings

In HTML there are two kinds of lists: ordered lists and unordered lists. The only real difference between the two is the default bullet symbols used. Here is the basic structure of an unordered list:

	
    <ul>
<li>Mercedes</li>
<li>BMW</li>

<li>Volkswagen</li>
<li>Lexus</li>

</ul>

Custom list settings

If you want to customize the look and feel of your lists, but keep the basic "list" idea, then you have two CSS options available for styling.

Bullets

There are a lot of different options for the style of bullets, but there are about 6 or 7 standard styles compatible across all browsers. Simply start the list with the <ul>tag.

  • disc (default)
  • lower-alpha
  • upper-roman
  • circle
  • decimal

You can also use numbered bullet lists with the <ol>tag.

  1. decimal (default)
  2. decimal-leading-zero
  3. cjk-ideographic

To use any of these different styles, here's how the code would read in your CSS stylesheet. Give each a shot to see how they affect your bullet styles.

ul {list-style-type:decimal-leading-zero;}

Images

ul{list-style-image: url('imagename.jpg');}

Advanced List Settings (including links)

Now we get to the fun stuff! The real power of styling HTML lists is when we don't make them look like HTML lists. We can retain all of their list functionality (nesting, etc.) while being able to make them look however we want. We're going to look specifically at styling list items that have links in each item (like a navigation menu). When we create navigation menus, we have the choice of creating horizontal or vertical menus. So let's do both.

Vertical Menus

To use these next two examples, be sure your list is setup like this: 

<ul>
	<li><a href="#">Mercedes</a></li>
	<li><a href="#">BMW</a></li>
	<li><a href="#">Volkswagen</a></li>
	<li><a href="#">Lexus</a></li>
</ul>

This is how this standard, vertical list would look in HTML:

You'll note that within each list item we've put a hyperlink. Our CSS stylesheet is going to get a little more complex here but still quite manageable. Comments are included below:

ul {
	padding:0px; /* take away the default 20px of padding to the left of every menu */
	list-style:none; /* take away bullets entirely */
	width:200px; /* set a specific width (optional) */
}

Once we style the main ultag, we need to style each list item so it looks a bit more attractive. Here's the code for that:

ul li a {
	display:block; /* make each link a block-level element, meaning they stay the same width */
	padding:10px; /* add a little padding to give the user a little room to click */
	border-bottom:1px solid #ccc; /* separate each list item a bit */
	"button"-like, we'll take away the underline */
	color:#ccc; /* just a preference to change the color of the link (from the default blue) */
}

Your list should be looking pretty good now. But let's add a little hover effect so that when the user hovers over each menu item our text changes color. Add the following CSS style to your stylesheet:

ul li a:hover {
	color:#333;
}

Horizontal Menus

The only difference between horizontal menus and vertical menus is that we need to now "float" each menu item so they appear next to each other. Because we're floating each list item, we also need to float the parent ultag and set its width (100% in this case). We're also going to spice things up a bit and add a background image to each floated list item. We will set the background image to 'icon.jpg' and put it to the left of the text. In order to make sure the text isn't over the image, we're also going to add a little bit of left padding to the list item. Check out the code below (should look similar to the vertical menus we just setup):

ul {
	padding:0px;
	list-style:none;
	float:left; /* we float the ul because its children are floated, so it will wrap correctly */
	width:100%; /* if an item is floated it needs a width */
}
ul li a {
	display:block;
	padding:10px;
	text-decoration:none;
	color:#ccc;
	float:left; /* this puts each menu item next to the one before */
	width:100px; /* again, when something is floated, it needs a width...see what works for you */
	background: #fff url('icon.jpg') no-repeat left center; /* set background image */
	padding-left:50px; /* add left padding so text doesn't go over the icon */
}
ul li a:hover {
	color:#333;
}

So there you have it! The hardest part of horizontal menus is the floating. Once you get that down, you have all the skills you need to create beautiful lists and menus with just basic HTML and CSS.

Tip: Add a background color to your ul while you are coding to make sure it is wrapping correctly around its floated children.

Tags

Help us spread the word.

Your Comments Are Valuable - Join The Discussion!

 

Copyright 2011 Virtuosi Media Inc.