CSS 201 Jennifer Berk 12/21/2009
CSS 201
Dec 10, 2014
Tools, properties, and bugs you need to know to build websites from scratch with CSS
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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">
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
(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/
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
Related Documents
