10 CSS tips for the new

This is my attempt to save you some time

1. Do not worry about height: 100%

   There are plenty of ways to get this to work, but this is not something that you should concern yourself at first. Trust me, it's simple, but it's not "easy". It's not "easy" because it involves aspects of an HTML document that I'm sure you're not prepared for.

2. You don't need to position everything

   Sounds like common sense to those of us that have done CSS development for a number of years, but it's easily missed for the new. The feeling is usually because the first CSS examples you'll find use crazy things like position:absolute; and float: left;. The truth of the matter is that those techniques are used in the minority of design elements. More frequently than not, you can just leave your poor element alone. If you learn nothing else from this: try nothing first.

3. Make sure that you're not fighting browser defaults

   Some browsers have funky browser defaults for properties likes margins, paddings, line-heights, font-sizes, and font-weights. When in doubt, try things like zeroing out the margins and paddings. Frequently, people will suggest the selector: * { margin: 0; padding: 0; }. It's true, this will clear all those defaults. I suggest that you use it for debugging and be more specific about your killing of properties, like: h1, h2, h3, h4, h5, h6, form { margin: 0; padding: 0; }

4. Validation doesn't mean correct

   The fact that your page validates does not mean that it is correct for the purpose you intend. This is just like how "Stop!" is a valid sentence, but it doesn't mean that the message will convey "proceed in an orderly fashion in the following direction" (it, in fact, would mean just the opposite).

5. There is such a thing as too many divs

   Divs are simply another html element. Doing one-to-one replacement of table elements for divs is probably pointless. There is a whole world of html elements that you should become familiar with. Use them. They're your friends. Divs are just one choice that people often use to divide up their content into smaller pieces.

6. Tables are not evil

   Tables are only evil for layout. Tables have their place among all the other HTML elements. You probably have a good use for a table if you can figure out where to place the following table elements: caption, thead, tbody, tfoot, and th. Also, there is the "summary" table attribute that you should be able to use. A good rule of thumb is that if you have something that would be appropriate in MS Excel, it's probably ok for a table (I realize that people abuse Excel, but that's another issue).

7. Work smarter, not harder with CSS

   Under this rule, there are a number of subrules: if there isn't a point to adding a CSS property, don't add it; if you're not sure why you're adding a CSS property, don't add; and if you feel like you've added the same property in lots of places, figure out how to add it in only one place (ie. this happens for font, color, background-color, font-size, and width properties all the time).

8. After you have a design, start with a blank page of content

   Start with an unstyled, vanilla page of representative content first. It is sort of the inverse of table development. After you've designed your site in a graphics program, create a vanilla page of content. Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better. You can, of course, always go back and tweak your HTML with additional elements, as needed, but you just find that you end up with fewer.

9. Start your CSS by working from the top down

   Creating your CSS in an orderly fashion will help you get started. I find that the top down works the best. By top down, I mean the literal top of your HTML source, which should somewhat correspond to the top of your page's design anyway. Generally, your header is probably at the top of your design and the top of your source.

10. Use Google™, first

    You probably won't learn everything without doing a bit of searching. I've found that one of the best search queries is the following: CSS [whatever it is I'm searching for]. (without the []) By that, I mean, if I'm trying to figure out how to remove that damn extra space below my h1 elements, I search for: CSS h1 extra space below. Notice that you'll get results that might not be perfect, but you don't even need to know that the problem is margins. You can also be more specific if your problem is in one browser only by modifying your search to the following: CSS IE [my problem]. (no []). For example, the following: CSS IE extra 3 pixels to the right of a float.

That took awhile to write. I hope that helps. Enjoy!