Practical CSS for Beginners

The web is littered with how-to tutorials so this isn’t one of them. I’ve spent a fair amount of time doing front-end dev work and have gained a reputation as the CSS “fixer” – the dude they call when other options have been exhausted. If you want a tutorial go visit w3schools or read the Eric Meyer’s O’Reilly guide – read them slowly.

I dove into CSS with an attitude that anything less than complete mastery wasn’t an option. A little gung-ho to be sure, but I didn’t see any other way being productive.

Here are a few things I wish someone had told me before I started my many months of trial and error.

  • Browsers apply their own defaults to display items and this leads to a maddening avalanche of bullshit if you don’t know what’s going on. Whole CSS frameworks are designed around this principle. This seems common knowledge to a seasoned CSS pro, but to a beginner this can be a real mystery. You can get a copy of Eric Meyer’s reset.css here.
  • You can apply almost any common CSS property to any element. Borders, padding and height can be applied to paragraphs, divs, images and forms. They all interpret those commands a little differently, but for the most part this is true. (Cue e-mail from someone informing me how wrong they think this is.)
  • Once you get the difference between padding and margins start out using padding property wherever possible. In my opinion it’s much more consistent from one browser to the next. When you get into a maze of multiple conflicting negative and random margins you’re going to want to shoot yourself in the face if something goes wrong later. If you get into problems where printing pages is causing older browsers to crash, use of crazy margin settings is usually your culprit.
  • Use of background images to insert design elements is an awesome technique. But keep in mind a lot of that won’t print by default. The client doesn’t want to hear about browser defaults and whatnot. Try to include a plan to have inline images used in your print pages. Beginners out there might not be able to get this right off, but it’s a good thing to have in mind.
  • Once you get rolling try not to use hacks. They are great when they are really needed, and certainly I’ve been in situations where nothing else would work, but I have also seen stylesheets that were a rats nest of windows/mac/ie specific hacks that almost negated effective CSS. I have written stylesheets well over 80k that only had one or two hacks at most. The less hacks you use the easier it will be to maintain long term.
  • Read up on selectors, inheritance and the cascade very very carefully. It sounds stupid, but I skimmed this when I first learned it, some of my first “pro” stylesheets are still out there and I cringe when I see them. Truly efficient work takes full advantage of these features.
  • Master the floats. I have a love/hate relationship with floated elements. Whether you agree with their use or not you can’t work with another pro until you know how to really use these.
  • Learn about block vs. inline elements before you even write a line of code. This will save you a lot of headaches.
  • The border property is your friend. If you can’t figure out what’s going on put a border around it.