How to Style a List with CSS

Contributor

By Virginia DeBolt
eHow Contributing Writer

Article Rating:

(3 Ratings)

A styled list can create an attractive menu bar on a website.

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

Difficulty: Moderately Challenging

Instructions

Step 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.
Step 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.
Step 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;
}
Step 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);
}

Step 1

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.
Step 2

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.
Step 3

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.

Step 1

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

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.
Step 3

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;
}
Step 4

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;
}
Step 5

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.
Step 6

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.

Post a Comment