Open In App

CSS list-style Property

Last Updated : 27 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The list-style property in CSS is used to set the list style. the CSS list-style property is a shorthand for setting the list-style-type, list-style-position, and list-style-image properties in one declaration. It defines the appearance of list item markers, including their type (e.g., disc, circle), position, and custom images.

Syntax

list-style: list-style-type list-style-position list-style-image|initial|inherit;

Property Values

Name

Description

list-style-type:

This value sets a list item element’s marker (such as a disc, character, or custom counter style). Its default value is a disc.

list-style-position

This value sets the position of the marker relative to a list item. Its default value is “outside”.

list-style-image

This value sets an image to be used as the list item marker. Its default value is “none”.

We will understand the concepts of list-style property through the examples.

Methods to Use CSS List Style Property

1. Using list-style property value as Square

The CSS list-style property set to square renders square bullets for unordered lists (<ul>). It replaces default bullets with filled squares, enhancing visual presentation and list item differentiation on web pages.

Example 1: This example illustrates the use of the list-style property where the position value is set to inside.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS list-style Property </title>
    <style>
        ul {
            list-style: square inside url(
"https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        CSS list-style Property
    </h2>

    <p>Sorting Algorithms</p>

    <ul>
        <li>Bubble Sort</li>
        <li>Selection Sort</li>
        <li>Merge Sort</li>
    </ul>
</body>

</html>

Output:

liststyle

2. Using list-style property value as Square Outside

The CSS list-style property, set to square outside, places square bullets outside the list items in unordered lists (`<ul>`). This creates a clean and structured appearance with bullets neatly aligned outside list content.

Example 2: This example illustrates the use of the list-style property where the position value is set to outside.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS list-style Property </title>
    <style>
        ul {
            list-style: square outside;
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        CSS list-style Property
    </h2>

    <p>Sorting Algorithms</p>

    <ul>
        <li>Bubble Sort</li>
        <li>Selection Sort</li>
        <li>Merge Sort</li>
    </ul>
</body>

</html>

Output:

liststyle

Note: If no list-style-image is specified then it will be taken as none.

Supported Browsers

The browser supported by the list-style property are listed below:



Next Article
CSS list-style-type Property

V
Vishal Chaudhary 2
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox