Compare list style type, lower roman upper roman in HTML and CSS

Description

The following code shows how to compare list style type, lower roman upper roman.

Example


<html>
<head>
<style type='text/css'>
ol {<!--from   w  w  w .  j a  va 2 s. com-->
font-family: sans-serif;
}
ol#lower-roman li {
list-style-type: lower-roman;
}
ol#upper-roman li {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ol id='lower-roman'>
<li>This is the first list item.</li>
<li>This is the second list item.</li>
<li>This is the third list item.</li>
</ol>
<ol id='upper-roman'>
<li>This is the first list item.</li>
<li>This is the second list item.</li>
<li>This is the third list item.</li>
</ol>
</body>
</html>

Click to view the demo

The code above generates the following result.

Compare list style type, lower roman upper roman in HTML and CSS