Working with Lists

In this lesson of the CSS tutorial, you will learn...
  1. To work with the list-style-type property.
  2. To work with the list-style-position property.
  3. To work with the list-style-image property.

List-style-type

The list-style-type property is used to specify if and how the list item marker should appear.

The values for unordered lists are glyphs. The values are listed below.

  • disc
  • circle
  • square

The values for ordered lists are numbering or alphabetic systems. The well-supported values are listed below.

  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha

The list-style-type property can also be set to none, in which case no list item marker will be used.

Code Sample: Lists/Demos/Lists.html

<html>
<head>
<title>CSS List</title>
<style type="text/css">
 ol {
  list-style-type:upper-roman;
  font-weight:bold;
  font-style:normal;
  font-size:x-large;
 }

  ol ol {
   list-style-type:upper-alpha;
   font-weight:bold;
   font-style:italic;
   font-size:smaller;
  }

   ol ol ol {
    list-style-type:decimal;
    font-weight:normal;
    font-style:normal;
   }

    ol ol ol ol {
     list-style-type:lower-roman;
     font-weight:normal;
     font-style:italic;
    }

     ol ol ol ol ol {
      list-style-type:lower-alpha;
      font-weight:normal;
      font-style:normal;
     }

 ul {
  list-style-type:disc;
  font-weight:bold;
  font-style:normal;
  font-size:x-large;
 }

  ul ul {
   list-style-type:circle;
   font-weight:bold;
   font-style:italic;
   font-size:smaller;
  }

   ul ul ul {
    list-style-type:square;
    font-weight:normal;
    font-style:normal;
   }

    ul ul ul ul {
     list-style-type:disc;
     font-weight:normal;
     font-style:italic;
    }

     ul ul ul ul ul {
      list-style-type:circle;
      font-weight:normal;
      font-style:normal;
     }
</style>
</head>
<body>
<h2>Ordered list</h2>
<ol>
 <li>Level 1
 <ol>
   <li>Level 2</li>
   <li>Level 2
    <ol>
     <li>Level 3</li>
     <li>Level 3
      <ol>
       <li>Level 4</li>
       <li>Level 4
        <ol>
         <li>Level 5</li>
         <li>Level 5</li>
         <li>Level 5</li>
        </ol>
       </li>
       <li>Level 4</li>
       <li>Level 4</li>
      </ol>
     </li>
     <li>Level 3</li>
     <li>Level 3</li>
    </ol>
   </li>
   <li>Level 2</li>
   <li>Level 2</li>
  </ol>
 </li>
 <li>Level 1
 <ol>
   <li>Level 2</li>
   <li>Level 2
    <ol>
     <li>Level 3</li>
     <li>Level 3
      <ol>
       <li>Level 4</li>
       <li>Level 4
        <ol>
         <li>Level 5</li>
         <li>Level 5</li>
         <li>Level 5</li>
        </ol>
       </li>
       <li>Level 4</li>
       <li>Level 4</li>
      </ol>
     </li>
     <li>Level 3</li>
     <li>Level 3</li>
    </ol>
   </li>
   <li>Level 2</li>
   <li>Level 2</li>
  </ol>
 </li>
</ol>

<h2>Unordered List</h2>
<ul>
 <li>Level 1
 <ul>
   <li>Level 2</li>
   <li>Level 2
    <ul>
     <li>Level 3</li>
     <li>Level 3
      <ul>
       <li>Level 4</li>
       <li>Level 4
        <ul>
         <li>Level 5</li>
         <li>Level 5</li>
         <li>Level 5</li>
        </ul>
       </li>
       <li>Level 4</li>
       <li>Level 4</li>
      </ul>
     </li>
     <li>Level 3</li>
     <li>Level 3</li>
    </ul>
   </li>
   <li>Level 2</li>
   <li>Level 2</li>
  </ul>
 </li>
 <li>Level 1
 <ul>
   <li>Level 2</li>
   <li>Level 2
    <ul>
     <li>Level 3</li>
     <li>Level 3
     <ul>
       <li>Level 4</li>
       <li>Level 4
        <ul>
         <li>Level 5</li>
         <li>Level 5</li>
         <li>Level 5</li>
        </ul>
       </li>
       <li>Level 4</li>
       <li>Level 4</li>
      </ul>
     </li>
     <li>Level 3</li>
     <li>Level 3</li>
    </ul>
   </li>
   <li>Level 2</li>
   <li>Level 2</li>
  </ul>
 </li>
</ul>
</body>
</html>
Code Explanation

The screenshots below show how the above code gets output to the browser.

List-style-position

The list-style-position is used to specify whether the list item marker should be left-aligned with the second and subsequent lines in the list item. The values are inside (aligned with subsequent lines) and outside (bumped to the left). The following code illustrates how list-style-position works.

Code Sample: Lists/Demos/ListStylePosition.html

<html>
<head>
<title>CSS List Style Position</title>
</head>
<body>
<h1>CSS List Style Position</h1>

<ul style="list-style-position:inside;">
 <li>When list-style-position is set to inside,
 the list item marker aligns with line 2 and 
 subsequent lines in the list item.</li>
</ul>

<ul style="list-style-position:outside;">
 <li>When list-style-position is set to outside,
 the list item marker does not align with line 2 
 and subsequent lines in the list item.
 Rather, it gets bumped to the left.</li>
</ul>

</body>
</html>
Code Explanation

The code above will render as follows.

List-style-image

The list-style-image is used to specify an image to be used as the list item marker. The syntax is shown below.

Syntax
selector {
 list-style-image:url(url);
}

Code Sample: Lists/Demos/ListImages.html

<html>
<head>
<title>CSS Image List</title>
<style type="text/css"> 
 ul.imageList {
  list-style-image:url(Images/bullet1.gif);
  font-weight:bold;
  font-style:normal;
  font-size:x-large;
 }
 
  ul.imageList ul {
   list-style-image:url(Images/bullet2.gif);
   font-weight:bold;
   font-style:italic;
   font-size:smaller;
  }
 
   ul.imageList ul ul {
    list-style-image:url(Images/bullet3.gif);
    font-weight:normal;
    font-style:normal;
   }
  
    ul.imageList ul ul ul {
     list-style-image:url(Images/bullet4.gif);
     font-weight:normal;
     font-style:italic;
    }
    
     ul.imageList ul ul ul ul {
      list-style-image:url(Images/bullet5.gif);
      font-weight:normal;
      font-style:normal;
     }
</style>
</head>
<body>
<h1>CSS Image List</h1>

<ul class="imageList">
 <li>Level 1
 <ul>
  <li>Level 2</li>
  <li>Level 2
  <ul>
   <li>Level 3</li>
   <li>Level 3
   <ul>
    <li>Level 4</li>
    <li>Level 4
    <ul>
     <li>Level 5</li>
     <li>Level 5</li>
     <li>Level 5</li>
    </ul>
    <li>Level 4</li>
    <li>Level 4</li>
   </ul>
   <li>Level 3</li>
   <li>Level 3</li>
  </ul>
  <li>Level 2</li>
  <li>Level 2</li>
 </ul>
 <li>Level 1</li>
 <ul>
  <li>Level 2</li>
  <li>Level 2
  <ul>
   <li>Level 3</li>
   <li>Level 3
   <ul>
    <li>Level 4</li>
    <li>Level 4
    <ul>
     <li>Level 5</li>
     <li>Level 5</li>
     <li>Level 5</li>
    </ul>
    <li>Level 4</li>
    <li>Level 4</li>
   </ul>
   <li>Level 3</li>
   <li>Level 3</li>
  </ul>
  <li>Level 2</li>
  <li>Level 2</li>
 </ul>
</ul>
</body>
</html>
Code Explanation

The above code will render the following.

Working with Lists Conclusion

In this lesson of the CSS tutorial, you have learned to use CSS list properties.

To continue to learn CSS go to the top of this page and click on the next lesson in this CSS Tutorial's Table of Contents.

Use of this website implies agreement to the following:

Copyright Information

All pages and graphics on this Web site are the property of Webucator, Inc. unless otherwise specified.

None of the content on this website may be redistributed or reproduced in any way, shape, or form without written permission from Webucator, Inc.

No Printing or saving of web pages

This content may not be printed or saved. It is for online use only.

Linking to this website

You may link to any of the pages on this website; however, you may not include the content in a frame or iframe without written permission from Webucator, Inc.

Warranties

This website is provided without warranty of any kind. There are no guarantees that use of the site will not be subject to interruptions. All direct or indirect risk related to use of the site is borne entirely by the user. All code and explanations provided on this site are provided without warranties to correctness, performance, fitness, merchantability, and/or any other warranty (whether expressed or implied).

For individual private use only

You agree not to use this online manual to deliver or receive training. If you are delivering or attending a class that is making use of this online manual, you are in violation of our terms of service. Please report any abuse to courseware@webucator.com. If you would like to deliver or receive training using this manual, please fill out the form at http://www.webucator.com/Contact.cfm.