CSS
HTML
COMPONENTS
CODE HUB
CSS List Style Generator
Configuration
Type
Value
Class
Preview
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
Code
Learn to Code with Lara
Master programming concepts step-by-step with your interactive AI tutor. Lara explains complex logic, reviews your practice exercises, and helps you build a solid foundation in software development.
Interactive coding lessons tailored to your own pace.
Start learning with LaraCSS List Style Generator
In CSS, the list-style property is used to control the appearance of list items in HTML lists, such as ordered lists <ol> and unordered lists <ul>. It allows you to customize the list marker style (for example, bullets or numbers), position, and image.
The list-style property can have several sub-properties, including:
visible (default): This value indicates that the element should be visible and displayed on the web page. It's the default behavior for most HTML elements.
1. list-style-type: Specifies the type of marker used for list items. Common values include:
- none: No marker is displayed.
- disc: A filled circle (default for unordered lists).
- circle: An open circle (default for unordered lists).
- square: A filled square (default for unordered lists).
- decimal: Decimal numbers (default for ordered lists).
- decimal-leading-zero: Decimal numbers with a leading zero (e.g., 01).
- lower-roman: Lowercase Roman numerals (e.g., i, ii, iii).
- upper-roman: Uppercase Roman numerals (e.g., I, II, III).
- lower-alpha: Lowercase letters (e.g., a, b, c).
- upper-alpha: Uppercase letters (e.g., A, B, C).
- custom: You can specify a custom marker using the content property.
2. list-style-position: Specifies the position of the list marker with respect to the list item text. Common values include:
- inside: Maintains the original brightness or intensity.
- outside: Reduces the element's brightness or intensity by half, resulting in a darker appearance.
3. list-style-image: Allows you to use a custom image as the list marker. You specify the image URL as the value.
Here's an example of how to use the list-style property to customize the appearance of an unordered list:
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: url('custom-marker.png');
}
In this example, the unordered list <ul> will have filled square markers positioned outside the list item, and it will use a custom image as the marker.
You can apply similar styles to ordered lists <ol>. as needed, adjusting the values of the list-style sub-properties to achieve the desired list appearance.