Lists/Bullet Points
Written by Jen

Many people choose HTML lists over CSS lists. The reason is that on a lot of older (and still common) browsers, the lists don't appear to have changed at all, so rather than take up that extra space with your stylesheet, people just use good old HTML.

But for others who are persistent in having the best possible layout, changing lists is easy. To change ALL your bullet points, you would change it using:

li {list-style-type: option; list-style-position: option;}

The options for list-style-type are disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha or just none. You can view what these look like in the HTML tutorial for lists.

The options for list-style-position are outside or inside. Outside means the text will align with each other on every line. Inside means the text will align with the bullet point (ie. wraps around the bullet point somewhat) after the first line.

You can also change the color of your bullet point. HOWEVER, this also changed the color of your text in your lists so this is not advised. But to do it, you would use:

li {color: red;}

With red changed to whatever color you want (name or hex color code).

If you want to make your own bullet point image, then you can put it in using this code:

li {list-style-image: url('list image url');}

What about if I only want to change the list appearance for a particular section? You would then need to use class tags for your lists. This can be achieved by first naming a class. I'll call mine jen1.

li.jen1 {list-style-type: circle; list-style-position: outside; color: purple;}

And then use the following HTML when displaying my list:

<ul>
<li class="jen1"> This is what my list will look like
</ul>

And the result:

Pretty spiffy right? You can do this for however many classes you wish. Sometimes, although it is not recommended, you can even format the font properties of your list. This could turn out pretty amazing on some browsers, but in other ones, it might look a little messed up so be prepared for that risk if you're about to change the list's text.