www.cryer.co.uk
Brian Cryer's Web Resources

Fun with Bullet Lists

(or how you can change the appearance of a bullet list)

Page contents

Introduction - The purpose of this article

Bullet lists (such as the one used above in the contents list) are very popular. Styles and css (cascading style sheets) in particular provide ways of making radical changes to the appearance of a bullet list. The purpose of this article is to provide a taster of the different effects that can be achieved with a bullet list.

It is worth considering why you might want to do this? After all, many of the effects shown in this article could be achieved by some other means. There are many reasons. One important reason is compatibility with older browsers - if your site is being viewed using a browser that does not understand css then it will still be rendered in a logical and readable manner. Another important reason is "Accessibility", that is making a web page accessible to someone who is visually impaired and is using a screen-reader. For example, if you have a list of links that make up a menu, then constructing that list using a bullet list means that any screen reader will know it is a list - even if visually it may no longer look like one because of the visual effects.

For each example three things will be shown:

  1. What the effect looks like.
  2. The HTML for the bullet list.
  3. The css that defines the appearance.

This article assumes a working knowledge of css.

Simple Bullet List

Below is the very simplest of bullet lists. This is the basic bullet list that will be used for the subsequent examples on this page.

Appearance HTML css
  • Apples
  • Pears
  • Bananas
  • Grapes
<ul>
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>
(none)

Bullet List with a Custom Bullet

If you want to have a custom bullet then you can specify an image file to use for that custom bullet. The example below uses an image of a tick mark.

Appearance HTML css
  • Apples
  • Pears
  • Bananas
  • Grapes
<ul class="TickList">
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>
ul.TickList {
  list-style-image: url('tick.gif')
}

The url for the image must be specified inside single quotes. The image url can be specified using an absolute url (ie. http://www.cryer.co.uk/resources/tick.gif) or a relative url (such as ../tick.gif). Be aware that you cannot specify the height or width of the image, so be sure that it is something suitably sized (i.e. small).

Bullet List without a Bullet

A bullet list can be used without any bullets:

Appearance HTML css
  • Apples
  • Pears
  • Bananas
  • Grapes
<ul class="NoBullet">
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>
ul.NoBullet {
  list-style-type: none
}

This example does not deal with the indent - the list is still indented. To address that see the next example Bullet List without a Bullet or Indent.

The "list-style-type" css property specifies the type of list. Any of the following types can be used:

list-style-type Bullet Style Example
disc Solid circle
  • Apples
  • Grapes
circle Circle.
  • Apples
  • Grapes
square Square.
  • Apples
  • Grapes
decimal Decimal number.
  • Apples
  • Grapes
lower-roman Lower case Roman numerals.
  • Apples
  • Grapes
upper-roman Upper case Roman numerals
  • Apples
  • Grapes
lower-alpha Lower case letters.
  • Apples
  • Grapes
upper-alpha Upper case letters.
  • Apples
  • Grapes
none No bullet.
  • Apples
  • Grapes

Bullet List without a Bullet or Indent

Each item in a bullet list is normally indented. This is controlled by the left-margin value assigned to the list. The following example shows a list with no bullet and no indent.

Appearance HTML css
  • Apples
  • Pears
  • Bananas
  • Grapes
<ul class="NoBulletNoIndent">
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>
ul.NoBulletNoIndent {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px
}

Of course you could achieve this same effect without using a list ...

Note: Internet Explorer uses left-margin for the indent, but the FireFox browser uses left-padding.

Menu Style Bullet List

Appearance HTML css
  • Apples
  • Pears
  • Bananas
  • Grapes
  • Every other possible kind of fruit
<ul class="SimpleMenu">
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
<li>Every other possible kind of fruit</li>
</ul>
ul.SimpleMenu {
  list-style-type: none;
  margin-left: 0px;
  padding-left 0px;
}
ul.SimpleMenu li {
  background-color: #C0C0C0;
  width: 8em;
  border-style: outset;
  border-width: 1px
}

and with simple mouse-over effects added:

Appearance HTML css
<ul class="SimpleMenu2">
<li><a href="#self">Apples</a></li>
<li><a href="#self">Pears</a></li>
<li><a href="#self">Bananas</a></li>
<li><a href="#self">Grapes</a></li>
<li><a href="#self">Every other possible kind of fruit</a></li>
</ul>
ul.SimpleMenu2 {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
}
ul.SimpleMenu2 li {
  background-color: #C0C0C0;
  border-style: outset;
  border-width: 1px
}
ul.SimpleMenu2 li a {
  display: block;
  width: 8em;
  text-decoration: none
}
ul.SimpleMenu2 li a:hover {
  background-color: #D0D0D0
}

Some things to note:

Horizontal Bullet List

All the lists so far have been vertical, with each item listed below the previous. Lists can be put together to display horizontally, i.e. with each item on the same line as the previous - subject to wrapping.

Appearance HTML css
  • Apples
  • Pears
  • Bananas
  • Grapes
<ul class="Horizontal">
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>
ul.Horizontal {
  margin-left: 0px;
  padding-left: 0px;
}
ul.Horizontal li {
  display: inline
}

The appearance of each item in the list is controlled by the "display" property associated with each <li> element. The example above sets the left-margin for the list only to avoid the list being indented.

For an excellent description of the display property, see www.quirksmode.org/css/display.html.

Whilst the display property can take other values, the three below are the ones most commonly used:

Display Description Example
none Not displayed at all.
  • Apples
  • Grapes
block Displayed as a block level element. So line break before and after.
  • Apples
  • Grapes
inline In-line, so no line break before or after.
  • Apples
  • Grapes

Horizontal Menu Style Bullet List

Appearance HTML css
<ul class="SimpleHorizMenu">
<li><a href="#self">Apples</a></li>
<li><a href="#self">Pears</a></li>
<li><a href="#self">Bananas</a></li>
<li><a href="#self">Grapes</a></li>
</ul>
ul.SimpleHorizMenu {
  margin-left: 0px;
  padding-left: 0px;
}
ul.SimpleHorizMenu li {
  display: inline;
  background-color: #C0C0C0;
  border-style: outset;
  border-width: 1px;
}
ul.SimpleHorizMenu li a {
  text-decoration: none;
  padding-left: 1em;
  padding-right: 1em
}
ul.SimpleHorizMenu li a:hover {
  background-color: #D0D0D0
}

Note:

Horizontal Button Style Bullet List

Unfortunately there are differences between browsers in how they render HTML and css. The following uses "border: outset 2px" to give an imitation of a button, which works very well when viewed using Internet Explorer, but is not so good when viewed with other browsers.

Appearance HTML css
<ul class="HorizontalButtons">
<li><a href="#self">Apples</a></li>
<li><a href="#self">Pears</a></li>
<li><a href="#self">Bananas</a></li>
<li><a href="#self">Grapes</a></li>
</ul>
ul.HorizontalButtons {
  margin-left: 0px;
  padding-left: 0px;
}
ul.HorizontalButtons li {
  display: inline;
  background-color: #C0C0C0;
  border-style: outset;
  border-width: 2px;
  margin: 2px;
  padding: 0px
}
ul.HorizontalButtons li a {
  text-decoration: none
}
ul.HorizontalButtons li a:hover {
  background-color: #D0D0D0
}

Other Sources of Information

If you find any errors on this page then please e-mail the author.