CSS Lists

CSS Lists

Lists are very helpful in conveying a set of either numbered or bullet points. This chapter teaches you how to control list type, position, style, etc., using CSS.

All CSS List Properties

Property Description
list-style Sets all the properties for a list in one declaration.
list-style-image Specifies an image as the list-item marker.
list-style-position Specifies if the list-item markers should appear inside or outside the content flow.
list-style-type Specifies the type of list-item marker.

1) CSS list-style

The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:

Syntax:

ul{
    list-style:<list-style-type> || <list-style-position> || <list-style-image>;
  }

Example:

ul{
    list-style:square outside none;
  }

Which would be the same as the following longhand version:

ul{{
 list-style-type:square;;
 list-style-position:outside;;
 list-style-image:none;;
}

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ul>
</body>
</html>
Try it with the Editor

2) CSS list-style-type

The list-style-type property allows you to control the shape or style of bullet point (also known as a marker) in the case of unordered lists and the style of numbering characters in ordered lists.

Values for list-style-type:

The list-style-type property defines the type of list by setting the content of each marker, or bullet, on the list. Acceptable keyword values for list-style-type include:

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
ul.a {
    list-style-type: circle;
}
ul.b {
    list-style-type: square;
}
ol.c {
    list-style-type: upper-roman;
}
ol.d {
    list-style-type: lower-alpha;
}
</style>
</head>
<body>
//Example of unordered lists: <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>
//Example of ordered lists: <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>
Try it with the Editor

3) CSS list-style-image

The list-style-image allows you to specify an image so that you can use your own bullet style. The syntax is similar to the background-image property with the letters url starting the value of the property followed by the URL in brackets. If it does not find the given image then default bullets are used.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-image: url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ul>
</body>
</html>
Try it with the Editor

4) CSS list-style-position

The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
ul.a {
   list-style-position:inside;
}
ul.b {
   list-style-position:outside;
}
</style>
</head>
<body>
//The following list has list-style-position: inside:
<ul class="a">>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ul>
//The following list has list-style-position: outside:
<ul class="b">>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ul>
</body>
</html>
Try it with the Editor

Note:"list-style-position: outside" is the default setting.