Using CSS (Cascading Style Sheets)
Download
Report
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