I’ve been reading various tutorials, tips and tricks about making style sheets do what you want, and there are a number of good sites out there to help you out. My previous style sheet experience has consisted of taking an existing style sheet (the one that goes with my blog site, for example) and making my own experimental changes. WHile this is a quick way to see some results, it is the WRONG WAY to learn about style sheets.

I finally just went to the source, the W3C specifications for Cascading Style Sheets 1 (there exists a CSS 2 and 3 but version 1 is widely supported by most browsers so I figured I’d start there). I spent about an hour or so reading through it making mental notes, then proceeded to create my own style sheet, from scratch to recreate the cover of my current book, “Seven Years in Tibet“. To my extreme amazement, I nailed it almost exactly! Well, except for the photo of Brad Pitt. I substituted a photo of an Alaskan glacier in stead of Brad Pitt walking through the Himalaya.

Aside from learning some CSS, what I’ve also learned, is that the ONLY way to style your web site with CSS is to start your own style sheet from scratch. As easy as it sounds to start with someone’s template and make some changes, you shortchange yourself that way.

The best way to go about it is to draw on a piece of paper, the page your trying to create, separating each distinct section possible into boxes, and then define those boxes using the CSS. Sounds complicated until you try it, but it’s the only way to learn it. Why am I doing all this? I’m gearing up for a redesign of Herodias, my online birding field notebook. It’s fully functional, but it could use a little facelift.

Update: I tried to get my styled page to validate, and when I added the DOCTYPE, it broke. The image wouldn’t render as a background image. Any thoughts?

Update #2: Finallly, it validates and displays properly at the same time. There were a few spaces where they shouldn’t have been.