You can style HTML lists (<ol>, <ul>, <li>, <dl>, <dt>, <dd>) using CSS properties like list style to control their appearance. CSS offers powerful and flexible styling options compared to the older HTML attributes. The primary CSS properties for styling list markers are list-style-type, list-style-image, and list-style-position.
list-style-type:
This property defines the shape or type of the list-item marker. It is typically used with unordered (<ul>) and ordered (<ol>) lists.
/* Unordered list with square bullets */
ul.square-bullets {
list-style-type: square; /* */
}
/* Ordered list with lowercase Roman numerals */
ol.lower-roman {
list-style-type: lower-roman; /* */
}
/* Removing default markers */
ul.no-bullets, ol.no-numbers {
list-style-type: none; /* */
}Acceptable values for list-style-type for unordered lists include disc (default), circle, and square. For ordered lists, common values are decimal (default), decimal-leading-zero, lower-roman, upper-roman, lower-alpha, and upper-alpha. CSS2 introduced more values, especially for foreign languages.
list-style-image
This property specifies an image to be used as the list-item marker. It accepts a url() pointing to the image or the value none (default).
/* Using a custom image as a bullet point */
ul.custom-bullets {
list-style-image: url('images/tick.png'); /* */
}list-style-position
This property determines the position of the list-item marker relative to the content of the list item. It accepts two values:
- outside (default): The marker is outside the list item content.
- inside: The marker is inside the list item content.
/* Placing the bullet points inside the list item content */
ul.inside-bullets {
list-style-position: inside; /* */
}list-style (Shorthand Property):
This property allows you to set all three list-style properties in a single declaration. The order of the values is suggested as list-style-type, list-style-position, and list-style-image, but in practice, they can appear in any order.
/* Combining type, position, and image */
ul.styled-list {
list-style: square inside url('images/check.png'); /* */
}
/* Omitting the image */
ol.numbered-inside {
list-style: decimal inside; /* */
}It’s important to note that for cross-browser consistency, you need to specifically set the margins and paddings of the <li> elements and their containing <ul> or <ol> elements, as default values can vary between browsers.
CSS is also used to style lists for other purposes, such as creating navigation menus by displaying list items side by side using display: inline.
While HTML offers the type attribute for <ol> and <ul> to specify numbering or bullet styles, it is better practice to use the CSS list-style-type property for this purpose, as it separates presentation from structure.
CSS3 Topics