How to use CSS in Google sites

Google sites has certain limitations as to how much you can customize a website.   You can edit the HTML behind a page in Google sites, but there are limits on the use of CSS.    This page explains a workaround so that you can put CSS in a Google site page.

CODE THAT WON'T WORK

For example, if you try to add some CSS to the html in a Google site page such as:

<style type="text/css">
 
@media print {
  /* cssclsNoPrint class. */
  .cssclsNoPrint {display:none}
}

</style>

when you save this html, Google sites will remove it as an HTML tag that is not permitted.


SOLUTION

If you embed your code in an HTML object tag, Google sites will accept your more complicated html.   So, for example:

<object xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">

@media print {
  /* cssclsNoPrint class. */
  .cssclsNoPrint {display:none}
}

</style>
<span class="cssclsnoprint">
<div style="text-align:center"><font size="4">Tools to help you make the most of Dynamics GP software.</font></div>
<div style="text-align:center"><font size="4">Buy the software at a discount.    Documentation.   Tips.   Help resources.</font>
</span>
</div>
</object>

If you paste this HTML into a Google site page, and save it, Google sites will save it as a "Google Gadget".