<\/p>\n<\/p>\n
One of the most useful properties of both unordered lists (which we fancied up earlier this week<\/a>) and ordered lists is their ability to nest<\/em> — that is, to contain lists within lists. And one of the most common examples of a nested ordered list in the real world (or at least, in my world) is an outline, be it a resume, a research paper, or something else entirely. But by default, the web doesn\u2019t lend itself to really attractive or useful outlines\u2026 they tend to look something like this:<\/p>\n As you can see, the browser doesn\u2019t bother to vary the indentation style much, or change the list type from roman numerals to alphabetical characters and so on\u2026 all the things we\u2019re so used to seeing because Microsoft Word and other writing programs do them by default. So let\u2019s use a bit of CSS ingenuity to make a Microsoft Word-styled outline using ordered lists!<\/p>\n Before I started crafting this tutorial, I first took a look at what a default outline looks like when built in Microsoft Word 2003. Here\u2019s a screenshot of that sample outline.<\/a> This, my friends, is our goal.<\/p>\n The first step to building this outline in CSS is to properly nest your unordered list. It should look something like this:<\/p>\n As you can see from the code above, in order to properly nest lists, you need to place the sub-list inside<\/strong> of the list item you want it to be a subset of. So we\u2019ve started an ordered list, opened our first list item, and then added an entirely complete ordered list to the mix before<\/strong> we close that list item.<\/p>\n Now that we know how to build the list, all we need is the CSS. For this, we\u2019ll be using the list-style property along with a set of increasingly specific selectors for our rules. Our first rules look like this:<\/p>\n These rules do a few things. The list-style property tells all of our ordered lists to use roman numerals instead of numbers. The margin and padding on the \u201col\u201d tag indents our list a respectable amount: specifically setting both margin and<\/em> padding makes IE behave just like the other browsers, because IE indents lists using padding by default while all other browsers use margins. And last but not least, our padding-left on the list item adds some space between our roman numeral and the text, just like in our example outline from MS Word. Here, the \u201col ol\u201d rule means \u201conly apply this style to ordered lists within<\/em> ordered lists,\u201d and \u201col ol ol\u201d does the same for third-level lists, and so on. As you can see, we\u2019re setting the list style to lowercase alphabet on the 2nd level, lowercase roman numerals on the 3rd, and regular numbers on the 4th. We\u2019re also adjusting the margin on the 2nd-4th levels of the list (and 2nd \u2013 3rd levels of the list items) to make them more consistent with Word\u2019s display. If you wanted to adjust them to something different, it\u2019s a simple matter of changing the number of ems in the margins or padding.<\/p>\n After the 5th level, Microsoft Word simply cycles back through the same styles starting at the 2nd level, so if you wanted an outline more than four levels deep, you could just do something like this to save bytes and effort:<\/p>\n\n
\n
\n
<ol>\n\t<li>First Things First\n\t\t<ol>\n\t\t\t<li>Firstborn Children<\/li>\n\t\t\t<li>First Place Finishes<\/li>\n\t\t<\/ol>\n\t<\/li>\n<\/ol><\/pre>\n
ol {\n\tlist-style: upper-roman;\n\tmargin-left: 2.25em;\n\tpadding: 0; }\nli {\n\tpadding-left: 2em; }<\/pre>\n
\n<\/a>
\nHowever, this CSS gets applied to all<\/strong> of our unordered lists, not just the first one. So we\u2019ll need to use a set of increasingly specific selectors in our CSS to create the appropriate look. Here\u2019s the full CSS for a complete four-level outline:<\/p>\nol {\n\tlist-style: upper-roman;\n\tmargin-left: 2.25em;\n\tpadding: 0; }\nol ol {\n\tlist-style: lower-alpha; \n\tmargin-left: 1.25em;}\nol ol ol {\n\tlist-style: lower-roman;\n\tmargin-left: 2.5em; }\nol ol ol ol {\n\tlist-style: decimal; }\nli {\n\tpadding-left: 2em; }\nli li {\n\tpadding-left: .4em; }\nli li li {\n\tpadding-left: 0; }<\/pre>\nol ol, ol ol ol ol ol {\n\tlist-style: lower-alpha; \n\tmargin-left: 1.25em;}<\/pre>\n
![Here\u2019s a screenshot of that sample outline.<\/a> This, my friends, is our goal.<\/p>\nThe first step to building this outline in CSS is to properly nest your unordered list. It should look something like this:<\/p>\n<ol>\n\t<li>First Things First\n\t\t<ol>\n\t\t\t<li>Firstborn Children<\/li>\n\t\t\t<li>First Place Finishes<\/li>\n\t\t<\/ol>\n\t<\/li>\n<\/ol><\/pre>\nAs you can see from the code above, in order to properly nest lists, you need to place the sub-list inside<\/strong> of the list item you want it to be a subset of. So we\u2019ve started an ordered list, opened our first list item, and then added an entirely complete ordered list to the mix before<\/strong> we close that list item.<\/p>\nNow that we know how to build the list, all we need is the CSS. For this, we\u2019ll be using the list-style property along with a set of increasingly specific selectors for our rules. Our first rules look like this:<\/p>\nol {\n\tlist-style: upper-roman;\n\tmargin-left: 2.25em;\n\tpadding: 0; }\nli {\n\tpadding-left: 2em; }<\/pre>\nThese rules do a few things. The list-style property tells all of our ordered lists to use roman numerals instead of numbers. The margin and padding on the \u201col\u201d tag indents our list a respectable amount: specifically setting both margin and<\/em> padding makes IE behave just like the other browsers, because IE indents lists using padding by default while all other browsers use margins. And last but not least, our padding-left on the list item adds some space between our roman numeral and the text, just like in our example outline from MS Word.\n<\/a>\nHowever, this CSS gets applied to all<\/strong> of our unordered lists, not just the first one. So we\u2019ll need to use a set of increasingly specific selectors in our CSS to create the appropriate look. Here\u2019s the full CSS for a complete four-level outline:<\/p>\nol {\n\tlist-style: upper-roman;\n\tmargin-left: 2.25em;\n\tpadding: 0; }\nol ol {\n\tlist-style: lower-alpha; \n\tmargin-left: 1.25em;}\nol ol ol {\n\tlist-style: lower-roman;\n\tmargin-left: 2.5em; }\nol ol ol ol {\n\tlist-style: decimal; }\nli {\n\tpadding-left: 2em; }\nli li {\n\tpadding-left: .4em; }\nli li li {\n\tpadding-left: 0; }<\/pre>\nHere, the \u201col ol\u201d rule means \u201conly apply this style to ordered lists within<\/em> ordered lists,\u201d and \u201col ol ol\u201d does the same for third-level lists, and so on. As you can see, we\u2019re setting the list style to lowercase alphabet on the 2nd level, lowercase roman numerals on the 3rd, and regular numbers on the 4th. We\u2019re also adjusting the margin on the 2nd-4th levels of the list (and 2nd \u2013 3rd levels of the list items) to make them more consistent with Word\u2019s display. If you wanted to adjust them to something different, it\u2019s a simple matter of changing the number of ems in the margins or padding.<\/p>\nAfter the 5th level, Microsoft Word simply cycles back through the same styles starting at the 2nd level, so if you wanted an outline more than four levels deep, you could just do something like this to save bytes and effort:<\/p>\nol ol, ol ol ol ol ol {\n\tlist-style: lower-alpha; \n\tmargin-left: 1.25em;}<\/pre>\nAnd that\u2019s all there is to it! Here\u2019s our completed example,<\/a> complete with a little extra styling just for kicks to make it look more like Microsoft Word\u2019s print layout (my editing layout of choice). If you\u2019re interested, here\u2019s the CSS I used for creating the print layout look:<\/p>\nbody {\n\tbackground-color: #9099ae; }\n#wrap {\t\n\tbackground-color: #fff;\n\tmargin: 0 auto;\n\twidth: 33em;\n\tborder: 1px solid #000;\n\tborder-right-width: 3px;\n\tborder-bottom-width: 3px;\n\tpadding: 5em 6em;\n\tfont-family: \"Times New Roman\", Times, serif; }<\/pre>\nAnd the best bit? This styling works pretty much everywhere<\/strong>: Firefox, Opera, Netscape, Safari, and even Internet Explorer 5.5 and up all behave themselves! (IE 5.5 ignores our \u201cauto\u201d margin in the print layout view, but it still gets the outline part right)<\/p>\nSo now you can go out into the world, head held high, confident in your abilities to organize the myriad lists of the web into visually appealing outlines with wild, voracious abandon. You know… if that\u2019s your sort of thing. <\/p>\nShare and Enjoy !<\/h3>0<\/span><\/span>Shares<\/small><\/div><\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<\/p>\nOne of the most useful properties of both unordered lists (which we fancied up earlier this week) and ordered lists is their ability to nest — that is, to contain lists within lists. And one of the most common examples […]<\/p>\nRead Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[165,186],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/40"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}](\"\/example\/word-style-outline\/outline-example.gif\"){kind=link}