How to use CSS to get proper cascading outline bullets

Major outline item.
1. Next level down.
  1. And a first point about that.
    1. The first point has a note.
      1. And that note has two notes.
      2. Ending with this.
  2. The second point comes along.
    1. The second point needs elaboration.
    2. Elaboration is well broken up.
    3. And shouldn’t go on forever.
2. Close big!
  1. Make the point.
Big bugs have little bugs
1. Upon their back to bite them.
  1. Little bugs have littler bugs.
    1. And so, ad infinitum.
The fun can go on forever!

This, obviously, is useless. If I want to cite a part of the outline I can only do it this way, “Please refer to 1.1.2.3.” Lame.

But the exact same HTML with a CSS sheet added can fix it.

Our outline post-CSS, rad

Major outline item.
1. Next level down.
  1. And a first point about that.
    1. The first point has a note.
      1. And that note has two notes.
      2. Ending with this.
  2. The second point comes along.
    1. The second point needs elaboration.
    2. Elaboration is well broken up.
    3. And shouldn’t go on forever.
2. Close big!
  1. Make the point.
Big bugs have little bugs
1. Upon their back to bite them.
  1. Little bugs have littler bugs.
    1. And so, ad infinitum.
The fun can go on forever!

Now that’s Italian. Well, Roman. And Arabic. Now you can cite “I.A.2.c” without making enemies.

The CSS to do it

(style section goes in <head> or stylesheet)

<style type="text/css">
ol {
 list-style-type: upper-roman;
}
ol ol {
 padding-left:2em;
 list-style-type: upper-alpha;
}
ol ol ol {
 list-style-type: decimal;
}
ol ol ol ol {
 list-style-type: lower-alpha;
}
ol ol ol ol ol {
 list-style-type: lower-roman;
}
</style>