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

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

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

Type E Matches any E element.

Class .info

Matches any element

whose class attribute

contains the value info.

Id #footer Matches any element with an id equalto footer

Descendant E F Matches any F element that is a descendant of an E element.

Child E > F Matches any F element that is a child of an E element.

CSS 2.1 selector syntax

Attribute E[att] Matches any E element that has an att attribute, regardless of its value.

Attribute E[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 valueis a list of space-separatedvalues, one of which is exactly equal to val.

pseudo-class E:first-child

Matches element E whenE is the first child of its parent.

Adjacent sibling selectors p + pmatches 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; }

<div>

<p>Paragraph one</p>

<p>Paragraph two</p>

</div>

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