GoogleDocs: Automatically color list items based on depth

Microsoft Word has a cool feature (albeit pretty difficult to figure out and get working consistently) that allows you to automatically color list items based on their depth. For example, in a list like:

  • Fruits
    • Apple
    • Orange
  • Vegetables
    • Tomato
    • Celery

You are able to automatically change the formatting of the first level list items (in this case, Fruits and Vegetables) so that they have a unique style. If you then go and add another first level item, the new item will automatically be set with that style.

You can easily do that with GoogleDocs by doing the following:

  1. In your document click Edit -> Edit CSS
  2. Paste the following into your document:
ul li {
 color: #006666;
 font-size: 150%;
}
ul ul li {
 color: #000000;
 font-size: 100%;
}

If you had the above list, you will now get something like:

  • Fruits
    • Apple
    • Orange
  • Vegetables
    • Tomato
    • Celery

You can modify the CSS as you wish. Some ideas might be to include more depths, add custom padding / spacing, etc.

Note: If you make a mistake in a css definition, Google Docs will clear out the entire block, so if you’ve made a lot of changes, make sure to copy it to your clipboard or a notepad before you submit.

Posted Monday, October 12th, 2009 under tips and tricks.

Leave a Reply