How to Style a List

By Stephen Bucaro

Lists are a very common structure found on Web pages. Many lists use the default styles, which makes them somewhat boring. In this article, I show you how to get control of your lists and how to use style rules to make them more interesting.

Below is a basic unordered list <ul> with no style applied.

• bread
• butter
• milk
• cheese
• pasta
• pasta sauce

This might be a typical grocery list. Not only are the grocery items on the list a bit boring, but the appearance of the list itself is a bit boring. This list uses the default bullets. You can use the list-style-type property, as shown below, to specify which of the standard bullets to use.

• bread
• butter
• milk
• cheese
• pasta
• pasta sauce

<ul style="list-style-type: square">
 <li>bread</li>
 <li>butter</li>
 <li>milk</li>
 <li>cheese</li>
 <li>pasta</li>
 <li>pasta sauce</li>
</ul>

 Note that I'm using inline style definitions here. Many web designers disapprove of the use of inline style because it doesn't reduce the amount of code compared to html, and because it doesn't create a single global place to define all styles. However, there are several advantages to using inline style.

Most professional web designers don't have complete control of their code, for example advertisers may provide blocks of code, and in that code they may define styles that conflict with the designer's styles. This can occur even if you define special class names or ids for your styles.

Global style sheets may become large and unwieldily, making it time consuming to find a style definition. With global style sheets a web designer can literally loose control of the situation. With inline style, the rules are right in the tag, and they over-ride any further away definitions.

Contrary to what most web designers think, it's not the amount of code that slows web page loading. Compare the image file sizes to the web page file size. It takes a lot of code to equal the weight of even one small image.

The real problem with using a large amount of code on a web page is when the code is not properly formatted. Then it looks like a bunch of incomprehensible gibberish. So lets not be so disapproving of the use of inline style.

RSS Feed

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues
 FREE Graphics Warehouse

With this book, readers can start with a tour of the stylesheet language, or skip ahead to any chapter of the book to look up specific tasks covering just what they need to know. This task-based, visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning and intermediate users CSS.

Reader David Diez of Boston, MA says, "This book's strategy seems to be show an example, give a general explanation, provide a few key but brief tips, move on. The writing is clear and concise. ... I continue to be very pleased and impressed with the book. It's proving to be a helpful reference and everything in it is highly accessible. Click here for more information.