- Amanda French dot net - https://amandafrench.net -

How to create outlines in Google Docs

UPDATE 5/14/2012: These instructions are very outdated and do not work any more; it is no longer possible to edit HTML and CSS in Google Docs. –AF

This is a tiny victory, but it is my own.

I maintain my To Do list in Google Docs now so that I can access the latest version anywhere. Usually it’s just a bulleted list, but today I wanted to create a separate numbered list in outline style. Google Docs does allow numbered lists, but look at the slight weirdness:

Google numbered list

It’s numbered, and it’s indented hierarchically, but the numbers are all Arabic. Which annoyed me. I expect traditional changed numbering from my hierarchical outlines, yes I do.

I did some searching (naturally) but couldn’t find anything very helpful, except for the nugget that you can actually edit the HTML and CSS in a Google doc, which I did not know till now. After a little trial and error, I came up with this simple hack that will make a Google Doc numbered list look more like a regular outline.

Go to Edit –> Edit CSS in your Google Doc. Put in the following code:

ol ol {
list-style-type: lower-alpha;
ol ol ol {
list-style-type: lower-roman;

And wham, you’re done, and you’ve got a lovely outline:

If you speak CSS, you’ll see that the code is telling the document that every ordered list inside an ordered list should use lower-case letters for list items, while every ordered list within an ordered list within an ordered list should use lower-case Roman numerals for list items. You can choose your own list styles here at the W3 Schools, and of course you can go farther than three levels if you like. You’ll need to edit the CSS for every document separately, sadly.

By the way, is it a little weird that CSS calls regular old numbers “decimal” instead of “Arabic”? Probably not.

Um, I better go actually do some of those tasks now that I’ve got them to display the way I want them to . . .