Google Docs Help: Styles In Google Docs

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

Styles in Google Docs!

To me style is just the outside of content, and content the inside of style, like the outside and the inside of the human body, both go together, they can't be separated.

-- Jean-Luc Godard, French filmmaker and author

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


body {
 background-image: url('File?id=ad8wdwbvms_890m8v5pjdm_b');
 background-repeat: no-repeat;
 background-position: 50% 20px;
}


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


body {
  background-image: url('File?id=ad8wdwbvms_884g9vm4zwk_b');
  background-repeat: repeat-y;
  padding-left: 70px;
}

p {
  line-height: 20px;
}


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

h1 {
 background: url('File?id=ad8wdwbvms_902f9z2wgd8_b') no-repeat top left;
 padding-top: 26px;
 padding-left: 80px;
 text-transform: uppercase;
 font-family: Garamond;
 font-size: 22pt;
 color: #003300;
 border-bottom: 3px double #003300;
}
h2 {
 background: url('File?id=ad8wdwbvms_905cwjztrfc_b') no-repeat top left;
 padding-top: 12px;
 padding-left: 32px;
 font-family: Garamond;
 font-size: 18pt;
 color: #003300;
 border-bottom: 2px solid #003300;
}
h3 {
 background: url('File?id=ad8wdwbvms_906cb8g4mgj_b') no-repeat top left;
 padding-top: 0px;
 padding-left: 32px;
 font-family: Garamond;
 font-size: 14pt;
 color: #003300;
 border-bottom: 1px solid #003300;
}

Styled Quotes

Make your quotations really speak out by styling your blockquotes.
HTML
<blockquote>All the world's a stage...</blockquote>

CSS
blockquote {
 border: 3px double #AAAAAA;
 font-family: Garamond;
 padding: 15px 15px 15px 100px;
 margin: 0 80px;
 background-image: url('File?id=ad8wdwbvms_887fk6jk2hh_b');
 background-repeat: no-repeat;
}


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


img {
  border-width: 2px;
  border-style: dashed;
  border-color: #999999;
}

 


Styled Bullets

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

CSS


/* hearts */
ul li {
  list-style-image: url('File?id=ad8wdwbvms_872c3mz8xdt_b');
}
/* leaves */
ul li {
  list-style-image: url('File?id=ad8wdwbvms_873dqzfb4fj_b');
}
/* stars */
ul li {
  list-style-image: url('File?id=ad8wdwbvms_874hn5b66fm_b');
}


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

 

Styled Resume Doc

Here is an example of an actual styled doc. Our webmaster, Melissa, created this wonderful resume. You can make a copy of your own by clicking on "Make a copy" below the picture. Enjoy!

  Make a copy

Comments


David Millar

Wishlist: Allow Browser-Specific CSS

For some reason, when I add:

-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
border-radius:0.5em;

I get this when I save the CSS:

/* -moz-border-radius: 1em; */
/* -webkit-border-radius: 1em; */
border-radius: 1em;

It would be nice if my document could use those features where supported.

Last edited Jun 16, 2009 4:33 PM
Report abusive comment

Eric Celeste

Wishlist: Self-defined Styles

I would love to be able to write something like...

mycoolstyle {
color: green;
}

...in the CSS and then have Gdocs add "mycoolstyle" to the "Styles" menu for me to select.

I would also like the styles to apply to spans of characters, not just to whole paragraphs.

This is _so_ close to the "CSS" word processor dream I've wanted for a long while. Keep going in this direction, I think it is rich with potential.

Last edited Jun 16, 2009 3:46 PM
Report abusive comment

Emmanuel Eytan

Numbered headings

I've been trying to use CSS for numbered headings as explained here on the W3C site:

http://www.w3.org/TR/CSS21/generate.html

But it didn't work. Dang! Numbered headings would be nice.

Last edited Feb 21, 2009 5:07 AM
Report abusive comment

Ali

CSS for Forms

Very helpful article Thanks! One thing I couldn’t find How can I change css of a form?

Last edited Apr 18, 2009 5:44 AM
Report abusive comment

vim

program overrides

Very useful, but it would be nice to know the limitations, i.e. what changes you CANNOT make. For example: I wanted to use a lower-alpha as my numbering in stead of decimal. The Google Docs commented it out after submitting it (i.e. put it in /*..*/ so that it was not used). Saves a lot of trial and error.

Last edited Apr 18, 2009 5:50 AM
Report abusive comment

Casey T

Printing CSS Styled Docs

I am far from a CSS expert, however, after spending some time making a pretty slick doc template I was disappointed to find i couldnt print the images i used in the CSS code. Is this a limitation of the current CSS implementation or is there something basic i'm missing? I didnt have any problems printing the same images manually inserted into the document from my hard drive....

Last edited Jan 27, 2009 11:39 AM
Report abusive comment

Anonymous

External style sheets?

Is it possible to use external style sheets in Google Docs, or does the "Edit CSS" command just create an internal style sheet inside the individual document being edited?

Is Google Docs able to produce downloaded Word/PDF/etc.versions of documents that reflect the styles given to them by internal and/or external style sheets?

Last edited May 28, 2009 7:59 PM
Report abusive comment

David Megginson

Default CSS for new docs

The CSS has worked well for me, but it would be really nice to be able to set a default CSS stylesheet for new docs, instead of having to copy and paste (especially since I have a lot of docs following the same style).

Last edited May 9, 2009 5:19 PM
Report abusive comment

Anonymous

How do I change a link color in a Google Doc using CSS?

The information above is helpful, but how do I change a link color in a Google Doc using CSS?.

Right now the default link color is blue and that becomes a problem if I change background to a dark color and elect to use white text, even for the link.

Thanks for responding.

Last edited Dec 2, 2008 1:40 PM
Report abusive comment
1 - 10 of 11   Older comments »   Show all comments
©2009 Google