How to Style a List
By Stephen Bucaro
A list is an arrangement of text about usually related items, and usually arranged vertically.
The items may, or may not be arranged in a specific order. Each item in a list may be marked,
or prefaced by a number, letter, or a graphic bullet or icon. Readers like lists because a
list is more readable than a block of text and provides order in a more easily understandable way.
- bread
- milk
- eggs
- potatoes
- broccoli
<ul>
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ul>
Shown above is the html code for a basic list. With html you can create a numbered list or
a list with the default bullets. But by using some simple CSS style code you can define your
list to use roman numerals or letters rather than numbers, or you can define your own graphic
to use for the bullets in your list.
- bread
- milk
- eggs
- potatoes
- broccoli
If you wish to use letters rather than numbers for the items in your list, set the CSS
list-style-type property to lower-alpha or upper-alpha. Example code
to define a list to use lowercase letters is shown below.
<ol style="list-style-type: lower-alpha;">
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ol>
- bread
- milk
- eggs
- potatoes
- broccoli
If you wish to use roman numerals rather than numbers for the items in your list, set
the CSS list-style-type property to upper-roman. Example code
to define a list to use roman numerals is shown below.
<ol style="list-style-type: upper-roman;">
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ol>
- bread
- milk
- eggs
- potatoes
- broccoli
An unordered list may use circle, disc, or square bullets. If, rather than
letting the browser set the default bullet type, you wish to explicitly set the bullet
type, use the list-style-type property. Example code to define an unordered list
to use square bullets is shown below.
<ul style="list-style-type: square;">
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ul>
- bread
- milk
- eggs
- potatoes
- broccoli
If, rather than use one of the pre-defined bullet types, you would like to use your
own image for bullets, use the list-style-image property. Example code to define
an image to use for items in an unordered list is shown below.
<ul style="list-style-image: url('bullet.gif');">
<li>bread</li>
<li>milk</li>
<li>eggs</li>
<li>potatoes</li>
<li>broccoli</li>
</ul>
- 4. bread
- 5. milk
- 6. eggs
- 7. potatoes
- 8. broccoli
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
