1. Technology
Send to a Friend via Email

Playing with Lists

Part 2: Using CSS with Lists - List Properties in Cascading Style Sheets

By

List with graphic bullets

List with graphic bullets

Jennifer Kyrnin

Lists can be very flexible and easy to maintain, but the standard HTML elements and attributes don't leave you much room for creativity. Using Cascading Style Sheets (both CSS1 and CSS2) you can add more to your lists.

Styled Lists

All of the previous items have been deprecated in favor of style sheets, and you can do all of that with CSS, but there is so much more you can do with style sheets than just change the bullet or number.

Change the spacing
One of the effects I use most often in lists is
margin-bottom : 10pt;
I usually set this property on my <li> or <dd> elements, as it gives a little more space between the bullets. Making them easier to read. In fact, this entire article uses <dl> lists, with a 10pt margin on the bottom of all the <dd> elements.

Change the colors
The default setting of the <dt> element is plain text, just like the rest of the body text, but often, it's easier to read - and just nicer looking if you call out the terms in some other fashion. However, I like to use:
dt { font-weight : bold; }
in my style sheets. This automatically turns all my definition terms bold. I could have changed the color or the family or even the size of the font, as well.

Change the bullet
One really cool feature with using CSS to build your lists, is you can set customized graphics for your bullets. Before, the only way to do that was to use tables. Here's the CSS codes you might use:
list-style-image : url(../graphics/bullethxml.gif);

You can see this in the first image on the upper right of this article.

The best thing is, this degrades gracefully with older browsers - they simply see the standard bullets and ignore the styles.

Compact your lists
The default style for lists is to have wrapped lines indented from the bullet, below the first line of text. But sometimes you might want to have your lists be more compact. You can do this with the
list-style-position
property. The options are "inside" and "outside". Outside is the default, and inside is more compact.

Support for deprecated attributes
As I mentioned before, the attributes listed in the first part of this document are deprecated in favor of style sheets. There is one style property that allows you to control all of those aspects of your lists:

list-style-type
values:

  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • none

These values look exactly like the corresponding values for the attributes. One thing to note: if you're writing an unordered list, and you specify the list-style-type as "decimal" - it will appear in the browser as an ordered list. You can also specify "list-style-type : none;" and no bullet or number will appear.

CSS Level 2 Options
Cascading Style Sheets level 2 adds a few more options to lists - specifically in regards to internationalization issues.

list-style-type
values:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-alpha
  • lower-latin
  • upper-alpha
  • upper-latin
  • hebrew
  • armenian
  • georgian
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha
  • none
  • inherit

The default is "disc". This allows you to display numbering in lists with various languages and even in decimal with a leading zero. Some examples are shown in the second image in the upper right of this article.

square bullet list

  • list-style-type : square;
  • the bullets should display as squares

leading zero ordered list

  1. list-style-type : decimal-leading-zero;
  2. browsers that support this will show 01, 02, 03... rather than 1, 2, 3...
  3. note, many browsers are not completely CSS2 compatible

armenian ordered list

  1. list-style-type : armenian;
  2. browsers that support this will show numbers in armenian rather than arabic numerals
  3. again, this is up to browser support

Lists are a great way to improve and manage your Web data, and they are very flexible. Using the tips you've learned here, you should have all you need to create custom lists that are easy to develop and maintain.

First page > Basic List Properties - Elements and Attributes > Page 1, 2

Previous Features

©2014 About.com. All rights reserved.