Product Reviews

With a new edition of Dreamweaver hitting the shelves, you may think late spring 2007 is a silly time to be releasing new web design tools. Not so. While Dreamweaver may be most designers' first choice for powerful site and online application development, some tools are simply better at doing specific tasks, as our cover feature on application alternatives explains.

One application that doesn't feature there is CSSEdit. It doesn't do web design. You can't use it to put together a site, edit copy or upload files to a server. You can't use it for blogging, managing users or setting up an online store. You can't even use it to post photos to your free web space. It does only one thing, and it does it very well: it designs style sheets.

The idea is simple: specify the basics of your page using your preferred HTML editor, specify a style sheet and then open it up in CSSEdit. It doesn't matter if the style sheet doesn't already exist: it'll create a new one as soon as you start styling.

Clicking elements on your page highlights their containers in blue, while a breadcrumb trail shows how they're embedded inside layers and other tags (an image inside a paragraph inside a specified div, inside a div container to

ADVERTISEMENT

easily centre your layers, inside the page body, for example). You can now tweak each one using CSSEdit's system of drop-down menus, input boxes and sliders. Nothing could be simpler. It makes short work of constructing complex three-columned floating layouts, and undoubtedly slashes development time.

However, it's not perfect. We found that the Automator-like Selector, which lets you target a specific element by using a series of menus to drill down on a particular style instance (a paragraph within a named layer, say), would routinely specify the layer and tag in the wrong order. So while you'd use #right p to target just paragraphs within a Div with the ID 'right', CSSEdit would code this as p#right. Neither the built-in preview screen nor a browser would recognise this as valid, and so the styling wouldn't be applied. This was surprising, as launching the Selector from the preview screen, rather than the CSS editing environment, would order things correctly.

Perhaps its greatest strength, though, is the way CSSEdit lets you take 'inspiration' from the pros, allowing you to open published sites and click their on-page elements in exactly the same way as you can with the pages you've written yourself. It will then import the attached style sheet and let you see how it's been coded to style the page. You can even override the existing styles and create a new design of your own.

CSSEdit is an extremely focused application and its narrow remit is key to its success. It's a much better CSS creator than Dreamweaver's modal dialogs, and if you know HTML but your CSS is somewhat rusty, teaming it with an editor such as the free TextWrangler gives you pseudo-visual editing on a budget. At the current exchange rate, you'd be silly not to buy a copy, just in case you might need it in the future.