Knowing More about CSS Lists

CSS lists are used for creating lists on pages. There are many useful properties that are available for this. With HTML there are only two types of lists, the ordered and the unordered. In the unordered list, the items are marked by bullets, while in the ordered; the items are marked by numbers or letters. By using CSS list properties, the manner by which lists can be created can be expanded even further.

Problem with Different Browsers

Before you learn how to use CSS list properties, you need to know that there are certain problems connected with it. It has something to do with the fact that different browsers tend to show lists using CSS list properties differently from each other. This means it might not end up looking the way that you want it to. So before you start creating your page, you need to consider the way that you want the list to appear on the different browser platforms. The good news is that if the browser does not support the property that you have picked, then it would just show it as a normal list and you wouldn’t be losing that much.

The CSS List Properties

There are four CSS list properties that you can use. These are the following:

    • The list-style image
    • The list-style type
    • The list-style position
    • The list-style

 

In the list-style type you can determine the kind of bullet points that would mark off the elements on a list. In list-style image you can use an image or a custom graphic design as bullets for the list that you would be making. The list-style position is used when items in the list are longer than one line. It can define the way that the item would look like on the page. For example, it can be that second line can be made to align with the first or with the bullet.

Item Markers for Lists

There are different types of markers that can be used with the list-style type:

ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}

In the examples, the ul would refer to an unordered list while ol would refer to an ordered list.

Using an Image as a Marker

There are times when you might want to try and be more creative with the page that you are making. You might be bored with using shapes, letters and numbers as markers for the lists. You can use an image as an item marker by using the list-style image property. This is an example code for a list that uses an image as a marker:

ul
{
list-style-image: url('sqblue.gif');
}

Shorthand for CSS List Properties

It is also possible to use a shortcut for the CSS List properties. By using shorthand you might be able to define all the properties that you need for the list in one single property.

Again, you should keep in mind that CSS list might display differently on different browsers so you need to be careful about that.