Live Example: (Read the CSS Newbie article)

Source Code: (Save the Source)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example: Building a Word-style Outline with CSS</title>
<style>
/* This CSS creates the Word-like Print Layout style. */
body {
   background-color: #9099ae; }
#wrap {   
   background-color: #fff;
   margin: 0 auto;
   width: 33em;
   border: 1px solid #000;
   border-right-width: 3px;
   border-bottom-width: 3px;
   padding: 5em 8em;
   font-family: "Times New Roman", Times, serif; }
   
/* This CSS builds the Word-style outline. */
ol {
   list-style: upper-roman;
   margin-left: 2.25em;
   padding: 0; }
ol ol {
   list-style: lower-alpha; 
   margin-left: 1.25em;}
ol ol ol {
   list-style: lower-roman;
   margin-left: 2.5em; }
ol ol ol ol {
   list-style: decimal; }
li {
   padding-left: 2em; }
li li {
   padding-left: .4em; }
li li li {
   padding-left: 0; }
</style>
</head>

<body>
<div id="wrap">
   <h1>Word-Style Outline with CSS</h1>
   <p>This is a fairly realistic Microsoft Word-style outline created with just 11 CSS rules. It works on Linux, Windows and MacOS platforms; in Firefox, Opera, Safari, Konqueror, and IE 5.5+ browsers (and perhaps more, but that's as far as I tested). Here's the outline:</p>
   <ol>
      <li>First Things First
         <ol>
            <li>Firstborn Children</li>
            <li>First Place Finishes</li>
         </ol>
      </li>
      <li>Give Me a Second
         <ol>
            <li>Two's Company
               <ol>
                  <li>Three's a Crowd</li>
                  <li>Three's a Party
                     <ol>
                        <li>Party Hearty</li>
                        <li>Avast, Me Hearties</li>
                     </ol>
                  </li>
                  <li>Three's Company</li>
               </ol>
            </li>
            <li>B-2 Bombers</li>
         </ol>
      </li>
      <li>The End</li>
   </ol>
   <p><a href="/advanced-techniques/word-style-outline/">Back to the Article.</a></p>
</div>


</body>
</html>