Looking for the lessons? Get started!
A “cheat sheet” for CSS usage
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
No, we don’t cheat. And even if we did, I’d never tell you. — Tommy Lasorda
Mezzoblue’s Dave Shea gives us an extremely useful CSS Crib Sheet. I’ll give you a shortened version of Shea’s list below, along with some additions from Roger Johannson. Some of the tips Shea and Johannson give us may not make sense to you yet, but keep the crib sheet handy; you will refer to it again and again, and you’ll eventually learn why these guys say what they’re saying.
- When in doubt, validate. More about validation.
- Build and test your CSS in the most advanced browser available before testing in others, not after. More about browsers.
- When relying on floats for layouts, make sure they clear properly. More about floats.
- Margins collapse; apply padding or a border to avoid. More about margins and padding.
- Try to avoid applying padding/borders and a fixed width to an element..
- Avoid the Flash of Unstyled Content in IE. More about importing stylesheets.
- Don’t rely on min-width in IE.
- When in doubt, decrease widths. More about .
- Content not showing up properly in IE? Check the Peekaboo bug. More about .
- Be careful when styling links if you’re using anchors. More about using IDs in anchors.
- Make sure your desired effect actually exists. (Shea is referring to non-standard CSS effects.)
- Divide and Conquer: use commenting to turn off large sections of style. (Nifty trick for debugging stylesheets.)
- Remember “LoVe/HAte” linking. More about ordering anchors.
- Remember “TRouBLEd” borders. More about borders.
- Specify units for non-zero values.
- Test different font sizes. More about fonts.
- With stylesheets, test embedded (internal); launch imported (external). More about external stylesheets.
- Add obvious borders to help debug layouts.
- Don’t use single quotation marks around paths for images.
- Don’t link to empty stylesheets as “placeholders” for future stylesheets (like handheld or print media style sheets).
- Understand the CSS box model. More about the box model.
- Use only allowed characters for class and ID. More about IDs and classes.
