Unordered Lists & Customization

...different type of unordered list attributes

ID: HTML#5
Date Added: 2007-22-12
Category: HTML
Difficulty: Easy

CSS Default List Types

Lists are very useful; especially those defined in the CSS in order to make viewing pleasures much more... well, pleasant. There are two ways to do this: you can change the way the list look by changing the default bullet entry. You can make it square, or donut-shaped, but according to w3schools, here is the default CSS list types. (You can see them in action here)

How to change the list style? Easy! Here's the code:

ul {
list-style-type: TYPE HERE;
}

Where you see TYPE HERE, it should be replaced with one of the list type from above.

Image Lists

Sometimes the default list gets a little boring, especially when they don't match with your layout. There is a way to make an image, and turn it into a list bullet. For example, the bullets on my navigation are customized, and that's exactly what I'll be showing with the next code:

ul {
list-style-image: url(images/listbullet.gif);
}

The bolded area should be replaced with the link relative to where your bullet is uploaded to =)

Customizing

You can also customize the way the list is done: inside or outside. The example can be viewed on this page. Here's the code to achieve that:

ul {
list-style-position: inside/outside
}

You can further customize how your lists look: the indentation, and margins. All you have to do is add each property under your ul value:

ul {
list-style-type: square;
margin: 2px 4px auto;
padding: 2px;
}

« back · clear ¦ reload · forward »

Site

For You

Designs

Media

Unordered Lists & Customization

CSS Default List Types

Image Lists

Customizing