USING STYLESHEETS AND CSS

You can use stylesheets in many different ways. It is impossible to explain everything here, so you should be prepared to do some self-study if you want to use these extremely useful features. 

Basically you use CSS styles to describe the layout of your page. Instead of marking every header, every table and every paragraph with its layout characteristics, you merely mark it with a "designator". The designator describes as many layout features as you want: font, font color, font weight, margins, background color, etc etc. 

All you then have to do is mark a certain part of the code as "body" and all the features of the body-designator will be applied to that text. In a big website you can easily have 30 or more parts of body-text. Suppose you're ready with your website, and then decide to change the font and the font color. Normally that would be a horrible job: with CSS you just change the designator-code and it automatically will apply to all body text.

Basically there are three kinds of CSS styles: 

1 - In-line CSS style
2 - In-page CSS style
3 - External CSS style.

ad 1 - In-line CSS is normally used to influence a very limited portion of your page: just a few words or a few lines that should be different from the general style that is applied. I will not discuss this here any further.

ad 2 - In-page CSS comes as a special "chapter" of html code at the beginning of your html code. It must be placed between the <HEAD> and </HEAD> tags. You can use this feature within your standard GPC page by adding extra lines of code to the google html code. I'll explain this briefly further on. Here is an example page where I have used this technique.

ad 3 - External CSS style is applied by making a separate file that contains just the CSS code. This file is then loaded "into" your webpage and the designator code is applied to those parts that you have marked with style tag. You cannot use this feature within a standard GPC page, only on a page that you make yourself and then upload. These help-pages are made that way.

STEP BY STEP EXAMPLE

1 - If you plan on inserting small bits of html code, you can NOT do so manually, directly into the google code, by using the EDIT HTML button. 
Instead use the technique described in the tip about Nested Tables.

2 - In the Google-code find the html code lines 

  /** END CUSTOM SKIN **/ 
  </ style> 

3 - Between these two lines insert your own CSS code.

4 - Do not use code like h1, h2, h3 or body because these have been pre-defined by Google.

5 - This example was made using the code underneath: 

<!-- .bodytekst { font-family: Trebuchet MS; color: #008080; font-weight: bold; text-align: left; text-indent: 10; line-height: 150%; margin-left: 0; margin-right: 0 } --> 

6 - The text was then marked with this code:

  <p class="bodytekst">

7 - Generally there will already be <P> so you just have to add the remaining part of the code snippet. Make sure that after the text that you want to change with your CSS code, there is an end-tag in the form of </P> .
IF there's a <DIV> there should be also a </DIV>, etcetera.

safe mode