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.

Now playing:
Ferry, Bryan - The Name of the Game
(from Bête Noire)

Loading similar posts...   Loading links to posts on similar topics...

1 Response

#1 Dew Drop - December 10, 2008 | Alvin Ashcraft's Morning Dew said...
10-Dec-08 9:08 AM

Pingback from Dew Drop - December 10, 2008 | Alvin Ashcraft's Morning Dew

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

  •  Emphasize with italics: surround word with underscores _emphasis_
  •  Emphasize strongly: surround word with double-asterisks **strong**
  •  Link: surround text with square brackets, url with parentheses [text](url)
  •  Inline code: surround text with backticks `IEnumerable`
  •  Unordered list: start each line with an asterisk, space * an item
  •  Ordered list: start each line with a digit, period, space 1. an item
  •  Insert code block: start each line with four spaces
  •  Insert blockquote: start each line with right-angle-bracket, space > Now is the time...
Preview of response