Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

CSSEdit -- A feature-laden CSS editor Pick of the Week
CSSEdit The macosxhints Rating:
9 of 10
[Score: 9 out of 10]
Now that I've got more time to work on the site, I've been hard at work on getting Mac OS X Hints migrated to the latest version of Geeklog (1.3.9). As part of that effort, I've also been working on a new theme for the site (yes, it will see the light of day in the near future!), and that means lots of fighting with CSS. I find working with CSS particularly difficult, as I haven't spent much time with it, so I know just enough to be dangerous.

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).
    •    
  • Currently 2.38 / 5
  You rated: 4 / 5 (8 votes cast)
 
[20,992 views]  

CSSEdit -- A feature-laden CSS editor | 17 comments | Create New Account
Click here to return to the 'CSSEdit -- A feature-laden CSS editor' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
better solution for tinkering with others CSS
Authored by: alec kinnear on Sep 30, '04 01:40:12AM

there is a better way to learn about others CSS. install firefox (some of these tools work in camino and some don't, so better just to install firefox) and add the Web Developer extension.

tinker with the admired site's CSS to your heart's content. see your changes in real time. when satisfied copy the modified CSS out into the text editor of your choice.

free and more impressive than CSS Edit.

whiterabbit is charging too much for some primitive CSS visualisation features. if you would like another tool to help with web and CSS chores, there's a lot more joy to be had in $20 of skEdit.

white rabbit is a sharp designer however.

you'd do better to steal his CSS than buy his editor.



[ Reply to This | # ]
better solution for tinkering with others CSS
Authored by: cutterchgo on Sep 30, '04 03:07:45AM

CSSEdit quickly became my righthand utility (next to BBEdit) when I started moving into standards-based web development. Some purists (a title that I often put on myself) may feel that the gui may get in the way or handicap the user but the fluid interchange between gui and text editing (text with intelligent autofill features that really work well) has kept it in my arsenal months after I've become familiar with the syntax and no longer need the gui for editing. The grouping and quickfiltering against style names and source alone is well worth the price for managing large stylesheets.

Stylemaster, too, is a powerful editor with many of the same features and even a few others. I feel that both could serve equally as well but stylemaster was a bit harder to learn and I had already become very familiar with CSSEdit.

You can slam it all ya want or claim that text-based-only editing is the *only* way to go but this is the only tool I've found that will help ease novices into the new world of standards-based CSS designs while simultaneously offering power-users all of the editing shortcuts and direct-editing features that they need. The searching and organizational features are icing on the cake that increase productivity tremendously. Give this piece of software a try, it's well worth $20. In retrospect, I think it's worth considerably more considering it's polish and utlility.

---
- b r y



[ Reply to This | # ]
Or... use EditCSS
Authored by: L0u13 on Sep 30, '04 01:56:33AM

I also use the WebDeveloper plugin, but only for the contextual menus (validate, outline, etc)

But for CSS, I *heart* the EditCSS plugin for Firefox/Mozilla available free http://editcss.mozdev.org/.

Enjoy.



[ Reply to This | # ]
CSSEdit -- A feature-laden CSS editor
Authored by: chaoswerks on Sep 30, '04 02:03:22AM
Style Master is a far more feature laden app than CSSEdit. Style Master makes it easier to access CSS features. It's as easy as CSSEdit, nay, easier since it Style Master helps you easily use the cascade features of Cascading Style Sheets.

---
"Suburbia is where the developer bulldozes out the trees; then, names the streets after them." - Bill Vaughn

[ Reply to This | # ]

CSSEdit -- A feature-laden CSS editor
Authored by: Syco on Sep 30, '04 06:32:46AM

Style Master also costs $35 more than CSSEdit, which is far too much to justify getting it over MacRabbit's app.



[ Reply to This | # ]
CSSEdit -- A feature-laden CSS editor
Authored by: i5m on Sep 30, '04 08:10:31AM

Stylemaster is also worth far more than the $60 you pay for it. If you are serious about CSS then go for Stylemaster. If you are just tinkering then go with the cheaper options.



[ Reply to This | # ]
CSSEdit -- A feature-laden CSS editor
Authored by: robg on Sep 30, '04 08:23:53AM

I hadn't found StyleMaster in my search for a CSS editor. However, I just downloaded it and spent a few minutes with it. It's clearly well done, but I have a couple issues with it that still leave me preferring CSSEdit.

First, and biggest, is the fact that you can only display one "editor" box at a time. So if you're laying out a top-level style with font, border, position, background, etc., you'll be switching between the various editors quite a bit -- unless, and this is clearly the leaning of the program -- you prefer to work in text mode, where you just type your style info directly. CSSEdit manages to cleanly make all of the editors available with a mouse click; granted, you can change the editor in StyleMaster with a button click, but it's visually slower and more distracting with the drawer.

Second, as noted above, it's over 2x more costly than CSSEdit.

I also checked out the freebie Firefox extensions (since I use Firefox all the time), and they are useful ... but they won't replace CSSEdit for me, since they are *not* intuitive and don't make it easy to understand the CSS syntax. But they are great for looking at a site's CSS, and I love the other features in the Web Developer extension.

-rob.



[ Reply to This | # ]
CSSEdit -- A feature-laden CSS editor
Authored by: quietjim on Sep 30, '04 08:17:00AM

I've used this program for about a year and I have to say it's a godsend. I have a lot of other things on my plate so I can't do web design full time and CSSEdit has let me get rid of tables entirely. I have the full Macromedia 2004 suite, but CSSEdit + skEdit is now my toolbox of choice.

---
quietjim



[ Reply to This | # ]
on a point of precision...
Authored by: rgray on Sep 30, '04 09:12:13AM
FWIW..... ;-}

rob wrote "the demo mode is restricted to saving CSS files of 2500 characters or less"

product page says "Demo limitations - The CSSEdit demo is fully functional for you to explore, but saving is limited to style sheets containing less than 2499 characters."

You could, of course, paste out to your favourite text editor....

A handy tool!

(I teach stats)

[ Reply to This | # ]

on a point of precision...
Authored by: robg on Sep 30, '04 09:23:17AM

Drat, off by two characters :).

-rob.



[ Reply to This | # ]
Copy and Paste in CSSEdit
Authored by: Anonymous on Sep 30, '04 10:38:29AM

Trying to copy text out of an unregistered CSSEdit will paste somewhat random text. You can only paste text into but not out of CSSEdit.

I actually registered CSSEdit last week. It's a great app. Also check out Style Master.



[ Reply to This | # ]
CSSEdit -- A feature-laden CSS editor
Authored by: gvaughn on Sep 30, '04 10:45:58AM
I've installed the Morphon CSS Editor but haven't had time to dig deep. It's free, which helps my budget. Is anyone else familiar with it and can supply a comparison to other tools?

[ Reply to This | # ]
CSSEdit -- A feature-laden CSS editor
Authored by: aranor on Sep 30, '04 01:35:28PM

I've considered purchasing CSSEdit but I don't know if it's worth the cost. I'm very fluent in CSS already so I'd mostly use CSSEdit for the nice display and so I don't have to hit up Eric Meyer's CSS 2 Reference page as much (for when I forget the exact name of an attribute, or the list of accepted values, etc).

That's why I haven't bought it yet. And because of the 2500 character limit, I haven't used it much yet either (since my CSS pages are generally of a decent size.

Is it worth the $25 for somebody already very fluent in CSS?

And no, I'm not even considering Style Master. I can't imagine what it could possibly do that makes it worth $60.



[ Reply to This | # ]
CSSEdit -- A feature-laden CSS editor
Authored by: brising on Sep 30, '04 02:59:04PM

I've always wondered if it could be worth $60. The tutorials that WesternCiv has are really good for learning the purpose of CSS, though.



[ Reply to This | # ]
tutorials are what are worth the price
Authored by: alec kinnear on Sep 30, '04 10:54:28PM

Style Master would be terribly overpriced, but it includes a fantastic package of CSS tutorial and reference which is built into the program. That's what makes it worthwhile. It's like having a teacher with you.

Granted most of us doing this work professionally now know most of the stuff in those tutorials off by heart. But for somebody beginning with CSS or early intermediate, they are a godsend.

On the other hand, CSSEdit has no value-added. It doesn't teach or explain or troubleshoot or have any built-in snippets for box model hacks. It is just a slightly customised variant of the Cocoa text-edit tools slanted towards CSS display. And it's just not as stable as BBEdit or any of the serious text editing applications. Hard editing can bring CSSEdit down at just the most inopportune time.

At a slightly lower price, it would be a nice add-on. Another way to view one's CSS when bored of looking at in the conventional way.



[ Reply to This | # ]
CSSEdit -- A feature-laden CSS editor
Authored by: _merlin on Oct 01, '04 01:04:57AM

The trouble with any CSS editor is that I invariably end up having to do browser sniffing and delivering different content for different browsers using PHP. So to edit a style sheet, I end up having to use a PHP editor rather than a CSS editor.



[ Reply to This | # ]
CSSEdit -- A feature-laden CSS editor
Authored by: _merlin on Oct 01, '04 01:08:50AM

The trouble with any CSS editor is that I invariably end up having to do browser sniffing and delivering different content for different browsers using PHP. So to edit a style sheet, I end up having to use a PHP editor rather than a CSS editor.



[ Reply to This | # ]