Using CSS (Cascading Style Sheets)

1. Effie Nadiv Edited by permission from author by Amir Kirsh Using CSS(Cascading Style Sheets)

2. Using CSS • Linking • CSS Selector • Styling • Hacking

3. Quick History • First CSS proposal by Hakon Lie in Oct 94 • W3C established and CSS workshop run in 95 • CSS1 becomes a recommendation in Dec 96 • CSS2 becomes a recommendation in May 98 • Drafts of first 3 CSS3 modules published in June 99

4. CSS Linking • <link href="http://styleguide/build/241/script/yui/calendar/assets/calendar.css" type="text/css" rel="stylesheet" /> • Alternate: • <link title="Verizon" href="skins/vzw/vzw.css" media="screen" type="text/css" rel="alternate stylesheet" />

5. Use Relativity • When linking to a style sheet use a relative path: href="skins/sg/narrow.css" • When pointing a resource inside a style sheet use a relative path: src=”images/my-image.png”

6. CSS Rule • selector { property: value;}

7. Selector • ID (#main-menu) • Class (.sidebar) • HTML tag (body) body{background-color:#fff;} body #wrapper {background-color:#ccc;} body div.menu {background-color:#fff;}

8. CSS 2.1 selector syntax

9. CSS 2.1 selector syntax

10. Descendant selectors • div p { color:#f00; } • div#myid li p.info { color:#f00; }

11. Child selectors • div > span { color:#f00; }

12. Pseudo-classes • a:link • a:visited • a:hover • a:active • a.error:visited {color: #f00}

13. Pseudo-elements • p:first-letter { • color:#0000ff; • font-variant:small-caps • } • a:link:after { • content: " (" attr(href) ") "; • }

14. Adjacent sibling selectors • p + p { color:#f00; } <div> <p>Paragraph one</p> <p>Paragraph two</p> </div>

15. Attribute selectors • p[title] { color:#f00; } • div[class=error] { color:#f00; } • td[headers~=col1] { color:#f00; } • p[lang|=en] { color:#f00; }

16. Grouping Selectors • h1,h2,h3,h4,h5,h6 • { • color: #000; • }

17. CSS Selector Specificity

18. A selector's specificity is calculated as follows: • count the number of ID attributes in the selector (= a) • count the number of other attributes and pseudo-classes in the selector (= b) • count the number of element names in the selector (= c) • ignore pseudo-elements. • Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

19. Some examples: • * {} /* a=0 b=0 c=0 -> specificity = 0 */ • LI {} /* a=0 b=0 c=1 -> specificity = 1 */ • UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */ • UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */ • H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */ • UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */ • LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */ • #x34y {} /* a=1 b=0 c=0 -> specificity = 100 */

20. Styling • Fonts • Colors • Position • Navigation • Forms • Images

21. Fonts • Do not change font-family • Use presents (%) size • Do not bold more than 5% of text • Mind the line-height (longer lines – more height)

22. Colors • The less, the better • Use spark colors • Vary chroma and lumina to pick near colors • Never use red unless it is an error!

23. Position • Do not override the style guide template • When you think about width:100% use “auto” • Remember the box model (paddings are ontop of the 100%) • Float, float float • Make floats “display: inline;”

24. Navigation • Don't mask link color schema

25. Forms • Use standard forms • Do not style form elements (inputs, buttons) • Use fieldset and legend • Use a dl element to structure the form

26. Images • Use image maps #layout-switcher #layout-wide{ background: transparent url( images/tb-layout.gif ) no-repeat left top; } #layout-switcher #layout-normal{ background: transparent url( images/tb-layout.gif ) no-repeat -36px top; } #layout-switcher #layout-wide:hover{ background-position: left -25px; } #layout-switcher #layout-normal:hover{ background-position: -36px -25px; }

27. Hacking – Fixing behaviour by errors • Aiming a rule at a specific browser in order to workaround a bug (usually an IE bug) • Logical errors • Scope errors • Syntax errors • Priority errors • Woodo hacks • CSS2 filters

28. Logical errors • Adding “display: inline” to a float. Floats are block elements (like div). Declaring them as “float” makes them block elements automatically. Why are we telling them they are “in-line”?

29. Scope errors • * html body{ • Background-ccolr: #fff; • }

30. Syntax errors • .class{ • height: 22px; /* all browsers*/ • _height: 24px; /* IE6 or less */ • *height: 26px; /* IE7 or less */ • }

31. Priority errors • .class{ • height: 22px!important; • height: 24px; • }

32. Woodo hacks • Picabu bug – zoom: 1; overflow: hidden; • Flickering list elements – height: 1%; • HasLayout - zoom: 1; • Change rendering order

33. CSS2 filters • .menu > ul a {width:auto;}

34. General rules • Try to hang your attribute where it is most effective. (minimal repeats and minimal side-effects) • Use context. Our main menu has only one class: menu. • Prefix your class names. (We should have done it as well) • Test in various browsers (IE, FF, Op, Saf/Chr)

35. Thank You