CSS Lists: Customize Bullets and Numbering
Lists can be styled using various properties to control the appearance of bullet points or numbering, as well as the spacing and indentation of list items.
Here are some common CSS properties for styling lists:
The list-style-type
This property specifies the type of bullet or numbering for a list. The values can be "none", "disc", "circle", "square", "decimal", "lower-roman", "upper-roman", "lower-alpha", or "upper-alpha".
As an example:
In this example:
- We've added a
style element to the head section of the HTML file. - The style element contains CSS code that sets the list-style-type property of all ordered lists (<ol> elements) to use lowercase Roman numerals.
The list-style-position
The list-style-position property specifies whether the bullet or numbering should appear inside or outside the content box of the list item. The values can be"inside"or"outside".
As an example:
In this example:
- We've added a
style element to the head section of the HTML file. - The
style element contains CSS code that sets the list-style-position property of all unordered lists (<ul> elements) to inside.
The list-style-image
The list-style-image property allows you to use a custom image for the bullet or numbering instead of the default symbol. You can specify the URL of the image file as the value.
As an example:
In this example:
- We've added a
style element to the head section of the HTML file. - The style element contains CSS code that sets the list-style-image property of all unordered lists (<ul> elements) to use a bullet image named bullet.png.
The padding-left
The padding-left property specifies the amount of space between the left edge of the list item and the left edge of the content box.
As an example:
In this example:
- We've added a
style element to the head section of the HTML file. - The style element contains CSS code that sets the
padding-left property of all unordered lists (<ul> elements) to 20px, and the padding-left property of all ordered lists (<ol> elements) to 30px. - This adds some space between the bullet points or numbering and the text of each list item.
The margin-top and margin-bottom
These properties specify the amount of space between list items.
As an example:
In this example:
- We've added a
style element to the head section of the HTML file. - The style element contains CSS code that sets the margin-top property of all unordered lists (<ul> elements) to 20px, and the margin-bottom property of all unordered lists to 20px as well. - We've set the
margin-top property of all ordered lists (<ol> elements) to 30px, and the margin-bottom property of all ordered lists to 30px.
Remove Default Settings
An example of how to remove the default settings of a list:
In this example:
- We've added a
style element to the head section of the HTML file. - The style element contains CSS code that sets the list-style-type property of all unordered lists (<ul> elements) to none, which removes the default bullet points. - We've also set the
margin and padding properties to 0 to remove any default spacing around the list.
List - Shorthand property
An example of how to use the shorthand list-style property:
In this example:
- We've used the shorthand list-style property to set the list style for both unordered (
<ul>) and ordered (<ol>) lists. - The
list-style property includes three sub-properties: list-style-type, list-style-position, and list-style-image. - We've used the value square for
list-style-type to display square bullets, the value inside for list-style-position to position the bullets inside the list items, and the url() function to specify a custom image for the bullets.