The list properties used to control the presentation of list item markers.
Types of HTML Lists
There are three different types of list in HTML:
- Unordered lists — A list of items, where every list items are marked with bullets.
- Ordered lists — A list of items, where each list items are marked with numbers.
- Definition list — A list of items, with a description of each item.
To know more about lists, please check out the HTML Lists tutorial.
CSS List Properties
The CSS list properties allow you to:
- Control the shape or appearance of the marker.
- Specify an image for the marker rather than a bullet point or number.
- Set the distance between a marker and the text in the list.
- Specify whether the marker or bullet would appear inside or outside of the box containing the unordered or ordered list items.
These are the following properties which can be used to control lists.
The list-style-type Property
The list-style-type property sets the shape or style of bullet point (also known as amarker) in the case of unordered lists, and the style of numbering characters in ordered lists
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <title>Example of setting list styles</title> <style type="text/css"> ul { list-style-type: square; } ol { list-style-type: upper-roman; } </style> </head> <body> <h1>Setting style of bullet point</h1> <h2>Unordered List</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <h2>Ordered List</h2> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> </body> </html> |
The list-style-position Property
The list-style-position property determines whether the marker or bullet point appear inside or outside of the list item’s principal block boxes.
It takes the value inside or outside, with outside being the default. If the value inside is used, the lines will wrap under the marker instead of being indented.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <title>Example of setting list styles</title> <style type="text/css"> ul li { background: #ffc0cb; } ul.in li { list-style-position: inside; } ul.out li { list-style-position: outside; } </style> </head> <body> <h1>Setting position of bullet point</h1> <h2>Inside position</h2> <ul class="in"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <h2>Outside position</h2> <ul class="out"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html> |
The list-style-image Property
The list-style-image property sets an image as the bullet type for a list.
The style rule in the example below assigns a transparent PNG image “arrow.png” as the list marker for all the items in the unordered list.
|
1 2 3 |
ul li { list-style-image: url("arrow.png"); } |
The example above does not produce the same output in all browsers. Internet Explorer and Opera will display the image-marker slightly higher than Firefox, Chrome, and Safari. See below, for the cross browser solution of this problem.
Cross Browser Solution for Image Marker
When using an image as bullet using the list-style-image property, the bullets does not line up to the text accurately across the browsers. As a work-around, you can properly align bullet images via the background-image CSS property. First, set the list to have no bullets. Then, define a non-repeating background image for the list element.
The following example displays the image-marker equally in all browsers:
|
1 2 3 4 5 6 7 8 9 |
ul { list-style-type: none; } ul li { background-image: url("arrow.png"); background-position: 0px 5px; /* X-pos Y-pos (from top-left) */ background-repeat: no-repeat; padding-left: 20px; } |
The list-style Shorthand property
The list-style property is a shorthand property for defining all the three properties list-style-type, list-style-image, and list-style-position of a list in one place.
This style rule set the list marker for the ordered list items to be uppercase Latin letters that appear inside the list item’s principal block boxes:
|
1 2 3 |
ol { list-style: upper-latin inside; } |
Note:When using the shorthand property, the orders of the values are:
list-style-type|list-style-position|list-style-image. It doesn’t matter if one of the values above is missing, as long as the rest are in the specified order.
