<!DOCTYPE html>
<html>
<head>
<title>All Types of Lists</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h2 {
color: orange;
}
ul {
list-style-type: square;
margin-bottom: 20px;
}
ol {
list-style-type: upper-roman;
margin-bottom: 20px;
}
dl {
background-color: #f9f9f9;
padding: 10px;
border-left: 4px solid #ccc;
}
dt {
font-weight: bold;
margin-top: 10px;
}
dd {
margin-left: 20px;
}
</style>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>Wake up</li>
<li>Brush Teeth</li>
<li>Have Breakfast</li>
</ol>
<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language used to structure web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets used to style HTML elements.</dd>
<dt>JavaScript</dt>
<dd>A scripting language used to make web pages interactive.</dd>
</dl>
</body>
</html>