Google Sites offers some basic formatting options. What if you want your Google Site to not look like a Google Site? The answer: CSS. We like headings in a site to draw attention to different sections of content. The most commonly used formatting option are Heading tags: <H1>, <H2>, etc. Use these and you'll get something like this:

  • Format >> Heading (H2)
What if you want some color or something more stylized? Then you'll need to get a little nerdy and edit the HTML. We can use some basic CSS styles to spruce up our site. In this case I'm using inline CSS on <div> tags to get what I want.

  • Edit <HTML>
  • Wrap the heading text in a <div> tag
  • Format with inline CSS
  • <div style="
Now you have a nice bar for each heading. Change the background-color attribute to change the style a bit. Notice the border-radius attribute which makes it all a little less boxy. Without this our ends would be squared off.

CSS has some pretty amazing style attributes. These are now supported by all modern browsers. Drop shadows are possible. However Google Sites will strip out some styles if you simply edit the <HTML>. There is, however, an HTML Box gadget that allows you to use more CSS as well as Javascript (which gets REALLY nerdy). It's pretty easy to do with a few tweaks to the code.

Try this....
  • Insert >> HTML Box
  • Add <div style="width:99%"> </div>
  • Add a <br /> after the new <div>
  • Paste the entire <div> code used above inside the new <div> tags you just created.
  • Add a new style: box-shadow: 5px 5px 3px #A3A0A1;

Bob's your uncle! Now you have some style that makes your site not look like a Google Site.

Connect & Share
Circle Me Follow Me Watch Me Play with Me Read Me See Me