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

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.

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

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

CSS 201

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to CSS 201

Similar to CSS 201 (20)

Recently uploaded

Recently uploaded (20)

CSS 201