1. CSS - Part 2 Cascading Style Sheets Jim Eng jimeng@umich.edu Thanks to Gonzalo Silverio for some slides gsilver@umich.edu

2. Overview Image credits HTML / CSS big picture... again More HTML tags The ‘C’ in CSS - Cascading “Advanced” CSS Tools - FireBug and Web Developer

3. Image credits Credit for your work Attributing other people’s work Copyright Creative Commons http://creativecommons.org http://en.wikipedia.org/wiki/Creative_Commons

4. Color Names W3C has listed 16 color names that will validate with an HTML validator. The color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. http://www.w3schools.com/html/html_colors.asp

5. Colors by the number... #e2edff Three Numbers, Red, Green, and Blue - each from 00 - FF (Hexidecimal) #ffffff = white #000000 = black #ff0000 = red #00ff00 = green #0000ff = blue http://www.w3schools.com/css/css_colornames.asp Web-safe colors

6. Jacob: http://kuler.adobe.com/http://kuler.adobe.com

7. Samantha: http://colorcombos.com/ http://colorcombos.com

8. Fonts body { font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; font-size: x-large; } Most FavoriteLeast Favorite Fallback fonts: serif, sans-serif, monospace, cursive and fantasy.

9. Font Factors font-size: xx-small x-small small medium large x-large xx-large font-weight: bold or normal font-style: normal or italic text-decoration: none, underline, overline, or line-through

10. HTML / CSS big picture... again Markup is all about structure and meaning Style sheet is all about presentation Is this right?

11. Emerging conventions & rules of thumb A series of items: p p p p p p A series of items with attributes: ul or ol A series of items with name-value pairs defining attributes: dl A series of items with more many attribute values: table Sections and, subsections: h1, h2, h3,... h6, hr as separators

12. Markup a baby

13. Jack is a cool baby. He has... green jammies a sweet smile He sleeps a lot.

14. Markup a baby (2) Riiiiing! Riiiing! Riiiing! Baby Hi Mom! Mom Sweetie! Where are you? Baby At the park, where you left me this morning… Mom OMG! Stay right there!

15. Markup a taxi stand

16. 388 231 123

17. Markup a taxi stand 388 Fred Reliable

18. Markup a fruit bowl

19. Tropical fruit by size Pineapple Banana Citrus fruit Orange Lemon Dangerous fruit and why Mango Causes alergic reactions Strawberry Can choke when eaten

20. Pineapple Banana Orange Lemon Mango Causes alergic reactions Strawberry Can choke when eaten... ordered list... definition list... unordered list

21. Markup a fruit bowl (2) Tropical fruit Pineapple Hard to peel Banana ”Essential to comedy” Round fruit Citrus fruit Orange Some pithy remark Lemon Some pithy remark

22. Markup Google

23. Markup Google ideal?

25. Markup Google - the Reality Meaningless, presentational markup Where are the lists? tables, divs, spans, font, underline, bold, nobr - why not blink! But that’s OK!... sort of It is essentially HTML 4 transitional loose A lot of old browsers out there!

26. Gonzalo’s approach to markup Work without style – needs to make sense “naked” – See www.umich.edu www.umich.edu Add meaningless cruft (from the point of view of markup) as last step because of: Canvas needs Flexibility Positioning issues

27. Anatomy of a CSS Rule

28. What does “cascading” mean? http://css.maxdesign.com.au/selectutorial/advanced_cascade.ht m http://css.maxdesign.com.au/selectutorial/advanced_cascade.ht m Even simple web page could have three sylesheets applied Browser stylesheet Author’s stylesheet(s) User’s stylesheet Plus embedded rules and inline rules There can be conflicts

29. Resolving cascade conflicts http://css.maxdesign.com.au/selectutorial/advanced_conflict.htm Generally, author styles override user styles which override browser styles "!important" can be set on any declaration to override other styles Used by people with special needs (font size, colors, etc) Explore conflicts with Firebug

30. In conflict, who wins? A link body{ color:gray} p {color:blue} span {color:green} a {color:fuchsia} span a {color:black} p span a {color:lime} body p span a {color:red} #bingo{display:none} What color will “A link” be?

31. Nested selectors... again p a {all descendants of } p > a {all children of } p * {all descendants of } p > * > a {all grandchildren of } span#shriek {the one that has a shriek id} span.omg {all with an omg class} span[class=omg] {all with an omg class} span + a { all that are the same level as a } p#spud > * > a.bungo[href=the_bad_place.html]

32. Gonzalo’s styling procedure 1) zero out the default stylesheet of the browserhttp://developer.yahoo.com/yui/reset/http://developer.yahoo.com/yui/reset/ 2) map the cascade, working from a design 3) add style selectors to markup (if needed at all!) 4) style for IE 6 first 5) style for Moz/Safari/IE 7 last

33. Adding selectors to markup economy - make cascade work for you! but make sure you have what you need addressability for styling - but behaviors as well choices- id or class?- can address without adding either? Leave alone then

34. Adding style hooks Why ids?Why not just class everything? What if I need an in #content that needs to look different from the one in #nav ?

35. Adding style hooks Why ids?Why not just class everything? What if I need an in #content that needs to look different from the one in #nav ? Everything is addressable!#nav h1#nav ul#nav li#nav li a#nav li a span#nav li#current#nav li#current span

36. Styling: style for IE 6 first Crippled implementation of CSS1 http://www.westciv.com/style_master/academy/browser_sup port/selectors.html http://www.westciv.com/style_master/academy/browser_sup port/selectors.html Keep it simple – standard selectors + class + id, few fancy paths And no fancy property and values If you need fancy, make sure that the markup is there for it…

37. For example <li id=“current” class=”first”> If you wanted to add a pipe between each list element, you need to know which is the first!The IE 6 wayli {border-left:1px solid lime}li.first{ border:none}The modern browser way:#nav > ul > li {border-left:1px solid lime}#nav > ul > li:first-child {border:none}

38. Styling: style for Moz/Safari/IE 7 last Dynamic pseudo class selectors (:active, :hover, :focus) Pseudo class selectors on all elements (not just ) :first-line, :first-letter :before, :after (for adding “content”) First child selectors (E:first-child) Adjacent selectors (E + F) Attribute selectors (E[foo=warning])

39. Examples http://www-personal.umich.edu/~gsilver/ui-experiments/welcome.html

40. CSS Box Model height and width properties size the block element margin properties define the space around the block element border properties define the borders around a a block element padding properties define the space between the element border and the element content background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page http://reference.sitepoint.com/css/boxmodel

41. The Box Model.trapped { height: 100px; width: 200px; margin: 20px; border: 5px solid yellow; background:red; padding: 20px; font-family:Arial; color:orange; font-size:20px;} I am trapped in a glass case of emotion which is 100px high and 200px wide. 150 190 140 100 5 20

42. Border, padding, and margin are additive..trapped { height: 50px; width: 50px;}.trapped2 { height: 50px; width: 50px; border: 5px solid yellow; padding: 10px;} One Two