CSS Lists (Lists)

List properties are used to control the display of list item markers.

Types of HTML lists

There are three different types of lists in HTML:

• Unordered list — project list, where each list item is marked with a bullet point.

• Ordered list — project list, where each list item is numbered.

• Definition list -project list, which includes a description of each item.

For more information about lists, please seeHTML listtutorial.

CSS style list

CSS provides several properties for styling the most commonly used unordered and ordered lists. These CSS list properties usually allow you to:

• Control the shape or appearance of the marker.

• Specify the image of the marker instead of the bullet point or number.

• Set the distance between the marker and the list text.

• Specifies whether the marker or bullet point will appear inside or outside the box containing the unordered list or ordered list.

List style type

By default,Ordered listitems within are marked with Arabic numerals (1,2,3etc.) are numbered, while inUnordered list, with the items marked by circular bullet points. However, you can use the 'list'-style-The 'type' property changes this default list marker type to any other type, such as circle, square, Roman numerals, Latin letters, etc.

ul　{
　　　　list-style-type: square;
}
ol　{
　　　　list-style-type: upper-roman;
}

Change the position of the list marker

By default, the list marker is located outside the list item box. However, you can use the 'list'-style-The 'position' property specifies whether the marker or bullet point appears inside or outside the list item border.

This property takes the values 'inside' or 'outside', with 'outside' being the default. If the value 'inside' is used, these lines will wrap around the marker instead of being indented.

ul.in li {
　　　　list-style-position: inside;
}
ul.out li {
　　　　list-style-position: outside;
}

Use the image as the list item marker

You can also use 'list'-style-The 'image' property sets the image as the list item marker.

The style rules in the following example assign a transparent PNG image 'arrow.png' as the list item marker to all items in the unordered list.

ul　li　{
　　　　list-style-image:　url("arrow.png");
}

The above example does not produce the same output in all browsers. Internet Explorer and Opera will display image markers slightly higher than Firefox, Chrome, and Safari.

Cross-browser solution for image markers

When using the list-style-When the image property is used as a list marker, the list marker cannot be aligned accurately with the text in the browser. The solution is to use background-image CSS properties align the list markers correctly. First, set the list to have no list markers. Then, define a non-repeating background image for the list elements.

The following examples display the image markers evenly in all browsers:

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;
}

Shorthand properties of list styles

The list-The style property is a shorthand property that defines all three properties: list-style-type, list-style-image and list-style-position in a list at one place.

This style rule sets the list markers of the ordered list items to uppercase Latin letters, which appear at the beginning of the list items:

ol　{
　　　　list-style:　upper-latin　inside;
}