Cascading Style Sheets: Got Branding?

What is CSS? CSS = Cascading Style Sheets Styles define how HTML (web) elements are displayed. One (or more) style sheets can be applied to a site  One change can affect the entire look and feel of the site!

CSS: A Brief History HTML was never intended to contain tags for formatting. However, in HTML 3.2, tags such as and were introduced to aid in formatting. This caused major headaches for large sites, as even simple changes had to be applied across all pages: A long and expensive process.

CSS: A Brief History (cont.) CSS was introduced in HTML 4.0, which allowed all formatting to be stored in an external file that could be used by the entire site. Thus a single change to that file can effect your entire site. Changing fonts, colors and layouts are now quick and easy

So, What Does CSS Do? Controls look and feel of the site:  Colors (fonts, backgrounds, links, etc)  Fonts (sizes, attributes, faces)  Images (borders, etc)  Positions (margins, alignments, etc)\  Much more, too expansive to list  In other words: pretty much everything related to layout or look and feel

How About an Easy Example? Warning: Code ahead!.para1 { color:red; } Hello World! = Hello World!

A Short Example o_default.htm o_default.htm Click on each Style to view how quickly you can change the look and feel.

Using CSS Three ways to use CSS:  External style sheet  Internal style sheet  Inline style

Using CSS (cont.) External Style Sheet  Link to external document  One change will affect all pages “calling” this style sheet

Using CSS (cont.) Internal Style Sheet  Used when one document or page needs it’s own style. Changes will only affect that page hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}

Using CSS (cont.) Inline Style  Define style on tag itself.  Best to avoid if possible, as you lose advantages of CSS This is a paragraph.

What does ‘Cascading’ mean? Multiple style sheets can be applied, and the changes “cascade” into one style sheet that is applied: Internal Sheet: h3 { text-align:right; font-size:20pt; } External Sheet: h3 { color:red; text-align:left; font-size:8pt; } Result: color:red; text-align:right; font-size:20pt;

Order Styles are Applied Multiple styles (when defined) will be applied in the following order:  Browser default  External Style Sheet(s) in the order they are defined  Internal Style Sheets  Inline Styles This means inline styles will override all else

A Much Longer Example CSSZenGarden: le=none le=none  This is a basic HTML page with no styles assigned.  By applying a different CSS (under the “Select a Design” section), you can make the same content appear a multitude of different ways.

CSS and Branding CSS Allows you to:  Brand your site according to today’s guidelines  Easily and quickly keep your site branded as conditions change without the need to edit each page. One simple change in one file can be applied across your entire site

Why is it Important? Provides consistency Easy maintenance Easier for “non-techies” to maintain the site Browser compatibility: Prevents use of atypical styles that may not show correctly in some browsers

Why is it Important? (cont.) Viewing options: It is becoming increasingly important to offer websites on different media (such as mobile browsers) Bandwidth and speed reduction: smaller file sizes, caching of CSS Search Engines: Site becomes more “content” and less “code”

Some Tools for Developers Major browsers allow real-time editing (but will not commit changes) CSS and HTML:  Firebug for Firefox (add-in)  Internet Explorer 8 Developer Tools  Chrome’s “Inspect Element” feature

More Resources CSS free self-paced course at W3Schools  o.asp o.asp Firebug for Firefox:  CSS Validator: 

Questions? Mark Proper Technical Project Specialist CCAP IT