Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There's font styles, margin, padding, color and what not. But there's a wall that people will run into... that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.
These are the six things that will help people get over the hump.
Box Model
At the very core of it, is an understanding of the box model within CSS. Sure, you may know your margin and padding but what happens when elements start to interact with each other. Suddenly things that look good in one browser go all to hell in the other. Consistently in working with the box model comes from understanding the difference between quirks mode and strict mode. It's also a good idea to know how to hack it up for older browsers.
W3C CSS2.1 Spec
The Box Model
Tantek's Box model hack
Quirks mode and strict mode
Activating the Right Layout Mode Using the Doctype Declaration
Floated Columns
While absolute positioning was one of the first approaches that people took when attempting to replace table-based layouts, it was floating content that opened the doors of possibility. Along with learning how to float, you must also learn how to clear floats so that content that follows or backgrounds will appear correctly.
Floatorial
Clearing floats
Faux Columns
Creating Liquid Faux Columns
Sizing Using Ems
There are two different issues at play here when it comes to sizing with ems: fonts and layouts.
With fonts, Internet Explorer 6 and lower don't allow you to resize the text when specified using pixels (px). Those with vision issues may wish to set their font size larger in order to more readily read what you've written. Specifying your font sizes using ems has proven to be the popular approach to this problem. The importance of sizing text using ems is waning as users move on to better browsers.
Sizing layouts with ems can also offer up a whole other avenue of flexibility. When playing with text size, it can often throw an entire design out of whack. Styling elements using ems allow the containers of content to grow along with the text, maintaining the consistency of the design.
How to size text using ems
Elastic Design
Fixed or fluid width? Elastic!
Source : http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/
