1. It’s All About Style The Basics of Style Sheets Presented by Barry Diehl

2. Overview  What are Style Sheets?  Benefits of CSS  Problems with CSS  Recommendations  Sources

3. What are style sheets?  A collection of rules that determines how a browser displays HTML tags. Also known as Cascading Style Sheets (CSS).  Consists of two parts: 1. Selector – the HTML tag the style will affect 2. Style – has a property and a value

4. Inline Styles – Add to a tag  No selector  Applies to the tag in which it belongs Paragraph text here  Best used as an exception to regular rules

5. Inline Styles - tag  Define an area over which a style will be applied  Not attached to a structural HTML element Heading Paragraph text.

6. Internal Styles  Applies to entire document  Insert tag between tags Page Title BODY {background: white; color: black} H1 {font: 24 pt “Arial” bold} P {font: 12 pt “Arial”; text-indent: 0.5in}

7. External Style Sheet  Style data are kept in a separate file External Style Example  is not in the file

8. Comparison – Inline Styles Useful for setting styles for small sections of a document Can override all other style specification methods Combining style with content and structural information Doesn’t apply to same tag elsewhere in document or other documents

9. Comparison – Internal Styles Useful for setting styles for an entire document Can use classes to create styles for multiple types of tags Style information is included when the document downloads for faster rendering Cannot be used for multiple documents

10. Comparison – External Style Sheet Standardize styles for a site Can use classes to create styles for multiple types of tags If used repeatedly, will be cached for faster retrieval Requires extra time to download a separate file Documents may not render correctly if there’s an error with the style sheet file Hard to make small changes in the document

11. Defining Styles with CLASS  Add styles to a specific tag BODY {background: white; color: black; font-size: 14pt} P.large {font-size: 18pt} P.small {font-size: 10pt} This paragraph will be large. This paragraph will be small.  Add styles without a tag – just have a period before the class name

12. Handling Exceptions with ID  Assign exception value to an id using the # sign  Use the id to change a value in a style.normal {font-size: 16; color: blue} #fire {color: red} Normal text is 16-point blue. This text is 16-point red.

13. Inheritance  Styles are inherited from previous definitions of tags BODY {background: white; color: black; font-size: 12pt} H1 {font-size: 24pt; color: green} UL {font-size: 10pt; font-style: italic}

14. Cascading  Collecting, sorting and applying rules  A rule’s importance is based on:  If it has an explicit weight (“!important”)  Where the rule originated  Designer  User  Browser  How specific the rule is  Order of presentation (recent has priority)

15. Benefits of CSS  Standardize pages across a web site  Save bandwidth/load faster  Develop faster  Change pages quickly and easily  Easy to learn and use  Separates presentation and content

16. Problems with CSS  Browser implementation varies – until 6.0, Netscape was the worst  Style sheets won’t allow pages to be identical on all screens – there are too many variables

17. Recommendations  86% of Internet users surf with Internet Explorer  Determine percentage for your own site  Use pixels – only safe method – points are good only for printing  Use style sheets for what they do well – like fonts. Use tables for margins.  Pages should be viewable without style sheet  See browser compatibility table at: www.webreview.com/style/css1/charts/mastergrid.shtml

18. XSL  New language designed to work with XML  Can’t be used with HTML

19. Sources HTML Publishing on the Internet, 2 nd edition by Brent Heslop and David Holzgang (The Coriolis Group, 1998) Webmonkey (Mulder’s Stylesheets Tutorial) http://hotwired.lycos.com/webmonkey/authoring/tutorials/tutorial 1.html http://hotwired.lycos.com/webmonkey/authoring/tutorials/tutorial 1.html Sample Sheets from W3C – www.w3c.org/StyleSheets/Core/Overview www.w3c.org/StyleSheets/Core/Overview Jeffrey Zeldman – www.zeldman.comwww.zeldman.com Little Shop of CSS Horrors – www.haughey.com/csshorrorswww.haughey.com/csshorrors