Styles in Google Docs - Google Docs | Google Groups - The Diigo Meta page

• 27 Sep 11
  

  oconel M

  software googledocs

• 08 Aug 08
  

  Michael Hauser

  googledocs delicious

• 04 Aug 08
  

  Toshiro Shimura

  googledocs css html tips layout

  • 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!
     

    
  • 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!

    

     

  7 more annotations...

• 22 Jul 08
  

  Rob Clarke

  css for:sibsonpaul googledocs webdesign

• 19 Jun 08
  

  Liu Lin

  google docs CSS

• 02 Jun 08
  

  Tom Hamsher

  gdocs gafyd css

• 11 May 08
  

  Ambroise Ingold

  css googledocs tutorial import-delicious

• 

  boolean

  googledocs

• 

  Gary Miller

  CSS Google templates web2.0

• 09 May 08
  

  Luis Oopsh

  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. Th

  idsh dis goog recursos colaborasocial web2.0 todo soft probar docs iplus

• 

  Stuart H

  CSS Google googledocs Docs Template documents

• 

  Dan Vos

  googledocs css tips

• 08 May 08
  

  paul petty

  googledocs css

• 

  Rei G.

  css gdocs

• 07 May 08
  

  GoogleDocs

• 05 May 08
  

  Martin Lindner

  So, as a first step we've enabled "Edit CSS" on Docs such that you can explore styling documents. T

  googledocs gdocs delicious

• 

  Mark Rabnett

  Easy introduction to CSS for Google Docs.

  google.docs styles templates formatting CSS

• 04 May 08
  

  Alain Antone

  Styles in Google Docs!

  google docs docs css googledocs

• 03 May 08
  

  kglme0903

  玩不完的flash小遊戲
  

  css googledocs

• 

  johntw

  玩不完的flash小遊戲
  

  css googledocs

• 02 May 08
  

  google css docs template import

• 30 Apr 08
  

  Gary Bertoia

  CSS Gdocs

  docs css ssischool

• 29 Apr 08
  

  andybezbozhny

  google css

Would you like to comment?

Join Diigo for a free account, or sign in if you are already a member.