Lists style
In this article we are going to learn about lists style property and circle, square, lower-alpha, upper-alpha, lower-roman and upper-roman values in css, how we can style lists in web pages using Cascading Style Sheets.
We learnt about css in general, padding, float, width, minimum width, maximum width, height, minimum height, maximum height, scroll, inline css, internal css, external css, selectors css, positions css and display in css so, we will be focusing on lists style.
Lists style
List style type is a Cascading Style Sheets property that is used to style lists in html by using circle, square, lower-alpha, upper-alpha, lower-roman and upper-roman values and it helps us to both unordered and ordered lists
List style type circle
Let us create a simple list element with a circle value of list-style-type property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.list-style-example {
list-style-type: circle;
color: white;
background: orange;
}
<style/>
</head>
<body>
<ul class="list-style-example">
<li>Headings</li>
<li>Bold</li>
<li>Italic</li>
<li>Strong</li>
</ul>
</body>
</html>
So, we should have the following results and we can see that our list has empty circles.
- Headings
- Bold
- Italic
- Strong
List style type square
List-style-type square is css property that is used to style unordered lists with filled squares.
Let us create a simple list element with a square value of list-style-type property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.list-style-example {
list-style-type: square;
color: white;
background: orange;
}
<style/>
</head>
<body>
<ul class="list-style-example">
<li>Headings</li>
<li>Bold</li>
<li>Italic</li>
<li>Strong</li>
</ul>
</body>
</html>
So, we should have the following results and we can see that our list has filled squares.
- Headings
- Bold
- Italic
- Strong
List style type lower-alpha
Let us create a simple list element with a lower-alpha value of list-style-type property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.list-style-example {
list-style-type: lower-alpha;
color: white;
background: orange;
}
<style/>
</head>
<body>
<ul class="list-style-example">
<li>Headings</li>
<li>Bold</li>
<li>Italic</li>
<li>Strong</li>
</ul>
</body>
</html>
So, we should have the following results and we can see that our list is numbered with lower alphabets.
- Headings
- Bold
- Italic
- Strong
List style type upper-alpha
Let us create a simple list element with a upper-alpha value of list-style-type property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.list-style-example {
list-style-type: upper-alpha;
color: white;
background: orange;
}
<style/>
</head>
<body>
<ul class="list-style-example">
<li>Headings</li>
<li>Bold</li>
<li>Italic</li>
<li>Strong</li>
</ul>
</body>
</html>
So, we should have the following results and we can see that our list is numbered with upper alphabets.
- Headings
- Bold
- Italic
- Strong
List style type upper-roman
Let us create a simple list element with loer-roman value of list-style-type property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.list-style-example {
list-style-type: lower-roman;
color: white;
background: orange;
}
<style/>
</head>
<body>
<ul class="list-style-example">
<li>Headings</li>
<li>Bold</li>
<li>Italic</li>
<li>Strong</li>
</ul>
</body>
</html>
So, we should have the following results and we can see that our list is numbered with lower roman.
- Headings
- Bold
- Italic
- Strong
List style type upper-roman
Let us create a simple list element with upper-roman value of list-style-type property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.list-style-example {
list-style-type: upper-roman;
color: white;
background: orange;
}
<style/>
</head>
<body>
<ul class="list-style-example">
<li>Headings</li>
<li>Bold</li>
<li>Italic</li>
<li>Strong</li>
</ul>
</body>
</html>
So, we should have the following results and we can see that our list is numbered with upper roman.
- Headings
- Bold
- Italic
- Strong