1. CSS: Beyond the Code Karen Perone Rodman Public Library peroneka@oplin.org

2. HTML vs. CSS vs. Javascript HTML for content (text, images, sound) CSS for presentation (layout, color) Javascript for behavior (cursor in the box, form field validation)

3. Why CSS? Keep presentation separate from the content Leaner, meaner web pages Ease of maintenance Easier means of reusing web pages for other purposes (RSS, text-to-speech) Separate style sheets for media types

4. The Cascade The “C” in CSS Least specific to most specific Depends on type of origin User agent (browser defaults) Author (web page creator) User (user styles in browser)

5. User Agent http://whatsmyuseragent.com/ Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16 Built-in style sheet in all web browsers Varies from Firefox to IE6 to IE7 to Opera, etc.

6. Author Styles Created by the web site/page author Can be (least specific to most specific): Linked (external) Style element (embedded) Element attribute (in-line)

7. WebPAC Style Sheets ProStyles.css -or- iiiStyles.css (default values; cannot be modified) styles.css (main author style sheet) ie_styles.css (specifically for IE browsers) printVer.css (specifically for print version)

8. The Document Tree Helpful in determining containing elements Establishes: Ancestor Descendent Parent Child Sibling Determines inheritance of CSS rules

9. http://www.guistuff.com/css/css_doctree.html

10. Relationships

11. Class vs. ID ID Can be used only once on a page Identifies a specific section Example: toplogo, content, side navigation, footer Use in style sheet: div#nav Use in HTML:

12. ID in styles.css Selector specified div#main {margin: 0 20px 5px 5%;} Implied universal selector #main div {padding-top:.2em} Can be combined with class #main.tabs a:hover { text-decoration: underline; }

13. Class vs. ID Class Can be used multiple times Styles a type of content Example: boldface, paragraph alignment, font Use in style sheet: p.bold Use in HTML:

14. Class in styles.css Implied universal selector used extensively.navigationRow { margin: -3px; } Could be used as a div or p or ul div class=“navigationRow” p class=“navigationRow” ul class=“navigationRow”

15. Pseudo-classes Most common :link :visited :hover :active Always use in this order: L V H A (LoVe – HA!)

16. Pseudo-classes Less often used :focus input:focus { background-color: Red; } BEFOREAFTER

17. Fun with Pseudo-classes :first-child table.bibItems tr.bibItemsEntry td:first-child { font-weight: bold ; color: Green ; font-size: 200% ; background-color: red ; }

18. How We Got There table.bibItems tr.bibItemsEntry td:first-child From briefcit.html:

19. Specificity Represented by four comma-separated values Calculated based on counting elements in the selector The highest value wins In case of a tie, the last declaration wins

20. Figuring the Specificity 1.In-line style 2.Ids 3.Classes, Attributes, and Pseudo-classes 4.Element Types and Pseudo-elements

21. Consider This Example p { color: black; background-color: blue; font-size: 3em; } div.warning p { color: red; } div#caution p { color: yellow; } body#home div p { color: white; } What color will the paragraph text be? What color am I?

22. Add Up the Scores p { color: black; background-color: blue; font-size: 3em; } 0,0,0,1 div.warning p { color: red; }0,0,1,2 div#caution p { color: yellow; } 0,1,0,2 body#home div p { color: white; } 0,1,0,3 What color am I?

23. And the Winner Is…

24. Inheritance of Style In the absence of a specific declaration for the element Value of element will inherit its characteristics from its parent

25. Specificity High to Low

28. Why Is My Text So Small ? Container size has nothing to do with it Size property is inherited from parent Nesting the elements will cause cumulative size Relative font size the culprit

29. Container Elements Box elements that can contain other elements Examples of box elements: body div p h1 ul

30. Example div.a { font-size: 85% ; } div.b { font-size: 85% ; } div.c { font-size: 85% ; } text in div.a text in div.b text in div.c

31. Hard to tell from here why text gets smaller

32. But add in borders and widths and it becomes apparent

33. Mathematically Speaking… div.a - 85% of body default font size 85% x 100% = 85% div.b - 85% of div.a font size 85% x 85% = 72.25% div.c - 85% of div.b font size 85% x 72.25% = 61.41%

34. Options that Work div.a { font-size: 18pt ; width: 85% ; border: 2px solid red ;} div.b { font-size: 18pt ; width: 85% ; border: 2px dashed blue ;} div.c { font-size: 18pt ; width: 85% ; border: 2px dotted green ; } ================== div.a { font-size: 85% ; width: 85% ; border: 2px solid red ;} div.b { font-size: 1em ; width: 85% ; border: 2px dashed blue ;} div.c { font-size: 1em ; width: 85% ; border: 2px dotted green ; }

35. Floats : Friend or Foe?

36. Check Your Work HTML Validator http://validator.w3.org/ http://validator.w3.org/ CSS Validator http://jigsaw.w3.org/css-validator/ http://jigsaw.w3.org/css-validator/

37. Check in Various Browsers http://browsershots.org/

38. CSS Editor TopStyle Lite or Pro http://www.bradsoft.com/topstyle/tslite/ http://www.bradsoft.com/topstyle/tslite/ Lite is free Pro is $79.95 – and WORTH it

39. Develop Your Skills Take an Online Course http://eclasses.org/ http://eclasses.org/ Discounts available to International Webmasters Association members ($49 annually) http://www.iwanet.org/http://www.iwanet.org/ http://www.w3schools.com/css/ http://www.w3schools.com/css/ (free)

40. For More Information General CSS: Olsson, Tommy & Paul O’Brien. The Ultimate CSS Reference. Sitepoint, 2008. http://reference.sitepoint.com/css http://reference.sitepoint.com/css Specificity: O’Brien, Paul. “Get Specific with Your CSS Styles.” www.sitepoint.com/article/get- specific-css-styles/ www.sitepoint.com/article/get- specific-css-styles/

41. CSS “Cookbooks” Andrew, Rachel. The CSS Anthology: 101 Essential Tips, Tricks & Hacks. Sitepoint, 2007. Schmitt, Christopher. CSS Cookbook. O’Reilly, 2007.