How to style ordered lists with CSS
The code below shows you how to style ordered lists with CSS.
The list-style-type property is used to style ordered lists and they can have either a lettering or numbering style.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Web Development Tutorials.com</title>
<style type="text/css">
ol.decimal { list-style-type: decimal; }
ol.lower-roman { list-style-type: lower-roman; }
ol.upper-roman { list-style-type: upper-roman; }
ol.lower-alpha { list-style-type: lower-alpha; }
ol.upper-alpha { list-style-type: upper-alpha; }
ol.none { list-style-type: none; }
</style>
</head>
<body>
<ol class="decimal">
<li>this ordered list has a decimal style list marker</li>
<li>this ordered list has a decimal style list marker</li>
</ol>
<ol class="lower-roman">
<li>this ordered list has a lower-roman style list marker</li>
<li>this ordered list has a lower-roman style list marker</li>
</ol>
<ol class="upper-roman">
<li>this ordered list has a upper-roman style list marker</li>
<li>this ordered list has a upper-roman style list marker</li>
</ol>
<ol class="lower-alpha">
<li>this ordered list has a lower-alpha style list marker</li>
<li>this ordered list has a lower-alpha style list marker</li>
</ol>
<ol class="upper-alpha">
<li>this ordered list has a upper-alpha style list marker</li>
<li>this ordered list has a upper-alpha style list marker</li>
</ol>
<ol class="none">
<li>this ordered list has a list marker style of none</li>
<li>this ordered list has a list marker style of none</li>
</ol>
</body>
</html>
Use the text editor below to practice what you have learned.