Home arrow Style Sheets arrow Page 2 - Styling HTML Lists with CSS: Changing the Appearance of Bulleted Items
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
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
September 07, 2010
TABLE OF CONTENTS:
  1. · Styling HTML Lists with CSS: Changing the Appearance of Bulleted Items
  2. · Defining the type of bullets of an HTML list

print this article
SEARCH DEVARTICLES

Styling HTML Lists with CSS: Changing the Appearance of Bulleted Items - Defining the type of bullets of an HTML list
(Page 2 of 2 )

Without a doubt, one of the most relevant facets of an HTML list is the appearance of its bulleted items, as they’re actually its only visible elements (unless you decide to hide them from view deliberately). Fortunately, changing the bullets’ default look with CSS is a straightforward process, thanks to the existence of the “list-style” property.

To learn how to use this property, take a peek at the following example. It assigns square bullets to the items of the previous sample list:

<!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 square bullets</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 {
    list-style: square;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Sample list with square bullets</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>

There you have it. By specifying the value “square” to the pertinent “list-style” property, it’s possible to decorate the items of a list with stylish square bullets. The result of this process can be seem more clearly in the following image:

While a list made up of square bullets looks pretty elegant, sometimes it’s necessary to be more creative and assign a different style to its items. Again, the “list-style” property can be used to perform this task. In the next section I’m going to show how to redecorate the previous list, this time by using circle bullets.

To see how this will be done, read the lines below.  

Assigning circle bullets to the previous HTML list

In the preceding section, you saw how easy it is to assign square bullets to the items of a list; but will the process remain that simple if you need to replace the bullets with circles? Yes, it's easy to perform this task, as the following example illustrates. Take a look at it:

<!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 circle bullets</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 {
    list-style: circle;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Sample list with circle bullets</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>

As you saw above, by assigning the “circle” value to the already familiar “list-style” property, you can create a list with circle bullets very quickly. The following screen shot demonstrates the look of the previous HTML list after performing this styling process:

Needless to say, it’s feasible to assign different styles to the bullets of a list with CSS, other than the “square” and “circle” discussed previously. However, this will be left as homework for you, in case you feel adventurous and want to play for a while with the bulleted items of your own HTML lists.

Finally, feel free to edit all of the code samples shown in this tutorial. Doing so will let you arm yourself with more practice in styling web page lists using CSS. 

Final thoughts   

In this fourth episode of the series, I showed how easy it is to assign different styles to the bullets of an HTML list with CSS. In reality, the previous examples only demonstrated how to create square and circle bullets, but it’s feasible to create a few additional kinds of bullets by assigning other values to the corresponding “list-style” property.

While square and circle bullets look pretty good, what happens if you get bored and want to replace them with your own background images? Well, CSS makes this easy to do as well. In the next tutorial I’m going to discuss the full details of this process, so you can quickly grasp its underlying logic.

Don’t miss the next part! 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials