Lists are an easy way to maintain a Web page. Not only are they easy for your customers to read, they are clean and crisp and offer a simple design look for your pages. But ordered and unordered lists can be very boring. Most browsers have a very specific way of rendering lists, and if you didn't like that design, you were pretty much stuck. The only option would be to manually create the lists yourself using tables and fancy bullets, or simply re-writing an ordered list every time a new number was added.
Basic List Features
When you're using a list, be it an ordered list (1..2..3..), a bulletted list, or a definition list, there are certain features that are a part of the HTML specification. (Note: all of these features have been deprecated in HTML 4.0 in favor of style sheets.)
Change the bullet
It's possible to change the bullet of your bulletted list to three different types:
- <li type="disc">
- <li type="circle">
- <li type="square">
Change the numbering type
You don't have to number your ordered lists using just arabic numerals:
- <ol type="1">
1..2..3.. - <ol type="a">
a..b..c.. - <ol type="A">
A..B..C.. - <ol type="i">
i..ii..iii..iv.. - <ol type="I">
I..II..III..IV..
One neat thing you can do with these codes is to use them within your <li> tags. This allows you to change the numbering style within a list.
Change the number your list starts with
If you have a list that is broken up by headers or images or large chunks of
text, you can restart your list from whatever number you'd like using the "start"
attribute of your <ol> tag. For example:
<ol start="20"> would start your list at 20 rather than 1.
Change the number of a specific line, and all after it
Unlike the "start" attribute, the "value" attribute works on the <li> tag, and
affects all <li> following. For example:
<ol>
<li>This is step 1</li>
<li value="4">We skip steps 2-3 and go straight to 4</li>
<li>Then move on to step 5</li>
</ol>
On the next page of this article, we'll discuss more advanced changes you can make to your lists using style sheets.
Next page > Using CSS with Lists - List Properties in Cascading Style Sheets > Page 1, 2
