How to Style a List with CSS

Use lists to make quick points, number steps in order, or create a menu for your site.

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

• Nothing new is needed in this section

Change or Remove the List Markers

1. The CSS property list-style-type is used to determine the type of marker a list uses or to completely remove the markers from the list. Possible values for list-style-type include: disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman and none.

2. If you want the list to display using capitalized Roman numerals, for example, the CSS rule would be:
   
   ol {
   list-style-type: upper-roman;
   }
   
   For other types of markers, simply change the value given to the property to the type of marker you want.

3. If you wanted no list markers at all, the CSS rule would be
   
   
   ol {
   list-style-type: none;
   }
   
   For an unordered list it would be:
   
   ul {
   list-style-type: none;
   }

4. To change the list marker to an image, use the list-style-image property. For example, suppose you wanted to use a small graphic of a star as a list item marker. Here's an example of how to give the URL of the graphic.
   
   ul {
   list-style-image: url(star.gif);
   }

Display the List Horizontally

5. The CSS property that will make a list display across a page horizontally is display. The value for display that you want to use to create horizontal lists is display: inline.

6. 
   The list is inline, with no markers.

   Start with an ordinary unordered list. Apply this example CSS rule
   
   li{
   list-style-type: none;
   display: inline;
   }
   
   The image shows what this CSS will do to an ordinary unordered bulleted list.

7. The list needs additional styling, perhaps borders and padding, but the basis of the technique is given in Step 2.
   
   See the next section for tips on how to style the list if it contains links.

Style a List as a Menu

8. In this section we'll look at a vertical menu bar or navbar. There is no need for images in the navbar, only CSS.

9. An unordered list is normally used as a menu. Each list item contains an A element to create a link. Part of the CSS applies to the list, part to the links.

10. Start by removing the list markers. Just to keep the example from filling a whole page, I'll add a width, too. For example,
    
    ul{
    list-style-type: none;
    width: 200px;
    }

11. It isn't necessary, but I'll add a solid black border to the example. This will make the list look boxed in and more like a navbar. Here's the CSS.
    
    li {
    border: 1px solid #000;
    }

12. This makes the list look like a menu bar, but the only part a user can click on is the actual word in the list item. You can make the whole boxed in area clickable by adding a CSS rule for the links.

13. 
    Click anywhere

    Use the descendant selector li a. This will select the links that are part of your list. Here's the CSS:
    
    li a {
    display: block;
    }
    
    The display: block rule makes the entire list item behave like a link and it all becomes clickable. You can see the pointing finger in the image, showing that anyplace inside the box can be clicked to operate the menu.

Tips & Warnings

• Use margins, padding and background colors or images to dress up the list.
• You can make the background color (or image) of each list item change when the user hovers over it with a CSS rule for the selector li a:hover.