Formatting Lists w/CSS3

Section 1: Overview

CSS can be used to alter the bullets on unordered lists and the numbering style on ordered lists.

Section 2: Customizing Unordered Lists

The default bullet for an unordered list is a disc, but other options are available.

• Other alternatives include a square and a circle.
  • A disc (filled circle) can be specified using the property:value pair "list-style-type: disc;".
  • A square can be specified using the property:value pair "list-style-type: square;".
  • A circle (empty circle) can be specified using the property:value pair "list-style-type: circle;".

The list style type can be set on either the <ul> or <li> tag.

• With the <ul> tag, the list-style-type applies to all list items.
  

  ul
  {
  list-style-type: square;
  }

  <h3>Some Common Single-Engine Aircraft</h3>
  <ul>
  <li>Cessna Skyhawk</li>
  <li>Beechcraft Bonanza</li>
  <li>Piper Cherokee</li>
  </ul>

• With the <li> tag, the list-style-type applies to just that list item.

  li.disc
  {
  list-style-type: disc;
  }
  li.square
  {
  list-style-type: square;
  }
  li.circle
  {
  list-style-type: circle;
  }

  <ul>
  <li class="disc">Cessna Skyhawk</li>
  <li class="square">Beechcraft Bonanza</li>
  <li class="circle">Piper Cherokee</li>
  </ul>

An image can also be used as a bullet in an unordered list.

• An image is specified using the "list-style-image" property and a URL reference. The quotation marks are optional.

  ul
  {
  list-style-image: url(images/airplaneSm.jpg);
  }

  <h3>Some Common Single-Engine Aircraft</h3>
  <ul>
  <li>Cessna Skyhawk</li>
  <li>Beechcraft Bonanza</li>
  <li>Piper Cherokee</li>
  </ul>

An image can be used as a bullet for a list item as well.

• An image is specified using the "list-style-image" property and a URL reference. The quotation marks are included in this example.

  li.plane1
  {
  list-style-image: url('images/cessnaSm.jpg');
  }
  li.plane2
  {
  list-style-image: url('images/plane1Sm.jpg');
  }
  li.plane3
  {
  list-style-image: url('images/plane2Sm.jpg');
  }

  <h3>Some Common Single-Engine Aircraft</h3>
  <ul>
  <li class="plane1">Cessna Skyhawk</li>
  <li class="plane2">Beechcraft Bonanza</li>
  <li class="plane3">Piper Cherokee</li>
  </ul>

Section 3: Customizing Ordered Lists

With ordered lists the property list-style-type can be used to change the sequence values.

• The allowable values include the following:
  

  Property value	Sequence type	First four
  decimal	Arabic numerals	1, 2, 3, 4
  upper-alpha	Uc letters	A, B, C, D
  lower-alpha	Lc letter	a, b, c, d
  upper-roman	Uc Roman	I, II, III, IV
  lower-roman	Lc Roman	i, ii, iii, iv

  li
  {
  list-style-type: upper-roman;
  }

  <h3>Some Common Single-Engine Aircraft</h3>
  <ol>
  <li>Cessna Skyhawk</li>
  <li>Beechcraft Bonanza</li>
  <li>Piper Cherokee</li>
  </ol>

Section 4: Let's Play

Click the "Edit and Click Me >>" to see the results of the html code in the left panel in the panel on the right.

Then, play around with the html code, making changes and seeing the effect of those changes in the right panel.