Transcript Using CSS (Cascading Style Sheets)

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/calen
dar/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.
Matches any element
Class
.info
whose class attribute
contains the value info.
Id
#footer
Matches any element with an id equal
to footer
Descendant
EF
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]
Attribute
E[att=val]
Attribute
Matches any E
element
E[att~=val]
pseudo-class
Adjacent sibling selectors
E:first-child
p+p
Matches any E element
that has an att attribute,
regardless of its value.
Matches any E element
whose att attribute value
is exactly equal to val.
whose att attribute value
is a list of space-separated
values, one of which is
exactly equal to val.
Matches element E when
E is the first child of its
parent.
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; }
<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 pseudoclasses 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 sideeffects)
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