CSS List Styles - Customizing Lists for Effective Web Design

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>

</ul>

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

Try it yourself

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;

}

Try it yourself

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;

}

Try it yourself

List style shorthand:

The list-style shorthand to combine all list styles in one declaration.

Syntax:

list-style: list-style-type list-style-position;

Example

ul {

list-style: circle inside;

}

Try it yourself

List style image:

The list-style-image allows you to use an image as the list marker.

Syntax:

list-style-image: url;

Example

ul {

list-style-image: url('/assets/images/list_style.jpeg');

}

Try it yourself

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;

}

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.