1 / 20

Cascading Style Sheets: Got Branding?

Cascading Style Sheets: Got Branding?. What is CSS?. CSS = C ascading S tyle S heets Styles define how HTML (web) elements are displayed. One (or more) style s heets can be applied to a site One change can affect the entire look and feel of the site!. CSS: A Brief History.

istas
Download Presentation

Cascading Style Sheets: Got Branding?

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets: Got Branding?

  2. 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!

  3. CSS: A Brief History HTML was never intended to contain tags for formatting. However, in HTML 3.2, tags such as <font> and <color> 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.

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

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

  6. How About an Easy Example? = Hello World! Warning: Code ahead! <html> <head> <style type="text/css"> .para1 { color:red; } </style> </head> <body> <p class="para1">Hello World!</p> </body> </html>

  7. A Short Example http://www.w3schools.com/css/demo_default.htm Click on each Style to view how quickly you can change the look and feel.

  8. Using CSS • Three ways to use CSS: • External style sheet • Internal style sheet • Inline style

  9. Using CSS (cont.) • External Style Sheet • Link to external document • One change will affect all pages “calling” this style sheet <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

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

  11. Using CSS (cont.) • Inline Style • Define style on tag itself. • Best to avoid if possible, as you lose advantages of CSS <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

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

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

  14. A Much Longer Example • CSSZenGarden: http://www.csszengarden.com/?cssfile=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.

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

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

  17. 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”

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

  19. More Resources • CSS free self-paced course at W3Schools • http://www.w3schools.com/css/css_intro.asp • Firebug for Firefox: • www.getfirebug.com • CSS Validator: • http://jigsaw.w3.org/css-validator/

  20. Questions? Mark Proper Technical Project Specialist CCAP IT mproper@pacounties.org

More Related