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
- list-style-type : decimal-leading-zero;
- browsers that support this will show 01, 02, 03... rather than 1, 2, 3...
- note, many browsers are not completely CSS2 compatible
armenian ordered list
- list-style-type : armenian;
- browsers that support this will show numbers in armenian rather than arabic numerals
- 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
