Search this site


Search us on the go!
m.kccloudsolutions.com

Using the STYLE Attribute with Google Sites

posted Apr 10, 2009 1:05 PM by Brian Johnson   [ updated Jan 27, 2010 8:01 PM by Brian Johnson ]

In a recent post to the Google Sites User Forum by insertnamehere, I was given the idea to write an article about how you can use the style attribute to get around the CSS limitations of Google Sites.  The content of his original post is as follows:

If you wan't to add CSS to you're site, but you can't because google sites can't do that, or if you wan't to add some special text effect, but the "Your HTML either contains unsafe tags (iframe, embed, styles, script) or extra attributes. They will be removed when the page is viewed." message, you may wan't to try this:
<div style="insert css code here">insert text that you wan't the css code to apply to here</div>
It works, and google sites let's you add it.

Simply put, you can use the style attribute to customize the appearance of most any element of your website.  For example, the two boxes to the left of this screen that appear with red and green borders are formatted using this method.  I will outline how this is done, and provide samples that you can copy for your own use.


Have a question, but don't know where to start?  Check out the Google Sites FAQ! 


The style attribute is a property (or properties) of a page element such as a Paragraph <P>, Table Row <TR> or DIV section <DIV>.  The page element can exist without the inclusion of the style attribute, but with it, you can customize your site as if you had access to the CSS code.

Possibilities


There are many different possibilities with the style attribute.  A few of these are:
  • Define the background color of a page element
  • Define the border style, width and color of a page element
  • Format fonts (color, size, weight, etc)
  • Control margin widths for page elements
  • And more!

How would you use these on your site? 


To use the style attribute on your site, you will need get comfortable with editing your site through the HTML editor.  The HTML editor is accessible through the HTML option on your editing toolbar.

Define the background color of a page element.
When defining colors, you can use the hex, RGB or English representation for your chosen color:
<TABLE style="background-color: #FF0000;">
<TABLE style="background-color: rgb(255,0,0);" >
<TABLE style="background-color: red;">
Define the border style, width and color of a page element.
  
<TABLE style="border: 1px dashed blue;">
<TABLE style="border: 2px solid #FF0000;">
<TABLE style="border: 2px dotted green;">
Format fonts (color, size, weight, etc.)
<DIV style="font-family: courier; font-weight: bold; font-variant: small-caps;">
<DIV style="font-family: times; font-style: italic; font-size: x-large; font-color:">
<DIV style="font-family: sans-serif; font-size: x-small;">
Control margin widths for page elements.
 <P style="margin: 10px 20px 30px 40px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tellus neque, luctus vel iaculis nec, fermentum ut nibh. Cras sed mollis odio. Sed lacinia purus vitae risus vestibulum vel vehicula.




Other Resources

Sign in|Report Abuse|Print Page|Remove Access|Powered By Google Sites