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

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 CSS2 becomes a recommendation in May 98 Drafts of first 3 CSS3 modules published in June 99

CSS Linking Alternate:

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”

CSS Rule selector { property: value;}

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

CSS 2.1 selector syntax Universal*Matches any element TypeEMatches any E element. Class.info Matches any element whose class attribute contains the value info. Id#footer Matches any element with an id equal to footer DescendantE F Matches any F element that is a descendant of an E element. ChildE > F Matches any F element that is a child of an E element.

CSS 2.1 selector syntax AttributeE[att] Matches any E element that has an att attribute, regardless of its value. AttributeE[att=val] Matches any E element whose att attribute value is exactly equal to val. Attribute Matches any E element E[att~=val] whose att attribute value is a list of space-separated values, one of which is exactly equal to val. pseudo-class E:first-child Matches element E when E is the first child of its parent. Adjacent sibling selectorsp + p matches an element which is the next sibling to the first element

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

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

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

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

Adjacent sibling selectors p + p { color:#f00; } Paragraph one Paragraph two

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

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

CSS Selector Specificity

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.

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 */

Styling Fonts Colors Position Navigation Forms Images

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)

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

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;”

Navigation Don't mask link color schema

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

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; }

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

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”?

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

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

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

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

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

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)

Thank You