Introduction to CSS list-style
CSS list-style defines how to style a list element by defining position, appearance and images on the list elements like <ol>, <li>, and <ul > tags. In the case of the unordered list, we can optimize the shape of the bullet and also assigning styles to number. It is the core responsibility of this property to show the list item markers to be styled and we can also include pre-defined counter styles to the list elements.
Syntax and Parameters:
The general syntax is given below in one declaration like:
List-style: list-style type | position | image | inherit ;This is a shorthand property which carries all the three styles together.
Here,
- list-style defines the type of list like square, oval.
- list-position defines where to position the marker whether inside or outside.
- list- image defines whether the list is assigned with images or none.
How list-style Property works in CSS?
There are two main types of list in HTML namely ordered and unordered list. As we all know styling is the major part of the web-design. This property works with three common properties values namely type, position, image as we stated earlier in the syntax. If any of this value is neglected, they will revert to their initial stage.
List elements are styled like <p> elements by applying properties like font, color, border to the <ol>, <li>, <ul> tags. All these styles are affected by individual list items. Let’s get started with the working of this style of property. This list-style has sub-properties like type, position, image. These offer a list more aligned with the style we add.
1. list-style-type: It denotes the type of list-item markers. And it takes some values like disc, circle, square, decimal, roman , Latin etc. It can be set to none to hide the marker i.e to remove the bullets. And the list elements can be given to display: list-item.
2. list-style-position: It gives the position of the marker whether to place inside or outside the list content. The former places the item-marker as part of the list content and the later is a default value which places the item-marker before the list-content. left-padding to outside.
List-style : circle inside | outside;3. list-style-image: With this, an image can be embedded into the marker and accepts the default value none and for the path location a URL.
List -style : square inside url (ff.jpg);When a styling type is set to none, we may notice some extra spacing before the list items. In that case, when we set padding to zero the extra space is not seen.
First, we prefer the list with unordered list markers.
Code:
.CSS
li.circle {
list-style-type: circle;
}
li.square {
list-style-type: square;
}.html
<ul>
<li class="circle"> Biscuits</li>
<li class="square">Chocolate Traybake</li>
<li>Snack Well</li>
<li>Udi’s Gluten Soft Baked</li>
<li>Nabisco Ginger Snaps</li>
</ul>Browser compatibility:
This property is well supported in all the browsers.The above code says the first list item uses a circle type marker which is done with the class “circle” and the second list items with “square”. The HTML page shows the output for the respective code.
Examples of CSS list-style
Given below is the demonstration of all the above property along with how to add colours to the list and list items in the given examples:
Example #1
Implementing List-specific image styling to the ul tag.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Demo on CSS list-style Property
</title>
<style>
ul {
list-style: square inside
url("paper.jpg");
}
</style>
</head>
<body>
<h1 style = "color:skyblue;">
EDUCBA.COM
</h1>
<h2>
Demo on CSS list-style Property
</h2>
<p>Types of Data Analytics</p>
<ul>
<li>Descriptive Analytics</li>
<li> Predictive Analytics</li>
<li> Prescriptive Analytics</li>
</ul>
</body>
</html>The above code snippets explain that the marker style is assigned by the URL path location. instead of square or circle marker list, the image is embedded in the list.
Output:
Example #2
Using List-style type property.
Code:
<html>
<head>
Welcome to this Page
</head>
<body>
<ul style = "list-style-type:disc;">
<li>Computer Programming</li>
<li>Data Structures and Algorithms</li>
<li>Software Engineering</li>
</ul>
<ul style = "list-style-type:square;">
<li>Grid and Cloud Computing</li>
<li>Data Mining</li>
<li>Big Data</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Classification</li>
<li>Prediction</li>
<li>Clustering</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>IBM Data Science</li>
<li>Data Analytics</li>
<li>Artificial Engineering</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Regression Analysis</li>
<li>Probability and Queuing Concepts</li>
<li>Computing Task</li>
</ol>
</body>
</html>All the style sub-properties are given in the list-style property.
Output:
Example #3
List-style property with CSS styles -border, color.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
CSS list-style Property
</title>
<style>
ul {
list-style-type: disc inside;
border: 3px solid yellow;
background-color: lightred;
}
li {
margin: 1px;
background-color: lightblue;
}
</style>
</head>
<body>
<h1 style = "color:brown;">
EDUCBA.COM
</h1>
<h2>
Demo on CSS list-style Property
</h2>
<p>Scandinavian Countries - A part of Northern Europe</p>
<ul>
<li>Denmark</li>
<li>Norway</li>
<li>Finland</li>
<li>Sweden</li>
</ul>
</body>
</html>Output:
Example #4
Example showing different list-items has different list-makers.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(2) {
list-style: square inside;
}
ul li:nth-child(3) {
list-style: square;
color: red;
}
ul li:nth-child(4) {
font-size: 2px;
color: blue;
}
</style>
</head>
<body>
<ul>
<li>List Style property is applied to all the list items</li>
<li>marker style for the individual items can also be changed.</li>
<li>And the color of the marker is given based on the color of the element</li>
<li>The size of marker also increases with the size of li content</li>
</ul>
</body>
</html>In the above code snippets, marker style are given to the list items i.e the style has been changed on all the list items.
Output:
Example #5
Giving List spacing.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
CSS list-style Property
</title>
<style>
ul {
list-style: none;
padding: 0;
}
li {
padding: px 1px;
background-color: light red;
border: 2px solid pink;
}
</style>
</head>
<body>
<h1 style = "color:blue;">
EDUCBA.COM - Welcome
</h1>
<h2>
Demo2 on CSS list-style Property
</h2>
<p>Scandinavian Countries - A part of Northern Europe</p>
<ul>
<li>Denmark</li>
<li>Norway</li>
<li>Finland</li>
<li>Sweden</li>
</ul>
</body>
</html>Have a look here, there is no spacing before the list items.
Output:
Conclusion
In this article, we have seen how to use CSS list-style properties with proper syntax and examples. CSS is used to apply custom styles which in turn make the list-property to apply styles. And we also had a brief discussion on setting background colours for the list items in a web page. Therefore, at the end of this tutorial, we would start styling list in CSS.
Recommended Articles
This is a guide to CSS list-style. Here we discuss the introduction, how list-style property works in CSS? and examples respectively. You may also have a look at the following articles to learn more –
