Google Sites CSS (CSS1 to CSS3)




Google Sites CSS  (CSS1 to CSS3)

CSS Level 1

Designing a Google Sites page layout and overall Site look and feel can be time consuming, because of this Google Sites CSS is generally available through the system site wide themes and templates and page layout copy and templates. External CSS files are not supported on web pages.

Without a clear sense of design and layout modify CSS values can be very experimental. Material Design has provide an excellent guide and visual infrastructure for creating a consistent style and feel to a web site.

Referencing the W3C specification many of the CSS level 1 specification are available within Google sites for CSS design of your Google Sites pages and layouts.

Inline CSS

Inline CSS is the only way in Google sites to get a refined CSS styling , this can be work intense without the right site wide approach.

An example of of inlined style is say "overlay" as in style="overlay:hidden"

A powerful style sheet example is to hide the content and create a slider using no JavaScript.


More CSS Examples

Some interesting CSS Design areas to be look at in Google Sites CSS are as follows. Starting with CSS1 and moving towards CSS2 & CSS3 W3C standards within Google Sites System and page CSS.

Material Design CSS

Using Material Design in Google Sites is difficult without a External Style Sheet to maintain your Site . If you only have on a few pages to Style Material Design can be very effective to give your site a boost in Design, helping UX [User Experience]. Having standard designed consistent elements is always a very good idea i.e. blue links etc.. CSS3 styles are integral to the construction and extension of Material Design styles and sites.

CSS Border Radius

Using border radius is a nice design way to soften border of an information or text box.

CSS Buttons

Styling Buttons can be an excellent way to solidify the look, design and intent i.e. buy this! of your Google Site.

CSS Expandable List

Creating an Expandable List is a quick way to compress large amounts of page data & content like a Technical FAQ etc..

CSS Font Icons

Fonts are widedly available in Google Sites , using standard font icons helps to create a fast intuitive UX for your site.

CSS Blur Effect

Effects like Blur can often be over used, but in the right place can be the perfect touch to polish a Google Sites UX and Design.

Automated CSS Variations

Using Apps Script it is possible to automate the CSS variations of Google Site. Saving a massive amount of time going back and forth in system CSS and direct inline editting.

Browser CSS Variations

Many Browser have several tols to assist with CSS. Using the Browser style Editor you can preview CSS style just with the design view quickly with and without actually updating your Site or page.

CSS Browser Workflow

It is very important to create a style and stick to it strictly or else you can quickly have a mix of styles that can conflict the overall design of a Site.

CSS Horizontal Parallax

Creating Scroll and parallax effects are very common in HTML5 applications, These effects can be achieve through native browser support and sometimes just basic CSS editing without JavaScript .

CSS Inspector Direct Edit

In some browsers, like Firefox and Chrome it possible to actually edit the WYSIWYG text on a Google Sites page directly. In some style Editors it is also possible to Import Custom CSS file for testing further variations.

CSS Inspector Rules

Important: Using the style Inspector it is possible to test the compatible CSS that is available in Google Sites , without even creating the inline style. As soon as the individual style is rejected by the Inpector then you instantly know that the specific Style Rule is not supported by Google Sites.

CSS Style Editor

Using the Style editor can be very effective when you are not 100% sure on the name o the CSS rule you would like to apply.

CSS Vertical Parralax

Using the same technique as the horizontal parallax many of the biggest sites like Google, Apple and Amazon use native CSS styles to achieve fast performance on their sites.
Drag and Drop CSS Styles
Experimental : Drag and Drop style is available through jQuery JavaScript.

Google Sites Workflow

Again it is very important to have an overall theme and style in mind before you create content, but always view and create the content without any style or even view in a text browser to ensure the content is well laid out, legible and visible. Especially on Mobile devices and now even aiming towards VR and AR devices for even basic text views and interaction.

HTML & CSS Slider Examples

The native CSS slider using anchor tags is a very popular approach that has been evolved in JavaScript & jQuery CSS techniques and there are many variations of the slider available. The jQuery CDN is available in Google Apps Script because it is hosted by Google CDN servers.

Import CSS Styles

You can import several CSS external files to preview in a browsers style editor.

Fixed Navigation CSS Slider Test

Many sites like Google and Mozilla use fixed navigation, this make for a very quick reference experience that is similar to slider only the actual 'Table of Contents' is fixed an moves down the page instead of the content moving up.

Hidden Scroll Slide

It is possible to have the slider Scroll visible so it acts as part of the UX of te page especially for extensive information and content, it is a good idea to have some reference on how much advanced you are into the content.