1 / 35

Using CSS (Cascading Style Sheets)

Effie Nadiv Edited by permission from author by Amir Kirsh. Using CSS (Cascading Style Sheets). Using CSS. Linking CSS Selector Styling Hacking. 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

kera
Download Presentation

Using CSS (Cascading Style Sheets)

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

More Related