Easy Ways to Add Style to your HTML Lists

HTML5 has brought a few changes to the HTML list. Though not terribly expansive in scope, By adding CSS3 and JavaScript interactions to the HTML tag changes, the HTML list has been re-purposed – specifically the unordered list – to do a lot more than present a bulleted vertical listing of related items. In today’s article we’ll learn how to style our HTML lists to stand out from the crowd.

The Vanilla HTML List

As you are probably aware, there are two types of HTML lists. The unordered list (enclosed by &ltul> tags) displays list items with bullets. Meanwhile, the ordered list (enclosed by &ltol> tags) demarcates each list item using a number or letter. Without any styling, the browser simply presents each list item with a vertical ordering, using the default page font. Here’s the syntax and output for an unordered list:

<ul>
  <li>Moving Pictures</li>
  <li>Powerslave</li>
  <li>1984</li>
  <li>Master of Puppets</li>
  <li>Countdown to Extinction</li>
</ul>

• Moving Pictures
• Powerslave
• 1984
• Master of Puppets
• Countdown to Extinction

Changing the list to an ordered list now gives each list item a number so that we may present a top five list:

<ol>
  <li>Moving Pictures</li>
  <li>Powerslave</li>
  <li>1984</li>
  <li>Master of Puppets</li>
  <li>Countdown to Extinction</li>
</ol>

1. Moving Pictures
2. Powerslave
3. 1984
4. Master of Puppets
5. Countdown to Extinction

Now let’s introduce some CSS.

Removing the Bullets and Numbers

In newer major browsers (don’t try IE 7) adding the “display: block” style to the list item elements will make the bullets (in an unordered list) or numbers (in an ordered list) disappear:

<style type="text/css">
  li { display: block; }
</style>

• Moving Pictures
• Powerslave
• 1984
• Master of Puppets
• Countdown to Extinction

Displaying List Items Horizontally

Want to display list items horizontally? You aren’t locked into the default vertical layout of lists by any means. Simply set the list items’ CSS display attribute to “inline”:

<style type="text/css">
  li { display: inline; }
</style>

1. Moving Pictures
2. Powerslave
3. 1984
4. Master of Puppets
5. Countdown to Extinction

That has the dual effect of removing the bullets and numbers as well as arranging the list items horizontally. You may find that it places the items too close together for your liking. The spacing between each item may be set using the padding-right css attribute:

<style type="text/css">
  li {
    display: inline;
    padding-right: 20px;
  }
</style>

1. Moving Pictures
2. Powerslave
3. 1984
4. Master of Puppets
5. Countdown to Extinction

If you want to keep the bullets or numbers, you can apply the “float: left” css rule to your <li> tags:

<style type="text/css">
  li { float: left; }
  ul > li { padding-right: 20px; }
  ol > li { padding-right: 30px; }
</style>

• Moving Pictures
• Powerslave
• 1984
• Master of Puppets
• Countdown to Extinction

1. Moving Pictures
2. Powerslave
3. 1984
4. Master of Puppets
5. Countdown to Extinction

The only problem with that is that it removes the list item elements from the document flow. That has two side effects: first, the next element starts immediately after the list items, on the same line (not shown here for readability). Second, the list container no longer has height, unless you specify one explicitly, that is. One way to force the container to expand vertically as I did above is to apply the overflow css property to the UL or OL list tag:

<style type="text/css">
  ul, ol { overflow: auto; }
  li { padding-right: 20px; }
</style>

One final trick that we can apply to horizontal lists is to evenly distribute the list items. That’s accomplished using the css width attribute. Notice what happens when we set it to 15% and apply it to the li tag rule:

<style type="text/css">
  ul, ol { overflow: auto; }
  li {
    float: left;
    padding-right: 20px;
    width: 15%;
  }
</style>

• Moving Pictures
• Powerslave
• 1984
• Master of Puppets
• Countdown to Extinction

1. Moving Pictures
2. Powerslave
3. 1984
4. Master of Puppets
5. Countdown to Extinction

Changing List Item Colors

Each list item may be styled using a variety of CSS attributes,from borders, colors, margins, padding, etc… These can often be enhanced further using a combination of CSS and your own image(s). Let’s start with a pure CSS example that changes the item text color:

<style type="text/css">
  li {
    color: red;
  }
</style>

• Moving Pictures
• Powerslave
• 1984
• Master of Puppets
• Countdown to Extinction

1. Moving Pictures
2. Powerslave
3. 1984
4. Master of Puppets
5. Countdown to Extinction

Each bullet or number gets its color from the text, so if you want to have a different color bullet/number than the text you just have to enclose the latter within SPAN tags and apply the text color to it:

<style type="text/css">
  ul > li {
    color: red; /* bullet color */
  }
  ol > li {
    color: blue; /* number color */
  }
  li span {
    color: black; /* text color */
  }
</style>

• Moving Pictures
• Powerslave
• 1984
• Master of Puppets
• Countdown to Extinction

1. Moving Pictures
2. Powerslave
3. 1984
4. Master of Puppets
5. Countdown to Extinction

Conclusion

All of the techniques that we learned here today require no more than a couple of CSS attributes to make a huge difference to the look of your HTML lists. Next time, we’ll look at even more easy CSS tweaks to add style to your lists, including positioning list-item markers inside or outside the content flow, using images as bullets, and more.