How to make it look the same in IE (6, 7 and now 8), FF (2 and 3), Opera and Safari...

I'm giving a second to the cross-browser compatibility.

* The box model. Specifically how padding doesn't behave like most people expect. Be sure to include or point to a good illustration.

* The difference between inline and block display of elements – and how you can change them with css.

I've seen a lot of people fail to grasp the specifics of float.

Simulating table based layouts without tables (before there were frameworks for it).

Why not start off with how to use Blueprint CSS (http://code.google.com/p/blueprintcss/) and then show how to extend it? Blueprint gets the basics very right indeed, and allows your readers to become productive quickly. Then you can move on to how to create your own page elements, how to modify Blueprint, etc.

WRT your question, when I was building my own tiny websites I couldn't understand how CSS would help me be productive. The larger the sites, of course, the more obvious that became.

I believe the hardest thing about learning XHTML and CSS besides having to make things work across various browsers is avoiding the HTML soup, dated HTML practices such as the use of tables, and CSS hacks. I think it would be best to learn according to the current W3C standards which would enable one to have a stable foundation when swimming through content.

The differences in the DOM of IE and Mozilla.

Page layout using DIVs... of course, you could always use TABLEs :-)

position: absolute vs relative

I've had to look up the rules several times now for how the parent box is chosen. I still don't know if I'm making more intermediate divs than I have to.