Create a Microsoft Word-Style Outline with CSS

Published February 27, 2008 by Rob Glazebrook.

Sample outline created in HTML and CSS

One 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 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’t lend itself to really attractive or useful outlines… they tend to look something like this:

  1. First item

    1. Indented item
    2. Another indented item
      1. Indented triple!
  2. Not indented as much

As you can see, the browser doesn’t bother to vary the indentation style much, or change the list type from roman numerals to alphabetical characters and so on… all the things we’re so used to seeing because Microsoft Word and other writing programs do them by default. So let’s use a bit of CSS ingenuity to make a Microsoft Word-styled outline using ordered lists!

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’s a screenshot of that sample outline. This, my friends, is our goal.

The first step to building this outline in CSS is to properly nest your unordered list. It should look something like this:

<ol>
	<li>First Things First
		<ol>
			<li>Firstborn Children</li>
			<li>First Place Finishes</li>
		</ol>
	</li>
</ol>

As you can see from the code above, in order to properly nest lists, you need to place the sub-list inside of the list item you want it to be a subset of. So we’ve started an ordered list, opened our first list item, and then added an entirely complete ordered list to the mix before we close that list item.

Now that we know how to build the list, all we need is the CSS. For this, we’ll be using the list-style property along with a set of increasingly specific selectors for our rules. Our first rules look like this:

ol {
	list-style: upper-roman;
	margin-left: 2.25em;
	padding: 0; }
li {
	padding-left: 2em; }

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 “ol” tag indents our list a respectable amount: specifically setting both margin and 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.

However, this CSS gets applied to all of our unordered lists, not just the first one. So we’ll need to use a set of increasingly specific selectors in our CSS to create the appropriate look. Here’s the full CSS for a complete four-level 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; }

Here, the “ol ol” rule means “only apply this style to ordered lists within ordered lists,” and “ol ol ol” does the same for third-level lists, and so on. As you can see, we’re setting the list style to lowercase alphabet on the 2nd level, lowercase roman numerals on the 3rd, and regular numbers on the 4th. We’re also adjusting the margin on the 2nd-4th levels of the list (and 2nd – 3rd levels of the list items) to make them more consistent with Word’s display. If you wanted to adjust them to something different, it’s a simple matter of changing the number of ems in the margins or padding.

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:

ol ol, ol ol ol ol ol {
	list-style: lower-alpha; 
	margin-left: 1.25em;}

And that’s all there is to it! Here’s our completed example, complete with a little extra styling just for kicks to make it look more like Microsoft Word’s print layout (my editing layout of choice). If you’re interested, here’s the CSS I used for creating the print layout look:

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 6em;
	font-family: "Times New Roman", Times, serif; }

And the best bit? This styling works pretty much everywhere: Firefox, Opera, Netscape, Safari, and even Internet Explorer 5.5 and up all behave themselves! (IE 5.5 ignores our “auto” margin in the print layout view, but it still gets the outline part right)

So 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’s your sort of thing.

25 Responses

  1. Pingback: User First Web » links for 2008-03-15

  2. silurius (reply)

    How about compound numbers, such as those used in legal documents? E.g. 1. Lorem ipsum, 1.1 Lorem ipsum, 1.2 Lorem ipsum, 1.2.1 Lorem ipsum?

  3. Pingback: Creating an Attractive Hover Menu using CSS & JavaScript - Global Point Forum

  4. Pingback: Create a Microsoft Word-Style Outline with CSS | CSS Tutorials - CSSHelper.net

  5. Pingback: 45 Powerful CSS/JavaScript-Techniques - Smashing Magazine

  6. Pingback: 45 Powerful CSS/JavaScript-Techniques « Social-Press

  7. Pingback: 45 Powerful CSS/JavaScript-Techniques | Tutorial51

  8. Pingback: 45 Powerful CSS/JavaScript Techniques « Extreme Design Studio Blog v4.0

  9. Pingback: 45 Powerful CSS/JavaScript-Techniques » Shai Perednik.com

  10. Pingback: 45 Powerful CSS/JavaScript-Techniques | moreInet.com | Webdesign, Graphic Design Service in Pattaya

  11. Pingback: 45 Powerful CSS/JavaScript-Techniques « wwwba

  12. Pingback: 45种有用的Css/Javascript技巧 | narco

  13. Pingback: Geek is a Lift-Style. » 45 Powerful CSS/JavaScript-Techniques

  14. Mike (reply)

    I have the same question as silurius. Is it possible to do lists that look exactly what you have done except with numbers like silurius said?
    Thanks
    Mike

  15. Pingback: 45 Powerful CSS/JavaScript-Techniques - Goodfav Howto

  16. Pingback: 45 Powerful CSS/JavaScript-Techniques - Internet Business

  17. Fern (reply)

    I loved as much as you will receive carried out right here.
    The sketch is attractive, your authored subject matter stylish.

    nonetheless, you command get bought an nervousness over that you wish be delivering the following.
    unwell unquestionably come more formerly again since exactly the same nearly very often inside case you
    shield this hike.

  18. alpha cut hd free trial (reply)

    I am extremely inspired together with your writing skills as
    neatly as with the layout for your weblog. Is that this a paid topic or did you customize it yourself?
    Anyway stay up the nice high quality writing, it is rare
    to see a nice weblog like this one these days..

  19. best car wax polish (reply)

    Admiring the hard work you put into your website and detailed
    information you provide. It’s nice to come across
    a blog every once in a while that isn’t the same
    out of date rehashed information. Great read! I’ve bookmarked your site and I’m adding your RSS
    feeds to my Google account.

  20. http://www.ask.com (reply)

    Write more, thats all I have to say. Literally, it seems as
    though you relied on the video to make your point. You clearly know what youre
    talking about, why throw away your intelligence on just posting videos to your blog when you could be giving
    us something informative to read?

    Also visit my website … marketing strategy
    (http://www.ask.com)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>