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 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"
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.
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
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
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
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
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.