Lists

Lists are nice, but visually boring. You can spice it up by adding bullets and other effects.

As with all other styles, you can include the CSS command on each line, which only defines it for the current iteration.

STYLE="list-style-image: something"

Or redefine the entire style by including the definition in between the <HEAD> and </HEAD>.

<STYLE>
   UL {list-style: circle inside lower-alpha}
</STYLE>

Each of these may be specified on all of the different list tags: <UL>, <OL>, <LI> (to just define a simple list item), <DD> and <DT>.

Image Bullets

Using images on bulleted lists can really spice things up. Here is an example.

<ul style="list-style-image: url('aqua.gif'); 
color: #FF00FF; font-weight: bold">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

And here is what it looks like.

Item 1

Item 2

Item 3

You can also change each individual list element.

<ul style="color: #FF00FF; font-weight: bold">
   <li style="list-style-image: url('aqua.gif')">Item 1</li>
   <li style="list-style-image: url('blue.gif')">Item 2</li>
   <li style="list-style-image: url('grn.gif')">Item 3</li>
</ul>

And here's how that looks:

Item 1

Item 2

Item 3

Bullet Types

You can change the bullet to one of three different pre-defined types: circle, square and disc.

<UL>
   <LI STYLE="list-style-type: circle">Circle
   <LI STYLE="list-style-type: square">Square
   <LI STYLE="list-style-type: disc">Disc
</UL>

This looks as follows:

Circle

Square

Disc

Numbered List Types

You can also define lists using various numbering schemes: decimal, lower-case alpha, upper-case alpha, lower-case roman and upper-case roman.

<OL>
   <LI STYLE="list-style-type: decimal">Decimal
   <LI STYLE="list-style-type: lower-alpha">Lower-case alpha
   <LI STYLE="list-style-type: upper-alpha">Upper-case alpha
   <LI STYLE="list-style-type: lower-roman">Lower-case roman
   <LI STYLE="list-style-type: upper-roman">Upper-case roman
</OL>

And below is how that comes out:

Decimal

Lower-case alpha

Upper-case alpha

Lower-case roman

Upper-case roman

Of course, you can make them all the same as shown below:

<OL STYLE="list-style-type: lower-alpha">
   <LI>Item 1
   <LI>Item 2
   <LI>Item 3
   <LI>Item 4
   <LI>Item 5
</OL>

This is how that turns out:

Item 1

Item 2

Item 3

Item 4

Item 5