Make your own free website on Tripod.com

List Controls

List Type
You can set the list type of all <li> tags using the list-style-type property. Your possible values are: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none.

For example, If I put this code between my </title> and </head> tag:

<style type="text/css">
<!--
li {
list-style-type: decimal;
}
-->
</style>

Then my list would look like this:

  1. text here
  2. text here
  3. text here
  4. text here
  5. text here
  6. text here

Using Images For Bullets
For this you would use the list-style-image property, with the value set to: url(address of image here).

Example:

li {
list-style-image: url(mybullet.gif);
}

With that set, all bullets will be the image of your choice.

Positions
With the list-style-position property, you can set the value to outside or inside, and affect how the text wraps around a bullet. Inside aligns subsequent lines of text with the bullet, outside aligns it with the first letter of the bulleted section.

For example, If I put this between my </title> and </head> tag:

<style type="text/css">
<!--
li {
list-style-position: inside;
}
-->
</style>

I could make this:

Putting It All Together
You could string all these properties together like this:

<style type="text/css">
<!--
li {
list-style-type: square;
list-style-image: url(mybullet.gif);
list-style-position: inside;
}
-->
</style>

But, you could save space by doing this instead:

<style type="text/css">
<!--
li {
list-style: url(mybullet.gif) square inside;
}
-->
</style>

Controlling The Width
The width property can be used in potentially any CSS selector, and that includes Lists.

<style type="text/css">
<!--
li {
width: 200px;
}
-->
</style>

Which will make this:

Main?