Skip to main content

Great looking css ordered lists

Get the best looking css lists with the least amount of effort - just copy and paste!
great looking css ordered lists alpha numeric

Once in a while, you want a complicated list. By default, css lists are plain and boring. Here's a way to jazz it up a little. This post gives you the css that changes the second, third, and fourth level of indented or nested list items.

This will give you a hint on how to change an ordered list to roman numerals and list styles using css.

To get this:
1.
    A.
        I.
            a. 

 

use this:
ol ol{
    list-style-type:upper-alpha;
}
ol ol ol{
    list-style-type:upper-roman;
}
ol ol ol ol {
    list-style-type:lower-alpha;
}

 

And here it is using that css:

  1. First level ordered list
    1. second level ordered list - upper alpha
      1. third level ordered list - upper-roman
        1. fourth level ordered list - lower alpha
Here's what I'm doing to test over 72 headline combinations using Google Display Ads
Get more productivity with the fundamentals of high quality focused actions and habits so you can track and improve your skills, without interruptions or distractions.
Get well organized physical and digital workspaces so you can layout the tools, materials and information, without clutter or overwhelm