CSS List Properties

Control List Display With CSS

CSS allows you to control the display of list markers (bullets/numbers). You can set the following list style properties:

"list-style, list-style-image, list-style-type, list-style-position"

Lets take a look at what they all do.

list-style-type

Using the CSS list-style-type property allows you to set the bullet or marker for a list item. Values for unordered lists include: "none, disc, circle, square". Some values common for ordered lists include "lower-roman, upper-roman, lower-alpha, upper-alpha, decimal-leading-zero"

Css Code:

ul {
  list-style-type : square;
}
ol {
  list-style-type :upper-roman;
}

HTML Code:

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
<br />
<ol>
	<li>Mike</li>
	<li>George</li>
	<li>Suzy</li>
</ol>

Browser Display

  • Item 1
  • Item 2
  • Item 3

  1. Mike
  2. George
  3. Suzy

list-style-image

You can use the list-style-image property to specify an image to use as the marker for list items. The value format to use as for this property is "url('path/to/image.jpg')" or yo can set it to none.

Css Code:

ul {
  list-style-image : url('images/next.png');
}

HTML Code:

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

Browser Display:


  • Item 1
  • Item 2
  • Item 3

list-style-position

You can set whether you want the list marker to appear inside or outside a list item

Css Code:

ul{
  list-style-type :disc;
  list-style-position : outside;
}
li {
  border : 1px solid black;
}

HTML Code:

<ul>
	<li>Inside</li>
	<li>Outside</li>
</ul>

Browser Display


  • Inside
  • Outside

list-style

The shorthand version that allows you to set all the list style properties in one declaration

Css Code:

ul {
  list-style : circle inside url(images/li.gif);
}

CSS Tutorials