List basics in (X)HTML and CSS

Lists are great. There are many elements that you might include on your web pages that are ideally marked up as a list and lists are easily styled with CSS to make them far more interesting to look at than the default styles used by the browser. In this article we will look at the three different types of list available in (X)HTML and which one you should use for which purpose. We will also explore how you can nest lists, for when you need a list within a list. The final part of this tutorial looks at the basics of styling lists with CSS, once you understand the basics you will be able to create attractive lists just by experimenting with applying different effects.

- OR -


Table of contents

  • The lists
  • Unordered lists
  • Creating an unordered list in Dreamweaver
  • Ordered lists
  • Creating an ordered list in Dreamweaver
  • Definition lists
  • Creating a definition list in Dreamweaver
  • Nesting lists
  • Styling lists with CSS
  • Removing the bullets
  • Changing the bullet type
  • Using an image for the bullet
  • Removing indentation
  • Styling individual list items
  • Width
  • Styling a Definition List
  • Summary

Rachel Andrew

Rachel AndrewRachel Andrew is a trained dancer and singer, whose CV lists jobs as diverse as company choreographer for a physical theatre company to chargehand carpenter for “The Mousetrap” at St. Martin’s Theatre in London’s West End. After leaving the theatre when pregnant with her daughter, Rachel started to design sites mainly out of curiosity into how it worked. It didn’t take too long for her to figure out that her skills lay in development as opposed to design and these days she tends to leave the design to designers so she can concentrate on writing code, dismantling computers and installing Linux on anything that stays still long enough.

Rachel has worked in the industry as a webmaster, technical project manager and senior web developer but in September 2001 set up her own company ‘’, which provides complete web solutions and outsourced development services for design agencies and Internet start-ups who do not have in-house web developers.

As well as managing and doing much of the development on projects for Rachel is a published author and worked as a co-author on the following titles for Glasshaus:

Dynamic Dreamweaver MX ISBN:1904151108
Fundmental Web Design and development Skills: ISBN:1904151175
Dreamweaver MX Design Projects: ISBN:1904151272

Rachel is also a member of the Web Standards Project serving on The Dreamweaver Task Force.

In her spare time Rachel studies for ‘fun’ with the Open University, does family and local history research and spends time with her 5 year old daughter and her other half, Drew McLellan.

See All Postings From Rachel Andrew >>


Be the first to write a review

You must me logged in to write a review.