How Would You Recommend a Novice Get Started Using CSS?

Chris Coyier //

This question was sent in by Nikita James.

I get this one a lot and it's surprisingly difficult to answer. The problem is that the question doesn't include the persons background, which will in many ways determine the best course of action.

  • Are you literally just getting started in web design? As in, you have never designed a website before?
  • Have you designed web sites before, but never with CSS? As in, you are coming from a table-based mindset?
  • Have you designed sites (graphically) before, but never done the actual coding?

My favorite analogy is that learning web design is like learning to play the guitar.

When you get your first guitar, you have stars in your eyes. You are picturing yourself on stage rocking out with throngs of screaming fans. Or at the very least, you are imagining yourself playing Dave Matthews Band songs on the porch of a frat house increasing your chances of getting laid that night. But in order to get there, you have a lot of practicing to do. So you buy a book. It shows you how to make a G chord and a Dm chord. Then you learn all the notes in the C Ionian scale and learn some finger exercises. Great. Now you are bored stiff and the guitar goes to the pawn shop.

You need to something to sink your teeth into! Something fun, something to keep you playing and practicing, so you can keep that excitement going. Maybe that "Step 1" should have been to learn a few simple chord shapes and then learn a super easy Social Distortion tune.

This is just like web design. You are all excited to build an awesome looking website. So you go out and buy a book. It tells you all about how you should be using XHTML 1.0 STRICT and what an unordered list is, what the details of the box model are, and how to remove links from underlines with CSS. Now you are bored, yawning, and that original spark of excitement is gone.

Instead, here is what you do. Go out and get yourself a domain name (from GoDaddy or the like) and get yourself some cheap hosting. You need to learn how to do that stuff anyway. Then you get yourself a template. That's right, a template. No, it's not cheating, we're learning here. (Free ones here, or nice paid ones here.) Upload that template to your new hosting and go visit that site on the web in a real browser. If you are like me, you still get a grin on your face when you see that website come up for the first time. I've done this 100 or more times and I still smile when I see it. It's the birth of a website. A place you will bring to life!

Now you have the ultimate learning environment. Start poking through that code and making changes and seeing what happens. Learn to use Firebug so you can understand structure easier. Install WordPress and play with the template. See what you can make happen.

That is how you learn CSS. Experimentation. THEN, you go buy a book about CSS. That book will make 10x more sense now that you have something to relate it to.

That's why it depends on how you are coming into this. If you've been making sites for years as tables, maybe a book about CSS will do you good right out the door. For you, Bulletproof Web Design is probably a good choice.