A Google Docs notebook

An example of using CSS in your document

Overview

Did you know you can now style your Google Docs documents using CSS? This gives you greater control over the look and feel of your document. You can add background images, change how your lists are indented, and much more.

More information

For more information, why not check out the Google Docs blog. If you're having trouble, the Google Docs Help Center is a great place to look. And if you want to share your styles with others, drop by the Google Docs Help Group.

About this example

This document is an example of using a background image to make your document look like it was written on notebook paper.

CSS Code

Here is the CSS used in this document:

body {
  background: url('File?id=ad8wdwbvms_884g9vm4zwk_b') repeat-y;
  padding-left: 70px;
  padding-top: 20px;
  margin: 0;
}
h1, h2, h3, li, p {
  line-height: 20px;
  margin: 0;
  padding: 0;
}

Notes:

The CSS in this document include styling the various text elements (headers, paragraphs and lists) as well as the body. Most importantly, a line-height of 20 pixels is used, since the distance between the horizontal lines in the background image are 20 pixels apart. This assures that the text is evenly spaced between the lines.

The body also includes some padding on the left hand side so that the words stay to the right of the pink vertical "margin" line of the background image.