An explanation of CSS List Style Types

Lists are a great way to present information to readers in your blog posts and are used in blog designs frequently to style menus and links as well. Thankfully, CSS allows you to customize your list markers much easier than basic HTML. I’m sure most of you reading this are using the default style type which came with your blog stylesheet however it’s worth trying a new type of style out and in this post I will show you how you can do just that. I will also show you how you can improve your sidebar by using images as list markers

In your stylesheet, the style of your lists is definined by the the ul and ol selectors. The example below shows you two examples of defining Unordered lists (for using the <ul> tag) and Ordered lists (for using the <ol> tag).

Example of an unordered list using the square style type

ul {
list-style-type: square;
}

Example of an ordered list using the decimal style type

ol {
list-style-type: decimal;
}

CSS List Style Types

In total there are 21 default list style types available in CSS (22 if you count the option to have no marker).

Generic Style Types :

• None
• Disc
• Circle
• Square
• Inherit (will have the same list style type as it’s parent)

Numeric Style Types :

• Decimal
• Decimal Leading Zero
• Armenian
• Georgian
• Lower Roman
• Upper Roman
• CJK Ideographic
• Hebrew

Alphabetic Style Types :

• Lower Alpha
• Upper Alpha
• Lower Greek
• Lower Latin
• Upper Latin
• Hiragana
• Hiragana Iroha
• Katakana
• Katakana Iroha

List-Style-Type Browser Compatibility

Unfortunately, older versions of Internet Explorer has some problems with this property. Firefox, Safari and Opera have no issue with it, neither does Internet Explorer 7. However, IE 4, 5 & 6 does not support the values armenian, decimal-leading-zero,georgian, lower-greek, hiragana, hiragana-iroha, katakana, katakana-iroha, cjk-ideographic, hebrew lower-latin or upper-latin. These values are used much less on the net than popular style types such as square or circle however it’s worth remembering the issues older verions of IE can have with this property.

Also, all versions of Internet Explorer do not currently support the inherit value (IE 7 and below).

Use an image as a list marker

CSS gives you many list style options however you may find that the default markers are not what you are looking for. Thankfully, CSS allows you to use images as markers so you are only limited by your imagination. The CSS Property to use an image for your list markers is list-style-image.

The example below illustrates how this works in practice :

Example of an unordered list using an image as a marker

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

In the above example the arrow image is stored in a subfolder called ‘images’. In CSS you can use the absolute path or the relative path. The absolute path is the full url of the image (eg. http://www.yoursite.com/themes/images/image.gif) whereas the relative path is the relative path from the stylesheet which is calling the image.

Currently I am using the square value in BloggingTips posts. This generates a list like this :

• Item 1
• Item 2

However, If I used the arrow code from the example before the list would look like this :

• Item 1
• Item 2

As I mentioned at the start of this post, lists are used in many areas of a blog design. The most common place lists are used is the sidebar. It’s easy to see how the list-style-image can be used to improve the appearance of your sidebar.

An example to show how list images can be used to improve your sidebar

One of the best places to use the list-style-image property is the subscription area of your blogs sidebar. Lets assume your subscription section currently looks like this :

Subscribe to my Blog

• Subscribe via RSS
• Subscribe via Email

The square marker looks ok but would look much better with images. Lets use and instead of those boring square icons!!

First thing we need to do is add two identifiers to our CSS stylesheet :
* I have used an ID instead of a class so that we have the option to link to it, however a class could have been used instead.

#rssicon {
list-style-image: url(rss.gif);
}
#mailicon{
list-style-image: url(mail.gif);
}

We can now link to our new icons via our sidebar template :

<h3>Subscribe to my Blog</h3>
<ul>
<li id="rssicon"><a href="http://www.yourblog.com/feed/" />Subscribe via RSS</li>
<li id="mailcon"><a href="http://www.url-subscribe-via-email.com" />Subscribe via Email</li>
</ul>

Now our subscription area looks like this :

Subscribe to my Blog

• Subscribe via RSS
• Subscribe via Email

Depending on how you styled your sidebar, you might encounter alignment problems with using the above code. Sometimes the image is placed outside of your content area because the browser has displayed the image marker as if it was the same size as a default marker. So if your image is say, 25 pixels wide, it may be displayed outside the content area because your browser expected a small marker (eg. •). There are a few ways you can resolve this.

The method which usually works is the ‘text-style-position’ property. This property can have the value ‘inside’ or ‘outside’ (You can also use ‘inherit’ however Inter Explorer doesn’t support it). By using ‘text-style-position:inside’ you force the image marker to be placed inside the standard list area. In practice this means it shifts a little from left to right and aligns with the rest of your list.

If you can’t seem to get the ‘list-style-position’ property to work, you can always resolve the problem by adding a left margin to your list style!

OverView

Lists are used all the time on blogs. They are used in posts, navigation menus, sidebars and footers too. Therefore, if you want to be able to style your blog design it’s important to understand how you can use lists to customize your design and enhance your posts.

If you have any questions regarding any of this please leave a comment