STYLE SHEETS

Styling HTML Lists with CSS: Resetting Padding and Margins

In this first part of the series on styling HTML lists with CSS, I explain how to reset their padding and margins. The entire styling process is very easy to follow.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

August 30, 2010

TABLE OF CONTENTS:

It’s time to face it: when you design your web pages, sooner or later you’ll start working with lists (either in their unordered or ordered versions). They are one of the most common HTML elements, and one of the first things that you learn to use. What’s more, you probably take it for granted that you know every single detail about them. But ask yourself the following question: are you really sure that your lists are styled correctly? And I’m saying this because sometimes it is a bit tricky to give them a consistent look across several browsers, considering the great variety that exist nowadays.

Well, if you no longer feel so confident about how you’re currently defining the visual presentation of your web page lists, don’t worry. In this series of articles I’m going to explain how to provide HTML lists with an engaging visual presentation via CSS. I'll start with some basic stuff, such as assigning values to margins and padding, and replacing default bullets with appealing background images. I'll move on to more complex things, like building accessible navigation bars in a snap.

Does my proposal sound attractive to you? Then it’s time to start learning how to make HTML lists look pleasant to the human eye by using only a few simple CSS styles. Let’s get going!

Getting started: building a basic, unpolished HTML list

Considering that the goal of this series is to progressively demonstrate how to polish the visual presentation of HTML lists with CSS, the first step is to create one that can be used for testing purposes. In consonance with this requirement, below I defined a simple web page, which contains an unordered list of links. Here’s the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample list with default styles</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
p {
    margin: 0 0 10px 0;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#header, #content, #footer {
    padding: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Sample list with default styles</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
    <div id="content">
        <h2>Main content section</h2>
        <ul id="sample_list">
            <li><a href="#">List Item 1</a></li>
            <li><a href="#">List Item 2</a></li>
            <li><a href="#">List Item 3</a></li>
            <li><a href="#">List Item 4</a></li>
            <li><a href="#">List Item 5</a></li>
            <li><a href="#">List Item 6</a></li>
            <li><a href="#">List Item 7</a></li>
            <li><a href="#">List Item 8</a></li>
        </ul>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
</div>
</body>
</html>

Definitely, coding an unordered HTML list like the one shown above is something that you’ve probably done hundreds of times before. In this case, the example list has been used as a wrapper for a set of links, simply to create a more realistic scenario; but naturally this structure is optional, so feel free to replace it with the one that better suits your needs.

So far, so good. At this point, if you give the previous example a try using your own browser, you should get a partial output similar to the one depicted by the following screen capture:

Well, even though the default appearance of the list is fairly acceptable, it still suffers from some serious inconsistency issues. Most modern browsers tend to assign disparate margins and padding to the bulleted items, and even display the bullets in a different way.

But as you’ll surely know, CSS makes resetting the padding and margins of lists a breeze. However, the best way to understand this process is by example, so in the next section I’m going to add a couple of basic styles to the previous HTML list that will set its default padding and margins to 0.

To see how this will be done, click on the link below and keep reading.

Next: Giving a consistent look: resetting padding and margins >>