CSS List Style Wizard

Unordered List (UL)
list-style-type	inherit disc circle square none
list-style-image	inherit   none
list-style-position	inside outside
Ordered List (OL)
list-style-type	decimal lower-roman upper-roman lower-alpha upper-alpha lower-greek none inherit custom: decimal-leading-zero lower-latin upper-latin armenian georgian hebrew inherit none cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha
list-style-position	inside outside
Ordered List (OL) - Level Two
list-style-type	decimal lower-roman upper-roman lower-alpha upper-alpha none inherit
Unordered List Ordered List One Fish Two Fish Red Fish Blue Fish That Sam-I-am! That Sam-I-am! I do not like that Sam-I-am!

CSS and HTML Source Code

The box below shows example CSS and HTML source code.
The code will update dynamically as you press the buttons above.
You can select text in the box and then copy and paste the starter code.

CSS List Style Wizard

Welcome to the CSS List Style Wizard! Use this wizard to experiment with list styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page.

List Style Notes

You can use any list style property for either ordered or unordered lists. The alphanumerics make more sense for ordered lists, while images and shapes make more sense for unordered lists. The special types of "none" and "inherit" may also be used.

Use cascading to apply style properties to sub-levels of the list. In the example code, "ol.sample ol" is the selector for the ordered lists that are children of the "sample" ordered list. You also use cascading to apply styles to the text in the lists. Text styles should be applied to the "li" elements of the particular list, rather than to the list itself.

For information on dynamically setting styles with Javascript and how the HTML toggle buttons work, please see HTML and CSS Table Border Style Wizard. The wizards are cross-browser compatible with Firefox, Netscape, and Internet Explorer, but they do not work with Opera 8 or IE5 for the Mac. The custom and "inherit" list style types do not work in IE6.

CSS Image Bullets

As you may notice in the wizard, when using images as the bullet, the bullet does not line up to the text in an attractive way. The bottom of the bullet image aligns to the baseline of the text, and there is currently no way to change this behavior in CSS. Therefore, using all but very small images as bullets is imperfect.

As a work-around, you can properly align bullet images via the background image CSS property. First, set set the list to have no bullets. Then, define a non-repeating background image for the LI tag, with the image shifted down slightly. Set the "line-height" to accomodate the bullet image, and use "padding-left" to shift the text to the left of the bullet.

You can see the style sheet and example below. Use the hide/show buttons to see the border of the LI element, which you can use as guidelines when adjusting the position of your bullets.

ul.image { list-style-type:none; }
ul.image li {
	background-image: url('p359.php');
	background-position: 0px 50%; /* X-pos Y-pos (from top-left) */
	background-repeat: no-repeat;
	padding-left: 44px;
	line-height: 32px;
	border: 0px solid black;
}

More CSS Wizards

• HTML and CSS Table Border Style Wizard
• CSS Font and Text Style Wizard

Recommended Books

Dynamic HTML: The Definitive Reference (2nd Edition)

JavaScript: The Definitive Guide

Cascading Style Sheets 2.0 Programmer's Reference