The macosxhints Rating:
[Score: 9 out of 10]
- Developer: MacRabbit / [Product Page]
- Price: $24.95 [free demo available]
But that's where CSSEdit comes in. This handy little app is perhaps the only real CSS editor for OS X; there are many other programs that will do CSS syntax highlighting, but CSSEdit takes the complexity of style sheets and (mostly) hides it behind a very intuitive user interface. That's not to say that you can use CSSEdit effectively with no CSS knowledge -- you'll still have to understand the basics on your own (see the above link for more info). But once you have a basic understanding, CSSEdit can help greatly reduce the difficulty involved in managing a complex stylesheet.
A three-pane window shows you your defined styles (left pane), an instant preview of how they'll appear (bottom pane), and (coolest of all) the right pane contains all the various options for each style. You can tweak the settings related to fonts, text, blocks, positions, borders, backgrounds, and lists -- via an intuitive GUI instead of by memorizing CSS structure. Want a double-line border on the top, right, and bottom of a style? Just turn those borders on visually and choose the line style from a pop-up. Want to change the background? Pick a color from a color wheel. CSSEdit makes it brain-dead-simple to play around with styles quickly and easily. The live preview bar shows you exactly what you'll get from your definitions, too, so you get instant feedback.
But as a rookie CSS guy, the most useful function is the File -> Extract CSS from URL feature. Find a site that's got some cool CSS on it, and then use this button to load the stylesheet into CSSEdit. From that point, you can examine the CSS in detail and try to figure out how the cool stuff is happening. Yes, you can do this manually by viewing the page's source, then finding the linked stylesheet, copying it, and pasting it into a text editor. But CSSEdit makes it a two-click process.
If you prefer to get your hands dirty with CSS, CSSEdit has a great source-view editing mode, too. Auto-completion 'learns' which CSS selectors you use most often, and puts them at the top of a contextual menu for fast access. Indenting and colorization make it really easy to understand the structure, and the "auto-shorthand" feature can teach you how to combine some CSS functions into much shorter versions.
At $24.95, CSSEdit isn't cheap ... but it's already saved me hours of work and helped me learn a bunch more, so I'll be registering it later this week (the demo mode is restricted to saving CSS files of 2500 characters or less).

