How to define all the list properties in one declaration using CSS ?

Last Updated : 21 May, 2021

Sometimes a web page has good content for reading but the styling of the texts looks improper, so it becomes boring for the readers, and lastly, they leave the web page. But when they read articles with proper styling and lists they read them fully because of the good visuals stated there which keep them attracted to the article and readings.

So what to do to enhance the visuals and styling of the texts and lists on the web page. CSS list properties can be applied on HTML list elements like CSS list-style-type, CSS list-style-image, and CSS list-style-position property to make them attractive and eye-catcher.

In this article, we will learn to declare and style the list properties.

Types of HTML lists:

Ordered lists: A list of items, where each list of items is marked with numbers.
Unordered lists: A list of items, where each list of items is marked with bullets.

Styling list properties:

CSS provides several properties for styling and formatting the most commonly used unordered and ordered lists. These CSS list properties typically allow you to

Control the shape or appearance of the elements.
Specify an image for the elements rather than a bullet point or number.
Set the distance between elements and the text in the list.
Specifies whether the elements would appear inside or outside the box containing the list items.

The list properties contain the following properties:

list-style-type: It specifies the type of list-item marker. The values can be set as circle, square, roman characters, etc where the default value is set to disc.
list-style-position: It specifies the position or place of the list-item marker. The values can be set to inside, outside (default value), inherit, and initial.
list-style-image: It specifies the image of the list-item marker.

Note: The list-style property is a combination of three other properties list-style-type, list-style-position, and list-style-image as can be used as a shorthand notation for these three properties.

Syntax:

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

Example 1: The following code uses the image file “gfg3.png” for the bullet styling.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>CSS List style Properties</title> 
    <style> 
        ul { 
            list-style: square inside url("gfg3.png"); 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green">GeeksforGeeks</h2> 
    <b>CSS list-style property for grocery list</b> 
  
    <ul> 
        <li>Bread</li> 
        <li>Eggs</li> 
        <li>Milk</li> 
        <li>Coffee</li> 
        <li>Cereals</li> 
    </ul> 
</body> 
  
</html>

Output:

list style property

Example 2:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>CSS Style List Properties</title> 
    <style> 
        body{ 
            background-color: pink; 
        } 
        ul{ 
            list-style: decimal inside none; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color:green">GeeksforGeeks</h2> 
    <b>The list-style property for fruits</b> 
  
      
<p>This is a another example of list-style properties</p> 
  
  
    <ul> 
        <li>Apple</li> 
        <li>Banana</li> 
        <li>Orange</li> 
    </ul> 
</body> 
  
</html>