CSS 201

CSS 201Jennifer Berk12/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 specific or later statements can modify earlier ones

• Style - determine the presentation of elements on webpages

• Sheets - can be multiple files

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

• etc.Test

Margin Padding

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

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 fixing several of the following bugs

• Also useful for debugging, if something is only broken in IE6

http://en.wikipedia.org/wiki/CSS_filter#Star_HTML_hack

http://en.wikipedia.org/wiki/CSS_filter#

http://en.wikipedia.org/wiki/CSS_filter#

(IE<6) Box model bug• Feed IE<6

the modified 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 float), add class=“clearfix” to it

http://www.positioniseverything.net/easyclearing.htmlhttp://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/

http://www.positioniseverything.net/easyclearing.html

http://www.positioniseverything.net/easyclearing.html

http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/

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



Technology

CSS 201