10 Best of Breed CSS Editors

This is a Guest post by James Adams, If you want to contribute feel free to contact me.

Thanks to CSS, we can now define a website’s appearance in a fraction of the time we used to, but why stop there? A good CSS editor can make the entire CSS process even faster, more accurate and just more enjoyable. Most of us use Dreamweaver for all of our CSS editing needs, but it’s expensive and doesn’t offer some of the features you get from cheaper, often free alternatives.

First-rate CSS editors make writing CSS much easier, but that’s not all they’re good for. The vast majority will check your CSS for errors and let you delve into the code associated with your sites and the sites of others. With so many people now using these CSS editors, support it very easy to get hold of. There are loads of inexpensive editors available, so why not give a couple a try? You’ll find a review of the 10 best below.

1. Notepad++ (free)

Windows users can’t do much better than the free source code editor, Notepad++. Besides a long list of features, which includes auto-completion, syntax highlighting, bookmarking, drag and drop and regular expression search/replace, Notepad++ has been designed to be good to the environment, using as little CPU power as possible. Users can feel smug in the knowledge that their editor is actively reducing their greenhouse gas emissions!

Notepad++ is not just for editing CSS. You can use it for editing C, C++, Java, PHP and a whole host of other programming languages. Its tabbed interface is great, letting you work on several projects simultaneously, and all icons used are instantly recognisable. Furthermore, Notepad++ has been around for a while now, so does not suffer from the bugs which afflict many newer editors.

2. Style Master ($59.99)

Style Master

Style Master, for Mac and Windows, is an editor suitable for beginners and experts alike. Newcomers to coding will find its in-depth tutorials easy to follow and old hands will be impressed with the number of features on offer for analysing and debugging sites.

Such features include MRI, which suggests selectors for any element you click on, and X-ray, which reveals the dimensions, padding, margins and position of any element and works in Safari, Firefox and Internet Explorer. Style Master comes with 20 handy CSS templates for you to use, all of which are perfectly clean and well laid out.

3. Stylizer (free version)

Stylizer

Available for Mac and Windows, Stylizer, from Canadian company Skybound, helps you to create and edit CSS fast. It places a website and stylesheet side-by-side, so that you can see every change you make in real time. No longer, therefore, will you have to rely on writing in a text editor and constantly refreshing a browser window. Its grid-like interface looks superb, is extremely user-friendly and makes CSS errors a thing of the past. Image replacement, clear fixes, positioning and other complex techniques are made much easier for CSS novices.

Stylizer’s strongest features include Bullseye, an inspector which uncovers all the CSS rules affecting any element you click on; Cleanser, which parses and validates any CSS you import; and Two Click Colouring, which helps to simplify the colour picking process. Stylizer is ideal for beginners who want to be able to code without learning the boring basics.

4. PSPad (free)

PSPad

PSPad is a versatile editor for Windows. It’s a small programme, just 3.1MB to download, but carries real weight with many developers. It specialises in syntax highlighting and can deal with a large number of file types. Standard features include templates, search and replace in files, a HEX editor and an integrated free version of the superb CSS Editor, TopStyle Lite, which must be downloaded separately. Even if you’re just looking for a standard text editor, PSPad could be the one for you- its character and word frequency checker is ideal for those writing keyword-based articles.

5. Xyle Scope (free)

Xyle Scope

Cultured Code’s free CSS suite for Mac, Xyle Scope, is a very accomplished and highly recommended programme. Users can run it in Browser Mode, which lets you surf the web in Safari, or Selection Mode, which brings up the HTML and CSS associated with any part of a displayed web page you click on, allowing you to correct annoying CSS errors.

Although primarily designed to let you uncover and investigate code, Xyle Scope can also be used as a CSS editor. It also integrates well with superior, external text editors like BBEdit, TextMate and TextEdit. You can enter CSS yourself or let Xyle Scope help you if you’re a beginner.

6. Stylesheet Maker ($34)

Stylesheet Maker

CoffeeCup’s Stylesheet Maker, Windows only, is a nice and simple CSS editor which lacks some features of more technical rival software, but makes up for it with straightforward design. You can use it to open, edit and save in CSS, HTML and .txt formats, and create CSS for Netscape and Internet Explorer, testing it in multiple browsers. This is really one for beginners only. They’ll love the class and ID wizards which greatly help in creating full-featured CSS with control over text placement, fonts and backgrounds.

7. CSSEdit ($30)

CSSEdit

CSSEdit, by Mac Rabbit, is a highly effective, well structured and pretty cheap CSS editor which you’re bound to enjoy using. Available for Mac only, it’s been designed solely with CSS in mind, unlike some of the other editors in this list. It works perfectly with TextMate (which is a very cost effective combo, by the way) and in harmony with other external programs, like Transmit.

CSSEdit’s packed full of great features, which include Preview, which makes changes to your website in real time (no refreshing) and X-Ray, which shows you exactly where an element is on your page. My favourite feature, however, is Milestones, which lets you fix bugs without the fear of losing work. I recommend you heed the CSSEdit warning: May cause extremely attractive websites and bouts of validating code. Use with care.

8. JEdit (free)

JEdit

While novices will find Stylizer and CSSEdit much easier to get to grips with, JEdit, for Windows, Mac and Unix, is one for the experts. Developers can use it to edit, auto indent and syntax highlight over 130 languages.

What separates JEdit from other editors is the 150 or so plugins available, which have been released over the past 12 years since it was first created. These include spell checker using Aspell, text auto-complete and the XML plugin that’s needed for editing CSS, as well as XML, HTML and JavaScript. Besides plugins, you can customise with macros to create your ideal editing environment.

9. Style Studio ($49.99)

Style Studio

Style Studio CSS Editor, for Windows, has been designed to make CSS quick and easy to write and implement. Drag and drop, auto-replace and custom hotkeys for code snippets reduce your CSS struggle. Its inbuilt CSS validator makes sure that your CSS is clean and error-free every time as it automatically pinpoints problems. Its Browser Filter detects the browser your visitors are using, adjusting the CSS accordingly so your site’s always looking at its best. Windows users will feel instantly at home using Style Studio as it has been closely modelled on MS Office 2000 and XP.

10. Rapid CSS 2010 ($29.85)

Rapid CSS

Rapid CSS 2010, from Blumentals Software, is a popular CSS editor which can save you lots of time and effort. Beginners will appreciate the fact that they can get Rapid CSS to write CSS for them, rather than inputting it manually, and everyone will love its CSS Checker and Validator, similar to that of Style Studio, which allows you to instantly target and fix problems. Rapid CSS is also integrated with CSE HTML Validator for extra safety.

Besides the CSS Checker, other extremely handy features in this Windows only editor include the multi item clipboard, X-Ray (similar to CSS Edit), search and replace in files, CSS code compressor, built-in CSS reference and CSS inspector, which adds, removes and modifies CSS properties without the need for property names.

Discussion

  • Pingback: 10 Best of Breed CSS Editors | CSSReflex.com | My Blog

  • Pingback: 10 Best of Breed CSS Editors | CSSReflex.com | CSS Guru How to CSS

  • http://www.webedesigner.com/ Greg Harris

    Awesome, blog post!! I just had to comment.

  • Pingback: The value of the on page SEO | Seo Consulting Specialists

  • Pingback: Q&A: Best blog provider with custom themes ? (without paying)? | The Blogging Expert

  • Pingback: how to connect database from sql 2008 to vb.net, visual studio 2008?

  • Pingback: How to change the Header in WP Theme? Please Help!? | The Blogging Expert

  • Pingback: CSS Tutorial to build your own CSS website – Part 1 | Focus of Designs

  • Navid

    Nice post brother!
    .-= Navid ´s last blog ..Android OS Runs on Iphone 3G =-.

  • Pingback: how do you market male escort services to women? | Escort Marketing

  • deaky

    If you’re going to mention a bunch of text editors, you might as well toss vim and emacs on there because they blow most of the others up there out of the water (just have an initial learning curve). If you’re not aiming to be Windows-only there’s also TextMate, which is widely considered to be state-of-the-art.

    Developers also owe it to themselves to try Firebug, as it’s probably the best CSS and markup editor available anywhere (especially when it comes to live-manipulation of your page). Mozilla’s Bespin is also excellent, but goes largely ignored.

  • Pingback: Tweets that mention 10 Best of Breed CSS Editors | CSSReflex.com -- Topsy.com

  • Chris

    Correction: Stylizer is NOT available for the Mac. You can sign up top be notified when it is available by visiting their site.

    • Erica

      I came here and was delighted to read that Stylizer was on the Mac – but Chris is right. They were talking about the Mac version last year but still no word on its availability. That said, I saw they had posted a job ad for a Mac friendly developer a few weeks ago, so here’s to hoping.

      • Frank

        Stylizer for Mac Beta is available. You just need to contact Skybound if you want to participate.

  • Pingback: 10 Best of Breed CSS Editors | CSSReflex.com » Web Design

  • thehauss

    notepad++ truly is a awesome programm and is constantly getting better and more comfortable and for that just got some donation love from me!

  • eldo

    very great source, with help of this software the beginner can be easier to learn to be a pro. the explanation is also complete. thumb up! =]

  • Pingback: NLM » Oh Sheet! Styling And Cascading :: NxT LvL MrktnG :: Raising Your Brand To The NxT LvL

  • You gotta be kidding

    dont even mentioned about NOTEPAD 2 and place Notepad ++ on first place? Author never use one of this, just make another lame “The very best of …” list :(

  • Pingback: 10 Best of Breed CSS Editors | Crafted Copy

  • Tom Conlon

    How you could miss giving a proper mention to Topstyle is beyond me!

    http://www.topstyle4.com/

  • Learn

    To learn PHP with advanced you can visit Advanced PHP tutorial ..

  • Andy

    Thanks for the great post…

    I used UltraEdit on windows, it was great for CSS, HTML, PHP, MySQL; even had FTP/SFTP and a scripting feature (which I loved).

    http://www.ultraedit.com/products/ultraedit.html

    I recently switched to Mac. I haven’t been satisfied with any of the replacements I’ve tried on the Mac yet. I’ll try some of these…

  • http://mswallace.com Matthew Wallace

    Totally 100% agree with @deaky. TextMate is the bomb! I can’t believe you didn’t put it on this list.
    .-= Matthew Wallace´s last blog ..Learn Actionscript 3 and FDT for free. Limited time! =-.

  • http://www.codelobster.com Stas

    I use Codelobster PHP Edition (http://www.codelobster.com) as free CSS editor.

  • http://www.fromdev.com Web Development

    Just downloaded Notepad++ and luving it :)..thanks for sharing.
    .-= Web Development´s last blog ..Search Engine Best Practices: Compass as a Lucene Abstraction =-.

  • sanjeev jha

    Nice list .well done.Check http://www.indigloo.com

  • http://www.gardenland.ro mobilier gradina

    Love Notepad++
    Thanks for sharing!
    mobilier gradina

  • http://www.mykungfuisstrong.com Neil

    TextMate is awesome on OS X; E (text Editor) is a Windows port of TextMate and uses the same bundles which is what really makes these apps the best. Also, on Linux with Gnome you can make gedit work like these two easily.

  • http://cqstyle.com Craig Quiter

    I have built a revolutionary CSS editor that none of these can touch in terms of design time. It’s called cqstyle and is freely available as a desktop app and chrome extension at cqstyle.com. Edits can be seen in real time and what’s more, you can slide CSS values across a plethora of variations in seconds. Once you try it you can never go back. :)

  • Pingback: 10 Best of Breed CSS Editors

  • Pingback: Golfing Technique In Pictures. By James Adams, Ken Bousfield, Eric Brown, W.J.Cox… | Golfing Tips

  • http://www.sensitivedesigns.com Najeeb Puthiyallam

    I love Notepad++ its simple and cute :P

  • http://www.techmaish.com/ Tech Maish

    I love NotePad++ because it is free and allows all features just like paid ones.

  • http://www.4over4.com/label-sticker-printing-standard.aspx stickerfan

    notepad++ is the coolest of all! i remember using it a lot during high school actually to make simple html pages or source code for c++.. nice memories haha.. thanks for the post! there are some really cool apps

  • http://www.buzinessware.com/ web design dubai

    Awesome, great post.

  • http://www.abouttiyo.web.id Tiyo Kamtiyono

    I’d prefer to use Programmer’s Notepad rather than style master or notepad++. Bay the way, good list :D

  • CSS Gallery

    Nice article! All of our editors use Notepad++, though we are always looking for the next greatest thing. We will be following up on researching the suggestions in your article. Nice work!

    Staff of http://CSSGallery.com

  • http://EasyLifeTerm.com EasyLifeTerm.com

    Great insights! Very helpful for a semi novice.

  • http://joomla.inkanet.eu/wysiwyg-css-editor Simon

    Great and comprehensive list. I’m using Stylizer and I’m very satisfied with its user friendly interface and real time parsing. There is version 5. on the horizont.

  • Kevin John Ventura

    Great List! Thanks

  • elhuus

    stylizer saves you a lot of hassles and troubles especially for big projects with lots of style sheets.
    the pro version is great the free edition is striped down a lot.

  • Phillip

    Great list, but the “Free” version of Stylizer is actually just a two week trial.

    It’s an $79 program. Hardly free.

  • http://JustLikeAMagic.com Mohammad Elsheimy

    Very nice article, but still not sure what’s the best!!! :(

  • George

    very interesting article which css editor do you suggest to use (able to work on windows 7)
    tha has the most options and produces the best code (follows standards) or anything else important

    thank you

  • sujith s

    Xeoscript Technologies got another better online CSS Editor “XEO CSS” with lot more

    features like.

    1.) Styling with zero coding.
    2.) Real time preview.
    3.) CSS 3 properties like Transition, Transforms, Box and Text shadow, Border radius etc.
    4.) Photoshop like Gradients(using css3) with plenty of linear gradient presets.
    5.) Includes a Good HTML Editor.
    6.) Save your work online.
    7.) Multiple HTML files for a single CSS file.
    8.) One click CLASS & ID generation from HTML files.

    Now check it out: http://www.xeo-css.com

    Xeo CSS is a product of xeoscript technologies ( http://www.xeoscript.com ).

  • steam boilers

    Absolutely awesome list. Thank you so much you saved my day. Thanks for sharing with us.

  • http://www.etoxin.net etoxin

    I’ve come to love “sublime edit”. Its a really powerful fun editor. Everyone should at least try this. It has a lot of good tricks up its sleeve.

  • http://www.headrestdvdplayers.info/ Alberto Dieago

    I use notepadd++ for editing css files and database scripts. It is a good one. But the Regular expression support is not that up to the mark. I love the regex engine in other editors.

  • Pingback: xhtml css templates – 10 Best of Breed CSS Editors | XHTML CSS - Style sheet and html programming tutorial and guides

  • http://www.javedqureshi.com Javed Ahmad Qureshi

    James Adams,
    Thanks for nice sharing. Be blessed

  • John Gardeniers

    You apparently don’t know the difference between a CSS editor and a text editor with syntax highlighting for. The majority of those listed are just text editors, not CSS editors.

  • http://www.webthesmartway.com Siegfried

    Really good take on CSS editors, I really like that STylizer thing – cannot be bothered with learning CSS (hmm… I am getting old I think)

  • http://www.askgetanswer.com grand near

    i think you miss real css editor, not text editor with css higlighting, there some real drag and rop css editor most people like

  • http://www.facebook.com/Ehsaan10r Ehsaan Baloch

    Nice one

  • clod

    Here is one more great free editor: http://www.codelobster.com

  • Ivan Augusto

    NetBeans PHP 7.4 it’s FREE, support PHP,HTML5,CSS3,SASS,LESS,Emmet,etc.. Real time test on Android devices.. auto code-formating..

    https://netbeans.org/features/php/