CSS Listing Styles

Details

Published on Friday, 17 February 2012 12:03

Everyone creates lists. Whether its a grocery list or a list of people you dislike, there's always a use for a list. This includes writing on the internet. The tags <ol> (ordered list) and <ul> (unordered list) help create a sort of casing for your list and the tag <li> is each item that you are listing.

Here the syntax of an ordered list:

1. Apple
2. Banana
3. Cranberry
4. Donut

That creates this:

1. Apple
2. Banana
3. Cranberry
4. Donut

As you can see, an ordered list can help display the items in order by using numbers or letters or even roman numerals.

Now lets create an unordered list:

• Apple
• Banana
• Cranberry
• Donut

That creates this:

• Apple
• Banana
• Cranberry
• Donut

The difference between an ordered list and an unordered list is pretty much the addition of numbers, letters or numerals to help give your list some type of order, while an unordered list simply shows your items one after another with a bullet point and can be used for many great things, such as menus.

Unordered List CSS Styles

Now you may have noticed many sites with different types of bullet points on their lists. You envy their cleverness and wish that you had a square bullet point too. Not to fear, because like any other styling this can be taken care of with CSS. You can even use images in place of the default collection of bullets.

First things first, you must create your list so that when you are ready to style it, you can easily watch your changes. Go back to the above and use the unordered list to do so. After that, you can either add styles directly to the <ul> or <ol> or try adding classes for each type of list. Lets try adding the bullet style directly to the tag first.

• Apple
• Banana
• Cranberry
• Donut

• Apple
• Banana
• Cranberry
• Donut

• Apple
• Banana
• Cranberry
• Donut

Our CSS property is list-style or list-style-type. For both properties, you can specify square, disc, circle, etc, but list-style allows you to specify more, such as an image or the position of the bullet. List-style-type only accepts the type.

Now lets try adding classes to the tags instead, for cleaner looking code. So next, you're going to have to create that CSS sheet. It can be either an external stylesheet or internal stylesheet, as long as it's connected to the page with your list. Add the below classes for your tags.

OR

Now you can just apply the class to various lists, or you can use just the plain element and apply one style to all lists.

• Apple
• Banana
• Cranberry
• Donut

• Apple
• Banana
• Cranberry
• Donut

• Apple
• Banana
• Cranberry
• Donut

Now you will see the results for either when you refresh your webpage.

• Apple
• Banana
• Cranberry
• Donut

• Apple
• Banana
• Cranberry
• Donut

• Apple
• Banana
• Cranberry
• Donut

Lets move on to Ordered Lists.