STYLE SHEETS

Styling HTML Lists with CSS: Changing the Appearance of Bulleted Items

In this fourth part of the series, I show how easy it is to assign different styles to the bullets of an HTML list with CSS. While the examples only demonstrate how to create square and circle bullets in a snap, it’s feasible to create a few additional styles by assigning other values to the corresponding “list-style” property.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

September 07, 2010

TABLE OF CONTENTS:

Although the idea may seem somewhat exaggerated, the truth is that many web designers consider HTML lists and forms to be the bad kids on the block. It's pretty difficult to provide them with an attractive and consistent appearance. There's a simple reason for this: both forms and lists are made up of elements whose look is defined by default by a browser's rendering engine. And as you know, nowadays there are many different browsers.

The good side of this story is that in most cases it is possible to completely change the appearance of HTML lists by using only a few CSS properties (although forms are a bit trickier to style). What's more, to show that my previous statement is true, in earlier parts of this series I used some basic examples to show how to manipulate certain properties of an HTML list with CSS, such as its padding and margins. And guess what? The entire styling process was a breeze!

It’s fair to say, however, that I'm only scratching the surface of creating the visual presentation of an HTML list which can be displayed uniformly across different browsers. Therefore, in this fourth installment of the series I’m going to illustrate, as usual through some easy-to-follow examples, how to define the style of the bullets of a sample list.

Having said that, it’s time to continue exploring how to style web page lists with CSS. Let’s jump in!

Review: altering the padding and margins of an HTML list at the same time

As I explained in the introduction, it’s extremely simple to manipulate the padding and margins of a list using CSS. Moreover, the process is not only easy to accomplish, but gives the list a more cohesive look, since most modern browsers tend to assign different values to the aforementioned properties.

The example below, which was developed in the preceding tutorial, shows in a nutshell how to more accurately control the position of a sample list on screen by assigning fixed values to its “padding-left” and “margin-left” properties. Here it is:

<!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 padding-left and margin-left set to 20px</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;
}
ul#sample_list {
    padding: 0 20px;
    margin: 0 20px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Sample list with padding-left and margin-left set to 20px</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, you’ll have to agree that the above example is very easy to grasp. In this particular case, the target list has been shifted to the left of its parent container by assigning a value of 20px to its left padding and margin, but naturally it’s possible to alter these properties in the way that best fits your needs.

The following screen capture shows the appearance of the corresponding list when displayed on the browser:

That looks pretty neat, right? But in keeping with the concepts deployed in the introduction, there is still plenty of room to improve the visual presentation of lists with CSS. In fact, you already learned how to change padding and margins in a few simple steps, so what's next?

Well, in most cases it’s desirable to change the default bullets of a list’s items with others that look a bit more appealing. Therefore, in the next segment I’m going to demonstrate how to assign some fancy square bullets to the sample list coded before.

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

Next: Defining the type of bullets of an HTML list >>