CSS Lists There are various CSS properties that can be used to control lists. Lists can be classified as ordered lists and unordered lists. In ordered lists, marking of the list items is with alphabet and numbers, whereas in unordered lists, the list items are marked using bullets. We can style the lists using CSS. CSS list properties allow us to:
- Set the distance between the text and the marker in the list.
- Specify an image for the marker instead of using the number or bullet point.
- Control the marker appearance and shape.
- Place the marker outside or inside the box that contains the list items.
- Set the background colors to list items and lists.
The CSS properties to style the lists are given as follows:
- list-style-type: This property is responsible for controlling the appearance and shape of the marker.
- list-style-image: It sets an image for the marker instead of the number or a bullet point.
- list-style-position: It specifies the position of the marker.
- list-style: It is the shorthand property of the above properties.
- marker-offset: It is used to specify the distance between the text and the marker. It is unsupported in IE6 or Netscape 7.
Let's understand the above properties in detail, along with an example of each. The list-style-type property It allows us to change the default list type of marker to any other type such as square, circle, roman numerals, Latin letters, and many more. By default, the ordered list items are numbered with Arabic numerals (1, 2, 3, etc.), and the items in an unordered list are marked with round bullets (•). If we set its value to none, it will remove the markers/bullets. Note: The list also includes the default padding and margin. To remove this, we need to add padding:0 and margin:0 to and The illustration of using this property is given as follows: Example
Test it Now The list-style-position property It represents whether the appearing of the marker is inside or outside of the box containing the bullet points. It includes two values. inside: It means that the bullet points will be in the list item. In this, if the text goes on the second line, then the text will be wrap under the marker. outside: It represents that the bullet points will be outside the list item. It is the default value. The following example explains it more clearly. Example
Test it Now The list-style-image property It specifies an image as the marker. Using this property, we can set the image bullets. Its syntax is similar to the background-image property. If it does not find the corresponding image, the default bullets will be used. Example
Test it Now The list-style property It is the shorthand property that is used to set all list properties in one expression. The order of the values of this property is type, position, and image. But if any property value is missing, then the default value will be inserted. Example
Test it Now Styling Lists with colors To make the lists more attractive and interesting, we can style lists with colors. The addition of anything to the or tag will affect the entire list, whereas the addition to the individual - tag will affect the items of the corresponding list.
Example
Test it Now
|