Please note, this is a STATIC archive of website webdevelopmenttutorials.com from 20 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://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