Menu

10 Top-Notch CSS Editors

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

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

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

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

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

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

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

CSS Edit

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

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

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

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

Related Content

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.

This was published on Sep 17, 2009

56 Comments

Pariah Burke Sep 17 2009

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

Coda for the Mac (not only CSS)

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/

Your photo, are you like 12 years old?

Marty Bishop Sep 17 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 Sep 17 2009

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

curtismchale Sep 18 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 Sep 18 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 Sep 18 2009

Aptana!!!

Mjohnsonmedia Sep 18 2009

Coda

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 Sep 18 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.

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

Paul Albrecht Sep 18 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 Sep 18 2009

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

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

Plugo.cz Sep 18 2009

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

Jacob Gube Sep 18 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 Sep 18 2009

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

Gerua Somp Sep 18 2009

Any for Linux/Debian/Ubuntu??

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

Mayoorathen Sep 18 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..

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 Sep 18 2009

@Yoyo ROFL

Nicholas Sep 18 2009

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

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 Sep 18 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 Sep 18 2009

Personally, I use PSPAD, and I like it.

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 Sep 18 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

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

Three Styles - Shane Jeffers Sep 19 2009

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

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 Sep 20 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.

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 Sep 20 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 Sep 21 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.

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 Sep 21 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

Coda has a very nice CSS editor (and also some other great options).

Sergio Costa Sep 21 2009

Definatelly, Firebug is worth being mentioned. I use it along Visual Studio for tweaks.

Maestric Sep 21 2009

CSSEdit + Firebug for quick and efficient web development. Before those tools, it was such a pain.

Ya you may seen all but not these, the best programs that will suite for your development are

1) webuilder 2008 (html,css,php,javascript and other)
(I use it for xhtml/css and javascript)

2) phpdesigner (It’s highly recommended for php dev and it’s also an IDE so you know what i mean you can work with other coding languages too)

TopStyle 4

waqas zahoor Oct 01 2009

topstyle is best

Bogdan Günther Oct 04 2009

Hey, CSSEdit is not only for beginners. I am using it together with TextMate as a pro web designer :-)

Topstyle rocks!

Silver Firefly Oct 31 2009

I use TopStyle and Notepad++.

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.

Hey, CSSEdit is not only for beginners. I am using it together with TextMate as a pro web designer :-)

I’m using Notepad++.

botarab Nov 27 2009

I’m using Microsoft Express Web
because is the best editor for me

I use free PHP/HTML/CSS/JavaScript editor – Codelobster PHP Edition

Blender Apr 01 2010

You say, about CSSEdit: “It’s best suited for first time and casual CSS coders.”

Come on. By far the best editor. I use it on very large complex sites.
By your comment i can tell that you have never used it! CCSEit is the best ccs-edtor ever!

Pavan Somu Jun 08 2010

Thanks for the sharing the resources.

This comment section is closed. Please contact us if you have important new information about this post.

Partners