CSS 201

CSS 201 Jennifer Berk 12/21/2009

Why CSS 201? • It’s easy to learn the basics, but complex styles can be cryptic • You never know when you’ll need to build something from scratch • And everyone seemed excited when I mentioned the idea!

What’s CSS? • Cascading - more speciﬁc or later statements can modify earlier ones • Style - determine the presentation of elements on webpages • Sheets - can be multiple ﬁles

What Did CSS Change?

Basic selectors • One-item selector: elementname or .classname or #idname followed by { styles here } • Two-item selector: element-a element-b { styles here } means use those styles for an element-b that is inside an element-a • Doesn’t have to be the direct child

Basic styles • font: italic bold 10px/15px Verdana; • background: #ff0000 url(red-gradient.gif) no-repeat top left; • margin/padding Margin Padding Test • etc.

CSS 201 Agenda • Tools • Resets • Advanced selectors • Quirks mode versus standards mode • Position and Floats • Common browser bugs and hacks

Tools • Firefox • DOM Inspector • Error Console (more for JavaScript) • Web Developer • Firebug • IE Developer Toolbar • Multiple IE

Firefox: DOM Inspector • DOM = Document Object Model (hierarchical tree on the left)

Firefox: DOM Inspector • This view shows what the current style actually is, not what the rules are.

Firefox: Error Console

Firefox: Web Developer

Firefox: Firebug

IE Developer Toolbar

Multiple IE • Lets you install IE6 (and 5.5 and 5, though you really don’t need those anymore) on a system that otherwise runs IE7 • The multiples behave slightly weirdly - don’t expect all JavaScript/Flash to work • Hasn’t been updated to use on a system running IE8

Resets

Advanced selectors • .firstclass.secondclass = something with both firstclass and second class, like <div class=“firstclass secondclass”> • Note #id.classname has bugs, don’t use • firstelement>secondelement = a secondelement that’s a direct child of a firstelement (doesn’t work in IE<7)

“Quirks Mode” vs “Standards Mode” • You want standards mode • Get it by including a DOCTYPE declaration above the <html> tag • You probably want <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">

Position property • Static = default, part of regular flow • Fixed = removed from flow; does not scroll • Relative = takes up original space but can be moved; container for absolute position • Absolute = removed from flow, placed using distance from edges (e.g. top: 10px;) of nearest parent with position: relative

Floats • Can have values left, right, none; (to override another rule) • Element floated left allows other content to flow around its right margin; vice versa for element floated right • Can stack series of floated elements next to each other

Common bugs/hacks • IE<7 hack: * html selectors { styles here } • (IE<6) Box model bug • Min-height bug • Float double margin bug • Float containment bug / Holly hack • Peekaboo bug • 3px jog bug

IE <7 hack: * html • To target only IE6 and earlier, add * html to the beginning of your selector • Very important for ﬁxing several of the following bugs • Also useful for debugging, if something is only broken in IE6 http://en.wikipedia.org/wiki/CSS_ﬁlter#Star_HTML_hack

(IE<6) Box model bug • Feed IE<6 the modiﬁed width using the * html selector hack • IE6 gets it right in standards mode http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

Min-height bug • IE6 and earlier don’t recognize min-height (or min-width, max-height, max-width) • But they treat height like min-height, so use the * html selector hack to give them that instead

Float double margin bug • An element floated left with a left margin of 10px has a margin of 20px in IE<7 • Same for right-floated with a right margin • Adding display: inline; fixes it http://www.positioniseverything.net/explorer/doubled-margin.html

Float containment quirk • Floats hang out of their containing elements in non-IE browsers • If you want the container to surround (e.g. container’s background should continue to bottom of ﬂoat), add class=“clearﬁx” to it http://www.positioniseverything.net/easyclearing.html http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/

Peekaboo bug • Sometimes you see your content, sometimes you don’t, in IE<7, of course • Position: relative; will make the disappearing element be drawn last, so it will be on top of whatever’s intermittently hiding it http://www.positioniseverything.net/explorer/peekaboo.html

3px jog bug • Next to a float, IE<7 adds an extra 3px of phantom space. The extra space ends when the float does. So you get a sudden 3px jog in the left edge of the paragraph next to the float, for instance. • Read the link for the (fairly complicated) fix. When you can, avoid it by floating one element left and one element right and leaving >3px between them. http://www.positioniseverything.net/explorer/threepxtest.html

http://www.jcberk.com	115
http://feeds.feedburner.com	2
http://cc.bingj.com	1
http://www.slideshare.net	1

CSS 201

by Jennifer Berk on Dec 21, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 119

Statistics

CSS 201 — Presentation Transcript