10 Top-Notch CSS Editors

September 17th, 2009 by Omar Abid | 54 Comments | Stumble It! Delicious

CSS editors are editors that focus solely on generating Cascading Style Sheets. Though you could scrape by using a fully-featured IDE or source code editor – CSS editors may offer specialized functions and features to help you write better CSS, quicker.

In this article, you’ll find some of the more popular CSS editors available on the market.

Stylizer

Stylizer is a visual CSS code editor. It has real-time preview that renders changes on your web browser on the fly as you make them. It also has a point-and-click interface (called "Bullseye") which allows you to target page elements by clicking on them, making CSS editing a cinch. Stylizer is available only for Windows and Mac OS.

Style Master

Style Master is a cross-platform CSS development application that comes with a robust set of features such as auto-completion, on the fly code editing and rendering of dynamically-generated pages (such as PHP, .NET, and Ruby on Rails), and a hierarchic display of CSS fields. It also has a feature called Support Watcher which warns you of potential CSS bugs for certain browsers.

RapidCSS

RapidCSS is ideal for writing CSS code; it is lightweight and offers a wide range of features like code auto complete, syntax highlighting, built-in CSS references and various shortcuts for CSS tags.

Free CSS Toolbox

Free CSS toolbox is a simple text editor for CSS. It’s very lightweight and simple to use. It has a syntax highlighter feature, code auto-complete, CSS checker, CSS validator and compressor.

CoffeeCup StyleSheet Maker

CoffeeCup StyleSheet Maker is another CSS editor which offers many functionalities to edit CSS, but still not very flexible to increase productivity to its highest level. It has support for shortcut keys for tags, classes, and margins to reduce the amount of typing you need to do. It also comes jam-packed with premade code snippets for common CSS styles.

EnginSite CSS Editor

EnginSite CSS Editor is a good CSS editor with "instant" preview. This editor is ideal for beginning designers focused on simple tasks and designs.

CSSEdit

CSSEdit stands in the middle between sophisticated web development editors and basic ones. CSS Edit is sleek and clean. It’s best suited for first time and casual CSS coders.

JellyFish-CSS

JellyFish CSS is a smart and simple CSS editor. It helps edit CSS code easily and quickly. It will also help you steer clear of CSS syntax errors with its Code-sense feature.

SnapCSS

SnapCSS is a windows-only CSS editor that is extremely lightweight, featuring a super simple text-editor interface. It has a beautify code function that automatically formats and standardizes your CSS.

SimpleCSS

SimpleCSS is a Mac OS application for easily creating stylesheets from scratch. It has an import feature which allows you to pool together several stylesheets into one file. SimpleCSS also features drag-and-drop capabilities for reordering your style rules, so that you may organize them in the manner you need.

What CSS editor did we miss?

Was your favorite CSS editor not mentioned here? Share your thoughts with us in the comments. * Edited by Jacob Gube

About the Author

Omar Abid is a blogger from Sfax, Tunisia. Check out his weblog, called Code Input, which covers the topic of coding and web development. If you’d like to connect with Omar, follow him on Twitter.

54 Comments

Pariah Burke

September 17th, 2009

What about TopStyle? http://www.topstyle4.com/

Paul

September 17th, 2009

Coda for the Mac (not only CSS)

Tony

September 17th, 2009

Couple things:

1. It’s “CSSEdit” not “CSS Edit” (there’s no space)

2. You say, about CSSEdit: “It’s best suited for first time and casual CSS coders.” – Nothing could be further from the truth. Have you used the app, or are you basing your “review” on the screenshots? It has a clean and simple UI, but it’s a very powerful and robust program used by many professional web developers.

There’s a longer review of CSSEdit here: http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/

Yoyo

September 17th, 2009

Your photo, are you like 12 years old?

Marty Bishop

September 17th, 2009

I use (and love) Style Master – but was shocked to see how ugly its Windows incarnation is!

Every time I think I want to try a new technique, it turns out that SM already knows it and is ready for me to use it.

Amos Vryhof

September 17th, 2009

I still use an old copy of TopStyle Lite, or just stick to the code completion in Drea mWeaver.

jm

September 17th, 2009

I use http://www.topstyle4.com/

curtismchale

September 18th, 2009

I’ve never been able to understand why someon would use a totally different app for editing CSS. I haven’t ever come across a code editor that didn’t handle CSS just fine.

daftviking

September 18th, 2009

Ditto on Tony’s comment: CSSEdit is a seriously powerful tool for developing CSS, to call it a tool for “first time or casual CSS coders” is just plain wrong. There’s something weird about the screenshot as well – the preview window looks wrong, with the page list in a sidebar and the x-ray hierarchy on the bottom of the window. Is that from an older version?

You list Stylizier as being Windows and Mac, but (according to their web site) the Mac version is still in development – there’s a page where you can sign up to be notified when it’s released, but that’s about it.

Your inclusion of Jellyfish-CSS doesn’t make much sense to me – it looks like the developer is out of business (or at least didn’t take enough care to keep their domain from falling into the hands of a squatter), so linking to a demo version download isn’t going to do anyone any good.

I will take Simple CSS and Style Master a spin, though I suspect that they won’t come close to replacing CSSEdit in my toolbox.

ipevgeny

September 18th, 2009

Aptana!!!

Mjohnsonmedia

September 18th, 2009

Coda

Danny

September 18th, 2009

CSSEdit kicks the shit out of anything I ever found for PC, In fact I wish they made it for PC so I could use it at work. You should also have noted that it also has the real-time preview and point-and-click interface that you mentioned for Stylizer, which I am about to go and try out. Cheers

Simon Meek

September 18th, 2009

Re: CSSEdit. It’s actually a very powerful bit of kit, and not at all just for first timers. Features like X-ray, milestones and Validation make it very much a pro app. I use it professionally every day.

Chris

September 18th, 2009

I use Golive 9 – for me the best for web coding!

Paul Albrecht

September 18th, 2009

Stylizer is not available for mac. As i just switched to mac this is the greatest loss for me. :-(
Stylizer is just THE best CSS Editor.

Ashely Adams : Sticker Printing

September 18th, 2009

Thanks for mentioning these CSS editors. I’ll definitely try out RapidCSS. Thanks for the mention.

Marco

September 18th, 2009

I use Stylizer and notepad++ on my sites. Stylizer is great imho. Notepad++ even more ;-)

Plugo.cz

September 18th, 2009

Long time ago, I used TopStyle, now I use complex Dreamweaver, but TopStyle was quite good.

Jacob Gube

September 18th, 2009

@Tony: Thanks for the correction on CSSEdit – that’s an editorial oversight on my behalf.

RE: TopStyle Looks like this is a popular CSS editor that we missed, thanks for mentioning it down here in the comments @Pariah Burke, @Amos Vryhof, @jm, and @Plugo.cz.

@curtismchale: Though I can understand why many web designers and developers use a standalone CSS editor (it’s a focused application that offers lots of features tailored to CSS development), I prefer IDE’s just as you probably do. I like to keep my work flow set-up as simple and with as few applications as possible. I’m glad someone broached this subject!

Thanks for the other suggestions and for sharing your experiences: it makes an article like this more informative and well-rounded.

Vipul Limbachiya

September 18th, 2009

I use topstyle since long, it rocks! notepad++ for minor changes.

Gerua Somp

September 18th, 2009

Any for Linux/Debian/Ubuntu??

twick

September 18th, 2009

CSSEdit is by far my favorite Mac CSS Editor. A must buy IMO.

Mayoorathen

September 18th, 2009

I do remember I was using Top style long ago. It was a good one.. Well we need CSS editors based on browsers… So it will make our life easy.. Cool selections of CSS editors..

Diane

September 18th, 2009

TopStyle all the way! I’ve been using it for several years and I love it. The new 4.0 version added some great features.

Craig Wann

September 18th, 2009

@Yoyo ROFL

Nicholas

September 18th, 2009

Great to try out some new editors, but I absolutely love TopStyle. Couldn’t do my work without it.

Tracy

September 18th, 2009

cssed for Linux, Windows & Mac. I haven’t used it much because I use Aptana all of the time. It has code completion, syntax highlighting, validation, shortcuts. It’s not limited to just CSS too.

Justin Young

September 18th, 2009

I use Coda and CSSEdit combination. The ability to “x-ray” a particular element is invaluable – and has streamlined many of my projects. The only problem I have with CSSEdit is it can crash on occasion. But I couldn’t imagine working without it.

sans gluten

September 18th, 2009

Personally, I use PSPAD, and I like it.

John

September 18th, 2009

Agreed. I’d be using CSSedit if Coda wasn’t so kickass. CSSedit is right up there with the best of them and super-advanced.

Daquan Wright

September 18th, 2009

It seems like Mac has all the slickest programs….

But I have Notepad++ and I like it, a lot. I also use Netbeans IDE, and that too has a live preview of CSS modifications (quite powerful).

I’d love to get my hands on Coda, but Text Mate seems like a great choice and I may buy in the future.

E-TextEditor: http://www.e-texteditor.com/index.html

Dennis

September 19th, 2009

Topstyle really is missing – usually the post gets updated if something important is missing?!

Three Styles - Shane Jeffers

September 19th, 2009

@Tony I agree with you CSSEdit is very robust and has lots of features. My favorite CSS editor by far.

Tjeerd

September 19th, 2009

I’m using Dreamweaver during development. But for quick editing notepad++ or an OS native text-editor works fine as well (and some scripts like wordpress and SMF have their on-board editors).

I don’t see the use for stand-alone CSS-editors either.

Stephan

September 20th, 2009

Huge fan of Stylizer, glad to see it get a mention. Easily the best CSS editor I’ve used. Hopefully they add webkit browser support and more robust CSS3 stuff in the future.

You should also check out Flux for the mac made by the escapers. It’s visual WYSIWYG drag and drop CSS design along with a traditional CSS editor and IMO has some potential. Too bad there’s no windows alternative for that yet.

jing

September 20th, 2009

i used notepad++ almost time to coding, i’ve try few time all text editor, css editor i found on the net, but final i comeback to my notepad++. its lightweight and awesome tool so i cant live without it :P

Matt Walker

September 20th, 2009

Its technically not a CSS ediotr but I think Firebug warrants a mention here. I use it constantly in website tweaking for its live-editing capabilities and its great targeting tools.

dougwig

September 21st, 2009

Firebug! — I’m going to make a bold statement and say that most CSS is dialed in using firebug ( background-position; margin, padding, font-size, all easily adjusted with firebug and the up/down arrows ) –of course you then have to copy the values to your stylesheet. CSS Optimization ( remove duplicate rules, etc. ) That’s what I want.

Jake

September 21st, 2009

CSSEdit is absolutely a pro-app! X-ray and Milestones are extremely useful in everyday professional web design, and the app’s interface is sleek and beautiful. A must have!

oliverastro

September 21st, 2009

Topstyle 4, Notepad++ and intype or E-editor in Windows
CSSED, Geany or Gedit en Gnome and Kate or Quanta in KDE
multiplataform IDE Aptana or Komodo edit