How to define all the list properties in one declaration using CSS ?
Last Updated :
23 Jul, 2025
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>
Output:
Similar Reads
How to set all the font properties in one declaration using CSS ? In this article, we will learn how to set all the font properties in one declaration using CSS. This can be used for quickly setting the required font properties without specifying each of them separately. Approach: We will use the font property of CSS which is the shorthand property for all the fon
2 min read
How to set different background properties in one declaration? We are going to use the Shorthand property in this article to set different background properties. To reduce the length of the CSS code we can declare background properties in one line through "Shorthand Property".Through this property we can define different properties of background in a single lin
2 min read
How to customize the numbers of an ordered list using CSS ? In this article, we will learn how to customize (decorate) the numbers in an ordered list. We use counter-increment property to decorate the numbers. Approach: It is difficult to add CSS styles to <ol> elements directly to customize the numbers. Instead, we access the range of the ordered list
2 min read
How to decorate list bullets in arrow using CSS ? Given a list of items and the task is to customize the bullet style of the list and replace it with the arrow. Method 1: By Unicode Character First, we will turn off the default bullet style of the list. Then We will insert Unicode of the arrow character in the content property in the "li::before" s
2 min read
How to use @counter-style rule to customize list item using CSS ? In this article, we will see how the @counter-style rule can be used to customize each list item style in CSS. Most of the cases while developing web applications and web projects, we often make use of lists, i.e., an ordered list or unordered list, or a description list. Although, there exist some
3 min read
How to Remove Default List Style from Unordered List in CSS ? Unordered lists in HTML are typically styled with bullet points by default. However, there may be instances where you want to remove this default styling for a cleaner look or to apply custom styles. In this article, we will explore various methods to remove the default list styling for an unordered
2 min read