Tuesday, October 12, 2010

CSS Lists

CSS includes a number of list properties to help you style your HTML lists.

List Style Type
If you want something different from the default numbering of ordered lists, discs, or bullets, then all you have to do is choose a different style to their lists.
CSS allows you to select from a wide variety of different list item shapes.
  • Unordered list styles: square, circle, disc, and none
  • Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none
 Example:
 1.
<ul style="list-style-type:circle;">
<li>This list is 1</li>
<li>This list is 2</li>
</ul>

This results in:
  • This list is 1
  • This list is 2
 2.
<ul style="list-style-type:upper-roman;">
<li>This list is 1</li>
<li>This list is 2</li>
</ul>

This results in:
  • This list is 1
  • This list is 2
3.
As we said before, lists of CSS allow you to insert an image instead of normal bullets. A good choice for a ball, an image that is less than the height of your text and graphics is a relatively simple / plain.
<ul style="list-style-image:url(name.gif);">

    No comments:

    Post a Comment