Web design development. Everything about Creating Lists with Style

Changing bullet and number styles.

There are a number of style properties specifically designed for lists. The easiest to use is the list-style-type property, which directly corresponds to the type attribute. The value of this property determines the bullet or numbering style to be used for a list or a list item. When used with unordered lists, the values circle, disc, and square are accepted; when used with an ordered list, you will need to specify decimal, lower-alpha, upper-alpha, upper-roman, or lower-roman.

For example, here are two style rules, creating classes that define square-bullet and Roman numeral lists:

<STYLE TYPE="text/css">

<!---

  .square-bullet { list-style-type : square; }

  .roman-numeral { list-style-type : upper-roman; }

-->

</STYLE>

To create a list with square bullets, you can then just add CLASS="square-bullet" to the <UL> tag (i.e <UL CLASS="square-bullet">). Similarly, adding CLASS="roman-numeral" to the <OL> tag (i.e: <OL CLASS="roman-numeral">) creates a list numbered with uppercase Roman numerals.

You could also apply these style classes to individual <LI> tags to change a particular item's format. In general, you will find it much easier to apply the style to the containing <UL> or <OL> tag, where it is inherited by all the elements in the list. This also means nested lists would inherit the list style as well. If you do not wish all properties to be the same, all you need to do is add a separate style for the nested lists to meet your needs.

Changing bullets

The list-style-type property is not that appealing, since it only replaces the functionality of the type attribute. Use the list-style-image property: it provides one of the most sought-after HTML features: custom list bullets.

The value of this property is the URL of an image that is to be used as the bullet for an unordered list. Normally, the image would be a small one, suitable for use as a bullet, but there is no limit on the actual size or complexity of the image you use. To create a list using magenta squares, you might say:

<STYLE TYPE="text/css">

<!--

  .magenta-square { list-style-image: url(mag_sq.gif); }

-->

</STYLE>

Note that URLs in style sheets are denoted by the word url, followed by the URL in parentheses. Do not enclose the URL in quotes, as you might in other HTML elements. Presumably, the file mag_sq.gif would contain a magenta square, so that an unordered list created with CLASS="magenta-square" (example, <UL CLASS="magenta-square">) would look like this:

Each Item
should have a magenta square
For the bullet

If you are using Internet Explorer 4.0, you should see little magenta squares where the bullets would normally be. Other browsers will display their regular bullet.

Note: When you use the list-style-image property, you might consider specifying the list-style-type property as well. If the browser cannot find the desired image, or if the user has suppressed image loading or is using a non-graphical browser, the bullet specified by the list-style-type property will be used instead.

<< BACK

Creating Lists With Style