Web Development

How do I... Control the format of HTML lists with CSS?

CSS offers a large number of list bullet style properties and supports using custom images for list bullets and creating horizontal lists. This tutorial discusses CSS properties that offer new ways of controlling the appearance, positioning, and orientation of HTML lists.

Back when HTML was the only option for Web design, there were a limited number of things you could do with HTML lists. But with Cascading Style Sheets (CSS), it's a whole new ball game. In addition to making it easier to alter the font, positioning, and color of list items, CSS offers a large number of list bullet style properties and supports using custom images for list bullets and creating horizontal lists. This tutorial discusses CSS properties that offer new ways of controlling the appearance, positioning, and orientation of HTML lists.

Setting a list's bullet style

One of the most interesting CSS properties for list manipulation is the list-style-type property, which offers a variety of options for modifying a list's bullet style. This example re-numbers an ordered list using Roman numerals:

<html>

 <head>

  <style type="text/css">

  li {

    list-style-type: upper-roman   }

  </style>

 </head>

 <body>

  <ol>

   <li>Do the shopping</li>

   <li>Pay taxes</li>

   <li>Call the baby-sitter</li>

  </ol>

 </body>

</html>
See the output in Figure A. Figure A

Figure A

Roman numerals aren't the only style available. Unordered lists can mark individual list items with squares, hollow circles, or discs, while numbered lists can choose from decimal numbering, alphabetical numbering, and numbering in Roman, Greek, Latin, Armenian, or Georgian. These properties correspond to the values disc, circle, square, decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian and georgian of the list-style-type property. This example demonstrates these different list styles:

<html>

 <head>

 </head>

 <body>

  <ul>

   <li style="list-style-type: disc">Orange juice</li>

   <li style="list-style-type: circle">Chocolate</li>

   <li style="list-style-type: square">Bread</li>

   <li style="list-style-type: lower-alpha">Eggs</li>

   <li style="list-style-type: upper-alpha">Bacon</li>

   <li style="list-style-type: lower-roman">Beans</li>

   <li style="list-style-type: armenian">Ham</li>

   <li style="list-style-type: decimal">Rice</li>

   <li style="list-style-type: lower-latin">Sugar</li>

   <li style="list-style-type: lower-greek">Salt</li>

   <li style="list-style-type: georgian">Tomatoes</li>

</ul>

 </body>

</html>
See the output in Figure B. Figure B

Figure B

Using a custom bullet

If you don't like any of the built-in list styles, you can also replace them with your own. The CSS list-style-image property accepts a URL pointing to an image file, which is then used as a list bullet. This example attaches an arrow to each list item:

<html>

 <head>

  <style type="text/css">

  li {

    list-style-image: url('arrow.gif');   }

  </style>

 </head>

 <body>

  <ol>

   <li>Feed the fish</li>

   <li>Check email</li>

   <li>Clean the floor</li>

   <li>Wash the clothes</li>

  </ul>

 </body>

</html>
See the output in Figure C. Figure C

Figure C

Setting list borders and widths

CSS has various border properties that you can use to highlight your list or to separate list items into clearly defined rows. Also, you can control the width of your list block by setting a width for each list item with the CSS width property. This example demonstrates that by setting the width of the list block to 150px and using the border property to enclose each list item in a blue, 1 pixel thick border:

<html>

 <head>

  <style type="text/css">

  ol {

    padding: 5px;

    width: 150px;

  }

 

  li {

    list-style-type: none;

    border: solid 1px blue;   }

  </style>

 </head>

 <body>

  <ol>

   <li>Feed the fish</li>

   <li>Check email</li>

   <li>Clean the floor</li>

   <li>Wash the clothes</li>

  </ul>

 </body>

</html>
See the output in Figure D. Figure D

Figure D

Altering list typeface and color

You can use the CSS font-family property to alter the typeface of the list by specifying a list of font names separated by commas that the client should use to render list items. The browser will use the first font it finds in the list or default to the standard browser typeface if none are available. In a similar manner, you can use the color property to alter the font color by specifying a value either as a "color word" or in hexadecimal notation.The following example demonstrates this by displaying list items in Courier orange:

<html>

 <head>

  <style type="text/css">

  ol {

    font-family: "Courier";     border: green solid 2px;     color: orange;   }

  </style>

 </head>

 <body>

  <ol>

   <li>Feed the fish</li>

   <li>Check email</li>

   <li>Clean the floor</li>

   <li>Wash the clothes</li>

  </ul>

 </body>

</html>
See the output in Figure E. Figure E

Figure E

Adjusting list spacing

CSS lets you control the amount of indentation list items receive via its text-indent property. Indentation units may be described in terms of points, percentages, or ems. The vertical space between list items may be controlled with the line-height property, while the horizontal space between the words and characters of each list item may be adjusted with the word-spacing and character-spacing properties. As with the text-indent property, values may be expressed in points, pixels, and ems.

The following example demonstrates this by specifying custom settings for the height of each list item and for the space between characters and words:

<html>

 <head>

  <style type="text/css">

  ol {

    width: 350px;

    border: green solid 2px;

  }

  li {

    text-indent: 10%;

    line-height: 40px;

    letter-spacing: 1px;

    word-spacing: 4px;

  }

  </style>

 </head>

 <body>

  <ol>

   <li>Feed the fish</li>

   <li>Check email</li>

   <li>Clean the floor</li>

   <li>Wash the clothes</li>

  </ul>

 </body>

</html>
See the output in Figure F. Figure F

Figure F

Altering list orientation

By default, clients render lists vertically, with every list item on a separate line. It's easy to alter this behavior and render your list items horizontally in a single line. This behavior is most commonly required for page-level menu bars, which must appear horizontally near the top or bottom of a page.

With CSS, this is accomplished by setting list items to display as inline elements with display: inline rather than the default value of display: block. This example shows how you can use the border property to create vertical separators between the horizontal list items:

<html>

 <head>

  <style type="text/css">

  ol {

    text-align: right;

  }

  li {

    display: inline;     padding-right: 20px;

    padding-left: 10px;

    border-right: solid 1px;   }

  </style>

 </head>

 <body>

  <ol>

   <li>Send Mail</li>

   <li>Check Mail</li>

   <li>Address Book</li>

   <li>Sign Out</li>

  </ul>

 </body>

</html>
See the output in Figure G. Figure G

Figure G

Conclusion

As these examples illustrate, CSS gives designers new power over ordered and unordered HTML lists. The various CSS properties discussed in this tutorial offer new ways of controlling the appearance, positioning, and orientation of HTML lists. You should add them to your toolkit in preparation for the next time you sit down to code an HTML/CSS Web application.

2 comments
Kei23th
Kei23th

This was helpful over all, but I have a question if anyone can answer it. I have an unordered list and some items in the list have the registered trademark symbol, but not every line. The ones with the symbol seem to be pushed down a pixel or two. It is quite noticable that the list item is further apart from the previous one in these cases. Is there some way to correct this? I tried adding some padding between lines, but it still adds a pixel or two of space for those rows with the trademark symbol. Any help would be appreciated.

skateified
skateified

Hello I have to reproduce a list with automatic number in a exact style. Ie 1) blah blah (a) blah blah blah 2) blag blah blah (iii) blah blah All the indents must line up and I MUST be able to have all the index numbering in a selection of 1) or (iii) etc all the end of the brackets and the starting of the text must be the same and I must be able to use the and tags!

Editor's Picks