using css (cascading style sheets) effie nadiv edited by permission from author by amir kirsh
TRANSCRIPT
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