Other Properties

The last batch of CSS goodies...

The properties in this section deal with lists. If you want to brush up on your lists then click here.

LIST-STYLE-TYPE

This property lets you choose from some predefined bullets (for UL) or number systems (OL). Use these to redefine the LI tags (or UL and OL to affect entire lists). If you want different lists to have different bullets, remember that you can use classes to have different types of UL, OL and LI tags.

The possible settings for this property are: DISC, CIRCLE, SQUARE, DECIMAL, LOWER-ROMAN, UPPER-ROMAN, LOWER-ALPHA, UPPER-ALPHA and NONE.

LI.CIRCLE { LIST-STYLE-TYPE: CIRCLE }
LI.SQUARE { LIST-STYLE-TYPE: SQUARE }

Let's do something a bit more complicated. Imagine you use a lot of nested OL lists and you want the main list to be numbered normally (1, 2, 3...) but you want the second list (within that list) to have lowercase Roman numerals. This effect could be achieved by using contextual elements as follows:

OL { LIST-STYLE-TYPE: DECIMAL }
OL OL { LIST-STYLE-TYPE: LOWER-ROMAN }

LIST-STYLE-IMAGE

If you want an unordered list (UL) but don't like any of the bullets mentioned above, you can use your own images as bullets. Simply set this property to be the path to the image file:

LI.CUSTOMBULLET { LIST-STYLE-IMAGE: URL(bullet.gif) }

Place the path to the file in the brackets. This will override the LIST-STYLE-TYPE property, if one has been specified.

Note that this property will not work in Netscape, but you could still use it giving IE users a pretty bullet while those with Navigator are left with a standard one.

LIST-STYLE-POSITION

Normally list items appear indented so that the bullet or number appears to the left of the text. If you want the text to go underneath the bullet or number, so that the whole thing flows in one straight block, set this property to INSIDE (i.e. the bullet is inside the text). The default setting which you'll normally see if OUTSIDE.

Note that this property does not work with Netscape.

LIST-STYLE

Remember the FONT property that let you set many properties at once? Here's another one that lets you set all 3 list properties in one foul swoop. As before, stick to the order shown (LIST-STYLE-TYPE, LIST-STYLE-IMAGE, LIST-STYLE-POSTION) and separate them with spaces. Leave out any that you don't want to use.

LI { LIST-STYLE: DISC INSIDE }
LI.ANOTHER { LIST-STYLE: URL(bullet.gif) INSIDE }

And yet again, this won't work in Netscape. Sorry.

That's Your Lot!

Hopefully I've given you enough to be getting on with. There are some more CSS properties that I've missed out, mainly because they're obscure or not supported. If you are interested though, remember that address I gave you a few pages ago: http://www.webreview.com/style/index.shtml. There you'll find the complete CSS 1 and 2 specs plus loads of extra info.

It's been a long haul, but that's my CSS lecture done. Matron, my pills please!