Advertisement
Google Ad Slot: content-top
CSS List
In CSS, lists can be styled in various ways, including changing the appearance of the list markers (bullets or numbers), adjusting spacing, or even creating custom marker styles. There are two main types of lists in HTML:
- Unordered Lists (
<ul>): Typically represented with bullets. - Ordered Lists (
<ol>): Typically represented with numbers.
Example
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
List style type:
The list-style-type specifies the marker style for list items.
Syntax:
list-style-type : none | disc | circle | square | decimal | lower-alpha | upper-roman;
Example
ul.a {
list-style-type: none;
}
ul.b {
list-style-type: circle;
}
ul.c {
list-style-type: disc;
}
ol.d {
list-style-type: square;
}
ol.e {
list-style-type: decimal;
}
ol.f {
list-style-type: lower-roman;
}
List style position:
The list-style-position specifies whether the marker is inside or outside the list item.
Syntax:
list-style-position : inside | outside;
Example
ul.a {
list-style-type: circle;
list-style-position: outside;
}
ul.b {
list-style-type: circle;
list-style-position: inside;
}
List style shorthand:
The list-style shorthand to combine all list styles in one declaration.
Syntax:
list-style: list-style-type list-style-position;
List style image:
The list-style-image allows you to use an image as the list marker.
Syntax:
list-style-image: url;
Custom style:
Example
ul.fancy-list {
list-style-type: none;
padding: 0;
}
ul.fancy-list li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
}
ul.fancy-list li::before {
content: '★'; /* Custom star bullet */
position: absolute;
left: 0;
top: -3px;
color: gold;
}