<!DOCTYPE>
<html>
<head>
<style>
ul.circle {
list-style-position: outside;
}
ul.square {
list-style-position: inside;
}
h3{
color:red;
}
</style>
</head>
<body>
<h2>CSS in Lists</h2>
<h3>List-Style-position : Outside(default)</h3>
<ul class=“circle”>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
<h3>List-Style-position : Inside</h3>
<ul class=“square”>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
</body>
</html>