Week Five | Part Two: Styling List Items

List Item Attributes

There are nine ready-made values for you to use to change the attributes for ordered and unordered lists.

For ordered lists you can use decimal, lower-roman, upper-roman, lower-alpha, upper-alpha.

For unordered lists you have disc, circle, square, none.

To apply these choices you would style the list class selector in your style sheet just like any other selector and chose your attribute preferences.

ul { list-style-type: disc;}

You have more choices at your disposal, as well.

For example: list-style-image. Using this attribute will allow you to choose any type of image you create for an unordered list. The code looks very like what we used last week to style a Web page with a background image. So:

ul { list-style-image: url(bullet1.gif;}

You can further specify how you want the list text to display by using the list-style-position attribute. The values are inside and outside. In this example the selector is coded so that the text is forced to wrap around the list bullet:

ul { list-style-position: inside;}

Using the outside value would force all the text to display to the right of the list item like a hanging indent. This is the value I use in my lecture page's design.

List Item Display

You might be wondering if list item display can be applied to selectors you might not typically put into a list, and the answer is yes!

You could, for example, style your h3 selector into a list item. Doing so could raise the content relevance of the main points of particular list ... a good tactic if you are trying to optimize your Web page content for search engines like Google and MSN.

Another very common approach is to make hyperlinks into list items to create a navigation menu. That's because:

• You instantly turn the display value of the a selector from in-line to block.
• You automatically add a marker to the list item ... a useful design feature.
• Search engines give content relevance to hyperlinks ... a good SEO tactic.

To do this, you change the display value in the li selector for that list. This becomes tricky if you have a number of list items in your design because you have to make sure you are styling the correct selector.

This leads us to an important addition to what you have learned so far ... inheritance selectors.

Go to Week 5 Part 3.