Create a Microsoft Word-Style Outline with CSS

Published February 27, 2008 by CSS Newbies.

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:

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

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.

36 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 -

  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

  10. Pingback: 45 Powerful CSS/JavaScript-Techniques | | 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?

  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. (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

  21. (reply)

    The Angels have been based in Angel Stadium of Anaheim since 1966.
    Later all those countries who have tense relationships with one another will take
    part in the war. There’s also no statistical tracking or
    any additional reasons to spend the time playing it.

  22. Brave Frontier Trucchi (reply)

    I Mariners hanno fatto il loro debutto nel mese
    di aprile 1977, ma ha perso i California Angels .
    Ecco perché gli Angeli firma Jason Urquidez dalle Barnstormers Lancaster della Independent Atlantico League e Dontrelle Willis dalle anatre Long Island dell’Atlantico
    Lega li potrebbe beneficiare nel lungo periodo
    . mi nominato per assistere l’utente nel passaggio tra la vita
    e la vita dopo la morte e per rispondere a tutte le domande che si possono avere
    sul processo .

  23. (reply)

    sai cosa , io sono morto , come insultato posso ottenere , che cosa è
    il grosso problema . ” per essere al primo posto la dice lunga , perché tutti sa ] , talento – saggio , theres un sacco di parità . 7 per cento) – che è un po ‘ più grande divisione di ciò che è stato storicamente percepita per essere un due – terzi – destri al rapporto di un terzo – mancini .

  24. Blog (reply)

    Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my
    blog that automatically tweet my newest twitter updates. I’ve been looking for a plug-in like this
    for quite some time and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

  25. Rzęsy (reply)

    This is a very good tip especially to those new to the blogosphere.
    Short but very precise information… Thanks for sharing
    this one. A must read article!

  26. karnisz (reply)

    I do agree with all the ideas you have offered for your post.

    They’re really convincing and can certainly work.
    Still, the posts are too short for newbies. May
    just you please lengthen them a little from next time?
    Thank you for the post.

  27. health economics (reply)

    I’ll right away grab your rss feed as I can not to find
    your email subscription hyperlink or newsletter service.
    Do you’ve any? Please allow me know so that I may subscribe.

  28. (reply)

    Have you used any of those softphones? Are you
    able to state for sure whether it may report the entire phone instead of just odds and ends,
    and particularly whether one of them actually works or not?
    I’m wary of spending good money for crap program, particularly specific software that isn’t properly-examined.

Leave a Reply

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