Styles in Google Docs!

OVERVIEW

Templates, Styles and Better Formatting have been among the most requested Google Docs features. Well, you asked and we listened!

So, as a first step we've enabled "Edit CSS" on Docs such that you can explore styling documents. Think of Docs as the platform and the world wide web your place to explore the different styles! The possibilities are endless!

Secondly, we've included some examples of CSS styles here to get you started. It's important to note that CSS is something that takes advanced knowledge and we don't recommend utilizing this functionality unless you're comfortable and familiar with it.

As we all know, this is a user help group, so please utilize this pages section to help one another out and to engage in CSS information sharing. We recommend you use outside sources to enhance your knowledge of CSS styles. A simple search for "CSS Examples" or "CSS Tutorials" is a good place to start.

The examples given below just scratch the surface of the style possibilities so I'm very excited to see the different styles you all create.

Current Limitations

• "Edit CSS" is not supported offline (with Gears) yet.
• Images (specified through styles) are not propagated through Export as PDF/Print yet.
• In this initial launch of CSS, we won't be allowing external image URLs to be used with CSS in Docs. However, you can still utilize images by uploading them and using the Docs image URL instead. There are instructions about this in the first example below. 

Getting to your CSS dialog box!

EXAMPLES

Screenshots of actual Google documents styled with CSS.  Yes, you can do this too!

Adding an image

Need to add an image to your document? Follow these easy steps:

1. Upload the image by going to the Insert > Picture option in the menu. You can upload images from your computer or from elsewhere on the web.
2. After the image has been uploaded, go to the Edit > Edit HTML option in the menu, and find the image tag. It should look something like this:
   
   <img id="abc123" style="width: 100px; height: 100px;" src="File?id=abcdefg123456_987654zyxwv">
3. Copy the image src (shown above in red), and paste into your CSS. For example, if you wanted to use the image as a background for the document, you would use:
   
   body {
    background-image: url('File?id=abcdefg123456_987654zyxwv');
   }

Once an image has been uploaded, it can be used in any of your documents, so you may find it easier to create a separate document with all your images for easy reference.

Adding a watermark (non-repeating background)

CSS

Note: background-position is used to center this watermark at the top of the document. You could omit this and the watermark would appear in the top left of your document, or change it to move the watermark to a specific place in the background.

For more information, check out the help document here!

Repeating backgrounds

CSS

Note: Since the blue lines in this image are 20 pixels apart, a line-height of 20px is used to ensure the text and horizontal lines remain evenly spaced. Also, padding-left is used to prevent the text from straying into the left margin of the notebook paper image.

Want to learn more about this notebook image. Take a look at the doc here!

Styled Headers

Do you like your header to have some personality? Look no further. The information below will give you the ability to change your borders and text to different colors, sizes, widths and so on. You need only do the following:

1. Write some text and choose Heading (H1), Sub-Heading (H2) or Minor Heading (H3) in the "Format" drop-down menu
2. Add your H1, H2 and H3 styles to the "Edit CSS" dialog
   

 

CSS

Styled Quotes

Make your quotations really speak out by styling your blockquotes.
HTML


CSS



Learn more about styled quotes here!

Image Borders

We know you all want your lovely logos enveloped with a border. It's easy! Just insert an image into your doc and put the text below in the "Edit CSS" dialog. 

CSS

 

Styled Bullets

Add some spice to your lists by styling your bullets as images.

CSS

Note: We're using ul li here. This ensures that any numbered lists (ol) in your document retain their numbers.