Writing and debugging CSS

Part of the job of altering the theme for this site, or indeed writing the "theme" for an ordinary page (here's my résumé, for example), is writing or modifying the CSS file (Cascading Style Sheet) to make it look good. I've used three main resources to help me do this as efficiently as I can.

Cascading Style Sheets: The Definitive Guide by Eric A. Meyer. Yep, my copy of this is so old, it still has the old name (it's now called CSS: The Definitive Guide), No matter what it's called, Meyer does a bang-up job in explaining the nitty-gritty of the Box Model — don't leave home before you understand this in all its glory — and all of the various CSS properties and attributes. You may start reading this and get disillusioned with all the gotchas in the CSS support amongst the various browsers, but I've had great success in following Meyer's explanations and recommendations.

TopStyle 3.5. Written by Nick Bradbury, currently owned by Newsgator, but just sold to Stefan van As to ensure its further development. I've been using this product since Nick brought it out, and it really does make creating stylesheets very easy. Although it's great for static HTML pages, it's not so good for dynamic ones, and so the changes to the CSS file for the Chronicles theme were a bit hit and miss. I did get to the point where I saved off the current view of a webpage from Graffiti, just so I could fine-tune the CSS in TopStyle.

Firebug. If you are developing HTML and CSS and and indeed javascript, stop what you are doing right now and install this add-in into Firefox. (I won't even slow down to say, whaddya mean you're not using Firefox?) Firebug is great at showing you the "cascading" bit of CSS, live on a web page. You can point to an element and Firebug shows you the CSS that is being used to style that element, displaying the inheritance from the outer scope to the most inner scope. The nice thing is the padding and margins are shown in different colors, meaning to hone in on box issues straightaway. Brilliant. The javascript debugger is pretty good too, although I haven't used it that much.

And finally, to ensure my website has the latest files (and vice versa, for backup purposes)...

FireFTP. Neat-o visual FTP client implemented as a Firefox add-in. I love the visual syncing of local and remote folders (drill down through the folders in one pane and the other pane follows suit), and the drag-and-drop between panes. Nicely done.

  Loading links to posts on similar topics...