CSS Lists
The CSS list properties is used to allows you to set all the list properties:
- Set different list item markers for ordered lists.
- Set different list item markers for unordered lists.
- Set an image as the list item marker
In HTML, there are two type of lists:
- Unlorder lists: the list items are marked with bullets.
- Order lists: the list items are marked with numbers or letters.
In CSS, lists can be styled further, and images can be used as the list marker. There are different list item markers with the list-style-type property.
The CSS properties to style the lists are given as follows:
list-style-type: CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.
Example
Ordered lists
Unordered lists
list-style-image: CSS property to specify an image as the list item marker.
Example
list-style-position: It specifies the position of the marker.
Shorthand properties are CSS properties that
let you set the values of multiple other CSS properties simultaneously.
Using a shorthand property, you can write more concise (and often more
readable) style sheets, saving time and energy.
List-Shorthand property: All the list properties can be shortened by utilizing the list-style shorthand property which combines numerous properties into one property.
Example
All CSS List Properties
| Property | Description |
| list-style: | Sets all the properties for a list in one declaration |
| list-style-image: | Specifies an image as the list-item marker |
| list-style-type: | Specifies the type of list-item marker |
| list-style-position: | Specifies if the list-item markers should appear inside or outside the content flow |
Leave a comment
No Cmomments yet