Styling Lists
<!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">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Styling Lists</title>
<style>
/* Specifies type of list item marker to "square" */
/* Specifies position of list item markers to "inside" */
.unorderInside {
list-style-type: square;
list-style-position: inside;
}
/* Styling the list items in shorthand to "circle" & "outside" */
.unorderOutside {
list-style: circle outside;
}
/* Ordered List item markers type is set to "upper-roman" */
.orderLowerRoman {
list-style-type: upper-roman;
}
.orderUpperAlpha {
list-style-type: upper-alpha;
background: cornflowerblue;
padding: 20px;
}
.orderUpperAlpha li {
background: indigo;
color: white;
padding: 5px;
margin-left: 35px;
}
</style>
</head>
<body>
<!--
Two main types of lists - unordered lists (<ul>) & ordered lists (<ol>).
list-style-type : specifies the type of list item marker.
list-style-type : none;
- property can also be used to remove markers/bullets.
list-style-position : specifies position of list-item markers.
list-style-image : specifies an image as list item marker.
list-style : property is a shorthand property.
- Example - list-style: square inside url("image.png");
-->
<h1>Demo: Styling Lists</h1>
<h2>Styling Lists ( Unordered )</h2>
<ul class="unorderInside"><span>Below is the unordered list (inside):</span>
<li>Orange</li>
<li>White</li>
<li>Green</li>
</ul>
<ul class="unorderOutside"><span>Below is the unordered list (outside):</span>
<li>Orange</li>
<li>White</li>
<li>Green</li>
</ul>
<h2>Styling Lists ( Ordered ) </h2>
<ol class="orderLowerRoman"><span>Below is the ordered list (LowerRoman):</span>
<li>Tea</li>
<li>Milk</li>
<li>Sugar</li>
</ol>
<ol class="orderUpperAlpha"><span>Below is the ordered list (UpperAlpha):</span>
<li>Tea</li>
<li>Milk</li>
<li>Sugar</li>
</ol>
</body>
</html>