Home arrow Style Sheets arrow 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
(Page 1 of 2 )

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.


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