Tutorials

Learn web design and programming with our free video and text tutorials.

Advertisements

Web Designer? Design and market your own professional website with easy-to-use tools.

Partners

CSS List Tutorials

How To Style Un-ordered Lists with CSS

The list-style-type property is applied to either <ul> or <li> elements and is used to change the style of the list item marker.

Un-ordered lists, lists made with the <ul> element, can have a possibility of four different styles: disc, circle, square and none.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<link rel="stylesheet" type="text/css" href="" media="screen,projection" />

<style type="text/css">

ul.disc
{
list-style-type:disc;
margin:0 0 0 10px;
}
ul.circle
{
list-style-type:circle;
margin:0 0 0 10px;
}
ul.square
{
list-style-type:square;
margin:0 0 0 10px;
}
ul.none
{
list-style-type:none;
margin:0 0 0 10px;
}

</style>
</head>
<body>

<ul class="disc">
<li>this list has a disc style list marker</li>
<li>this list has a disc style list marker</li>
</ul>

<ul class="circle">
<li>this list has a circle style list marker</li>
<li>this list has a circle style list marker</li>
</ul>

<ul class="square">
<li>this list has a square style list marker</li>
<li>this list has a square style list marker</li>
</ul>

<ul class="none">
<li>this list has a list marker style of none</li>
<li>this list has a list marker style of none</li>
</ul>

</body>
</html>

The code above produces the un-ordered lists below.

  • this list has a disc style list marker
  • this list has a disc style list marker
  • this list has a circle style list marker
  • this list has a circle style list marker
  • this list has a square style list marker
  • this list has a square style list marker
  • this list has a list marker style of none
  • this list has a list marker style of none

How To Style Ordered Lists with CSS

The list-style-type property is used to style ordered (X)HTML lists. Ordered (X)HTML lists can have either a lettering or numbering style.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<link rel="stylesheet" type="text/css" href="" media="screen,projection" />

<style type="text/css">

ol.decimal
{
list-style-type:decimal;
margin:0 0 0 10px;
}
ol.lower-roman
{
list-style-type:lower-roman;
margin:0 0 0 10px;
}
ol.upper-roman
{
list-style-type:upper-roman;
margin:0 0 0 10px;
}
ol.lower-alpha
{
list-style-type:lower-alpha;
margin:0 0 0 10px;
}
ol.upper-alpha
{
list-style-type:upper-alpha;
margin:0 0 0 10px;
}
ol.none
{
list-style-type:none;
margin:0 0 0 10px;
}

</style>
</head>
<body>

<ol class="disc">
<li>this list has a disc style list marker</li>
<li>this list has a disc style list marker</li>
</ol>

<ol class="circle">
<li>this list has a circle style list marker</li>
<li>this list has a circle style list marker</li>
</ol>

<ol class="square">
<li>this list has a square style list marker</li>
<li>this list has a square style list marker</li>
</ol>

<ol class="none">
<li>this list has a list marker style of none</li>
<li>this list has a list marker style of none</li>
</ol>

</body>
</html>

The code above produces the ordered lists below.

  1. this ordered list has a decimal style list marker
  2. this ordered list has a decimal style list marker
  1. this ordered list has a lower-roman style list marker
  2. this ordered list has a lower-roman style list marker
  1. this ordered list has a upper-roman style list marker
  2. this ordered list has a upper-roman style list marker
  1. this ordered list has a lower-alpha style list marker
  2. this ordered list has a lower-alpha style list marker
  1. this ordered list has a upper-alpha style list marker
  2. this ordered list has a upper-alpha style list marker
  1. this ordered list has a list marker style of none
  2. this ordered list has a list marker style of none

How To Use Images as List-Item Markers

The list-style-image property allows you to use an image as a list-item marker, however, the recommended method for using images as list-item markers is to add an image to the background of the list-item and to position the image where you want it.

The code below shows you how to use a background image as list-item marker

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>

<link rel="stylesheet" type="text/css" href="" media="screen,projection" />

<style type="text/css">

ul
{
margin:0;
padding:0;
}
ul li
{
margin:0;
padding:0 0 0 25px;// this gives the list item a padding of 25px
display:block;
background:url("image.jpg") 0 0 no-repeat;
}

</style>
<html>
<body>
<ul>
<li>list item</li>
<li>list item</li>
</ul>
</body>
</html>

The code above produces the list below.

  • list item
  • list item