CSS Lists
The List in CSS determines how the contents or items are listed in a certain fashion, i.e., they can be arranged either neatly or randomly, which aids in creating a clean webpage. Because they are adaptable and simple to handle, they can be used to organize large amounts of content.
The list's default style is borderless. The list can be divided into 2 Categories:
- Unordered List: By default, the list elements in unordered lists are marked with bullets, which are tiny black circles.
- Ordered List: The list items in ordered lists are identified by numbers and letters.
1. List Item Marker:
This property indicates whether the list is ordered or unordered when an item marker is used. The list-style-type attribute determines how a list item element's list item marker should look. A disc is its default value.
Syntax
2. Image as List Marker:
The image is designated as a list item marker by this property. An image can be set as the list item marker using the list-style-image attribute. "none" is its default value.
Syntax
3. List Marker Position:
This attribute describes where the list item markers should be placed. The position of the marker with respect to a list item is set using the list-style-position attribute. "Outside" is the default value for it.
Position markers come in 2 varieties:
list-style-position: outside;
The bullet points in this list will be outside the list item because of the list-style-position of outside. The list's beginning of each line will be vertically oriented.
Syntax
list-style-position: inside;
The bullet points in this list will be inside the list due to the list-style-position being inside. The line and the bullet points will be vertically aligned.
Syntax
Shorthand Property:
Using this property, we can set every list property with a single command. The three types of property are position, type, and image. The default value is inserted in the event that any of the properties are missing.
Styling Lists:
The list can be styled using CSS. The lists can have custom backgrounds, padding, borders, and colours.
Nested List:
Lists can also be nested, therefore this is a list. We require list nesting because sections have sub-sections.
FAQs
To style nested lists differently from their parent lists, you can use the child combinator selector (>). For example, to style a nested unordered list differently from its parent unordered list, you can use the following CSS code:
ul {
/* parent list styles */
}
ul > li > ul {
/* nested list styles */
}In this example, the parent unordered list will have its own styles, while the nested unordered list will have different styles specified using the child combinator selector.
To create custom counters for your lists, you can use the CSS counter-reset and counter-increment properties. First, use the counter-reset property to set the starting value of the counter. Then, use the counter-increment property to increment the counter for each list item. You can also use the content property to display the counter value before or after each list item. Here's an example:
ul {
counter-reset: my-counter 1; /* set starting value to 1 */
}
li {
counter-increment: my-counter; /* increment counter for each list item */
content: counter(my-counter) ". "; /* display counter value before each list item */
}Yes, you can create horizontal lists in CSS by using the display: inline-block; property on the list items. This will cause the list items to appear side-by-side instead of stacked on top of each other. You can also set the list-style: none; property on the unordered list to remove the default bullet points. Here is an example code snippet:
ul {
list-style: none;
}
li {
display: inline-block;
margin-right: 10px;
}This will create a horizontal list with a 10px margin between each list item. You can adjust the margin value to your liking.