CSS Editors Reviewed

Advertisement

We continue to review text and source editors for designers and web-developers. After a thorough consideration of WYSIWIG- and source code editors now it’s time to take a closer look at applications for advanced CSS-coding. Reason: while numerous HTML-editors offer more or less advanced CSS-support there are also allround-CSS-editors which offer a sophisticated integrated development environment for CSS-coding.

Of course, real CSS ninjas accept nothing but a minimalistic Notepad or some sophisticated source code-editor. In fact, CSS-editors are often considered to be unnecessary and superflous — after all, you can do the same in your favourite text editor. And sometimes this is true — while there are some really bad HTML-editors there are also some even worse CSS-editors. Particularly code autocompletion tools are extremely good at bloating the code to extremes, making the resulting stylesheet unnecessary complex and hard to maintain. Why would someone purchase a CSS-editor to raise the maintenance costs afterwards?

Yet CSS-editors can be helpful; furthermore, you can effectively use them in different settings by developers with different skills. Web professionals can use a CSS-editor to improve workflow and get all useful CSS-tools provided by one single application. Newbies can easier learn CSS by analzying stylesheets and using live-editing to understand how the design is built up and what is actually going on behind the scenes. In either case you should make sure you know what you are doing and not end up producing quick’n'dirty stylesheet.

Why the heck do I need a CSS-editor?

Well, actually you don’t need one. But you may want to use one to make your workflow more effective. The main advantage of CSS-editors lies in an integrated development environement they offer to web-developers. The main task of a CSS-editor is to combine the editing features of CSS-stylesheets, HTML-source code and the site layout effectively within a compact interface. However, often CSS-editors go even further.

Apart from coding functionality good CSS-editors offer assisting tools for debugging and testing as well as useful features such as live-editing, preview in different browsers, advanced code browsing, code formatter, beautifier and compressor, validation, built-in CSS-reference and project management tools. Combining these features together you get an arsenal of useful tools all ready to hand in front of you.

Some editors also enable you to organize parts of the code into folders and filter the stylesheet easily which simplifies maintenance and makes the source code easier to scan. Another useful feature is instant style sheet preview with Internet Explorer or FireFox which is hard to find in any “standard HTML-editor. Furthermore, with CSS-editors it’s easy to analyze code problems using a code inspector and decompose a stylesheet using the so-called “X-Ray” function.

To put it short: the main advantage of a CSS-editor is that it offers an integrated, compact environment for CSS-design and enables a quick and effective coding workflow which would require a dozen of external tools otherwise. So which CSS-editors are available?

Xyle

Xyle (Mac)
This advanced editor allows developers to edit web-sites on the fly using the embedded stylesheet. Similary to Web Developer’s Toolbar you can modify the CSS-code and the changes will be displayed immediately in the browser window. Compared to Web Developer’s Toolbar, with Xyle you have further useful features such as selectors tree view, syntax highlighting and advanced file management.

CSS Editor Screenshot
Large preview

In Browser Mode you can browse the Web using Safari’s rendering engine. In Selection Mode, clicking into any part of the web page displayed will reveal the exact portion of the HTML and CSS sources that are responsible for the contents and formatting of that part.

In Cascade mode, Xylescope displays not only the style rules that apply to the currently selected element, but also all rules applying to ancestors of the selected element. When debugging, with
Xylescope you can simply select a “problematic” element in Cascade Mode to see which rules are actually applied and which ones are overridden, including those that are applied to ancestors of the
given element! Xylescope displays the specificity of selectors to indicate why rules have precedence and dims overridden CSS properties to improve clarity. Xylescope also offers integration with external text editors such as BBEdit.

Price: $19.95. A trial version is available. A nice solution without advanced features such as validation, compressor or beautiful offer to an optimal price.

Some of Xyle’s features

  • Automatic formatting
  • Selector matching
  • filter large CSS files using smart groups
  • built-in DTD viewer

Stylizer

Stylizer (Windows)
Two things make Stylizer a slightly different mindset than the others: it uses a grid interface instead of a text editor, and it has Firefox and IE embedded, so when the user changes the CSS, it’s propagated right away to the browser. The grid system makes CSS feel like “CSS on rails”, because it makes it impossible to have any CSS errors. It lets Stylizer do things such as a Firebug-like element inspector that lets the user diagnose and edit in the same place, and an editable, spotlight-style filtering system.

CSS Editor Screenshot

In Stylizer dimensions can be adjusted on the fly. To change a height, a margin, or a background-position, the user can literally click on the value, drag the mouse around, and watch the element be manipulated in real time. Colors are the same. The user can click on them, drag the mouse, and see the color of the text, background, or border change in the browser, in real-time, creating a “Photoshop for the web” type feeling. Stylizer Basic is free. The premium version (Price: $69.95) isn’t that different, however in a free version it’s impossible to filter a style sheet to only show rules with specified content.

Rapid CSS Editor

Rapid CSS Editor (Win)
This editor supports developers with a syntax highlighting, autocompleter and a code inspector which ensures that the produced code is correct. You can use built-in CSS- and HTML-references to quickly look up the syntax and attributes of a given selector or tag. A color tool enables designers to pick the right color without switching to color application and observe the result live using the Style Sheet Preview with Internet Explorer and Firefox. A file manager can also take care of uploading CSS-files via FTP. Furthermore, you can make use of an advanced clipboard to keep multiple code fragments ready to hand. The editor costs $29.85. A trial-version is available.

CSS Editor Screenshot

Some of Rapid CSS’s features

  • Syntax Highlighting for CSS and HTML documents
  • CSS Checker and Validator
  • CSS Code Explorer
  • Code Inspector
  • Code Auto Complete for CSS and HTML
  • Instant Style Sheet Preview with Internet Explorer or FireFox
  • X-Ray for HTML preview
  • Compliance with CSS standards and various browsers
  • Integration with W3C CSS and HTML validators
  • Built-in CSS Reference
  • CSS Code Formatter and Beautifier
  • CSS Code Compressor
  • Search and Replace with Regular Expression support
  • Search and Replace in files
  • Multi Item Clipboard
  • Built-in File Explorer
  • Save and open files directly from FTP
  • Project and site management and FTP publishing
  • Fully customizable interface
  • Code collapse

TopStyle

TopStyle (Win)
The CSS-HTML-editor TopStyle is available in its Lite-version within the HTML-editor Homesite — however, there is also a sophisticated full version for professional web-developers. With TopStyle developers get a number of features which aren’t available in other editors. For instance, with integrated HTML-tidy you can easily convert depricated HTML-tags in valid XHTML. The integrated Style update replaces deprecated tags such as the <font>-tag with respective valid CSS-rules. The Clip Library contains frequently used code-snippets. A split window enables a direct browser-comparison displays site presentation in Internet Explorer and Mozilla. You can also vary the Doctype-definition to find out how different DTDs influence the layout in different browsers.

CSS Editor Screenshot

Probably the most powerful tool in TopStyle is Style checker. Not only can it validate style sheets and hence ensure the correct layout presentation in different browsers. It can also predict bugs in popular browsers which may appear despite the valid CSS-code. You can also forward CSS-stylesheets to W3C CSS Validation Service to fix the problems which haven’t been found by TopStyle. The full version costs $79.95. Warning: the lite-version can’t be updated. Windows-only.

Some of Top Style’s features

  • HTML, xHTML and CSS Editing in a Single Program: HTML attributes are categorized so you can quickly see which are required, and it generates XHTML-compliant markup with a simple toggle.
  • Easy Navigation Between Documents: Click an HTML class attribute to navigate to the definition of that class in an external style sheet or click an anchor tag or CSS link to open the linked file for editing. You can even click on an < img > tag to open the image file in your favorite image editor.
  • Element and Attribute Validation as You Type: All of the classes are defined in your style blocks and external style sheets, so assigning a class to an HTML tag is a very simple task.
  • Style Checker: Validate your style sheets against multiple browsers, flagging any invalid properties or values it finds. You can also pass your style sheets directly to the W3C’s CSS Validation Service, so you can quickly check against the official CSS specifications.
  • Style Upgrade: A quick, reliable way to replace all deprecated (outdated) HTML markup – including the long-abused HTML < font > tag – with equivalent CSS.
  • HTML Tidy Integration: Make the move to XHTML painless with the built-in Tidy configuration, which converts HTML to XHTML with a single click!
  • Site Reports: See at a glance where styles are used in your site. Find out where you’ve applied style classes that aren’t defined in any style sheets, or see what style classes you’ve defined that aren’t being used.
  • Full Screen Preview: Split the preview between Internet Explorer and Mozilla for an immediate look at browser differences. You can even change the !DOCTYPE of each preview panel on-the-fly to see how different document type declarations affect your layout.
  • Integration with W3C HTML Validation: Results of the validation are displayed within TopStyle, with hyperlinked line numbers that synchronize with TopStyle’s editor.

CSSEdit

MacRabbit CSSEdit (Mac)
Similarly to XyleScope, CSSEdit offers real-time styling of stylesheets. Even when a dynamic web-application is powered by a complex database or makes use of AJAX, you can style and analyze it without the hassle of uploading or refreshing (online and offline — this is not the case in Web Developer’s Toolbar). Selector Builder lets you describe what elements to style in plain English. Intelligent CodeSense analyzes CSS and CSS behavior to offer smart, context-sensitive suggestions.

CSS Editor Screenshot
Large preview

X-ray Inspector shows you what styles apply to a HTML-document. You can also validate your sheets against W3C standards and use project management tools (Milestones etc.) to improve your workflow. Among other things CSSEdit automatically adds brackets, (semi-)colons and appropriate spacing for you. If you encounter a style sheet from someone who didn’t have that luxury, you can always do a Re-Indent to apply your spacing settings. Besides, it has a live-preview feature and the clipboard library for frequently used code snippets.

There is an EditCSS plugin for Firefox as well as CSSEdit bookmarklets. You can start editing any site’s style sheets with a single click in your browser’s Bookmarks bar, and then use the advanced CSSEdit’s editing. The tool has a beautiful, intuitive interface which is very compact yet very well organized and nice to work with. EditCSS costs 29.95 Euro ($47). There is also a trial-version available for free download.

Some of CSS Edit’s features

  • Selector Builder takes the Yuck out of selectors
  • Organize in folders and filter easily
  • Modify source code with intelligent CodeSense
  • X-ray pages
  • Live-preview
  • Intelligent CodeSense support
  • Project management
  • Validation tool
  • Integration in web-browsers

Style Master

Style Master (Win / Mac)
Since this WYSIWIG-CSS-editor calls itself a master it needs to have some nifty features which let the tools stand out from the crowd. In fact, Style Master enables both newbies and professionals to create valid and semantically correct stylesheets. The selectors can be grouped by alphabet, category or current settings. The editor has an integrated color picker, various templates, wizards and validation tools. Hence, the professional can work easily and effectively while newbies don’t have to figure out their way through CSS-tricks to create flexible CSS-based web-sites.

CSS Editor Screenshot

Quite surprising is the fact that various templates which are by default integrated in the editor are actually useful — that’s not the case in most editing applications. Hence you can simply take over a CSS-skeleton and define the rules — all selectors are already listed. You can also use a W3C-example-stylesheet which defines the style of almost every possible HTML-tag, e.g. the leading of headlines <hx>.

Style Master allows you to use online documents (and those running on local servers) as preview documents. You can then use all the features of the Design Pane, like X-Ray, to design your styles sheets. The editor is simple, intuitive and clean. Price: $59.99. Not cheap, however in the end you get an effective and powerful tool for your daily routine. Style Master is available for both Windows and Mac. There is also a trial-version available for free download.

Some of Stylemaster’s Features

  • Browser support help
  • Wizards
  • Over 40 Templates
  • Use X-Ray to instantly see the structure of your layouts
  • Code optimization
  • Intelligent code completion
  • Whitespace formatting tools

Style Studio

Style Studio (Win)
Style Studio offers a powerful "CSS-Checker" which enables both newbies and professional to develop standard-conform CSS-based layouts. Developers can use a number of assisting tools such as “Smart linker” which links multiple CSS documents to many HTML XHTML / XML documents at once and CSS Manager that manages and upgrades to standard compliant code (tidy) and detects CSS-related problems.

CSS Editor Screenshot

The editor has an IntelliSense-like technology (for both style sheets and HTML) with quick lookup-reference for CSS. Property Watch automatically detects CSS property (or HTML tag if you’re editing an HTML document) under caret and lists complete information about it.

Style Studio costs $49.95 and is available only for Windows. The official web-site offers a number of CSS-related articles, layouts and tutorials.

Some of Style Studio’s Features

  • Powerful customizable Syntax-Colored Editor with full search/replace/editing capabilities
  • CSS Validator: a powerful css checking utility to detect and correct common css errors.
  • Powerful CSS Manager to help you manage, upgrade to standard compliant code (tidy) and detect CSS-related problems in your web-site.
  • Integration with over 35 HTML editors
  • IntelliSense for style sheets and HTML
  • CSS Property Watch and Instant help on css keywords under caret
  • Multi files Import from HTML/Export in HTML capability
  • Customizable CSS Code Indent
  • CSS wizards
  • Validate XML documents
  • Intelligent parser which detect invalid properties as you type.
  • Unlimited number of code snippets with custom hotkeys.
  • Migration Wizard
  • Automatically detect installed browsers/web-authoring tools.
  • Formatting ToolBars which simplify the use common properties
  • Easily change CSS values using Ctrl+Up/Down hotkeys.
  • True multiple CSS charts support (i.e. target IE 4+ AND Netscape 4+)
  • Built-in system-wide search and replace.

CoffeeCup

CoffeeCup StyleSheet Maker (Win)
CoffeeCup StyleSheet Maker offers CSS-editing options which offer something between sophisticated editor’s functionalities and basic editing features. It resembles TopStyle yet clearly doesn’t achieve the same level of flexibility.Using TopStyle you’ll also be able to overlap text, create links that aren’t underlined, place image backgrounds in tables, and even create your own tags with the functions you assign them. Price: $34.00. A trial-version is available.

CSS Editor Screenshot

Some of CoffeeCup’s Features

  • Includes CoffeeCup Website Color Schemer
  • Easy CSS Font Designer, just select from the drop down menus.
  • Step by Step Help for making your Style Sheets
  • Multiple Browser Testing
  • Edit, Save, and Open .css, .html or .txt documents.
  • 50 Style Sheet Drop Down Tags
  • Class & ID Wizard for Creating your own HTML Tags.
  • Dynamic HTML Snippets included.
  • Cascading Style Sheet Creation for Netscape and Internet Explorer 3.0+

EngInSite CSS Editor

EngInSite CSS Editor (Win)
If you would like to ensure the strictly correct CSS code which complies with W3C-standards, EngInSite is definitely an option worth considering. The main goal of the editor is to create strictly standard-conform web-sites which pass the W3C validation test. The tool has an integrated instant style sheet previewer, automated code completion, syntax highlighting, integration with W3C HTML Validator, integrated help system, built-in CSS Reference, customizable and expandable code library and live editing feature.

CSS Editor Screenshot

You can also use a CSS Property Editor with dynamic shorthand properties support and Selector Constructor – a convenient wizard for the complicated selectors and various code tools, like Expanding/Extract URLS, Convert Colors, Convert Code and so on. It is possible to navigate across selectors, properties, comments and @-rules and add / remove HTML-specific items like HTML comments and CDATA section. Price: $39.95. A trial-version is available.

Some of EngInSite’s features

  • Advanced, fully customizable text editor
  • Integrated Instant Style Sheet Preview against HTML file of your choice
  • Check your CSS syntax against multiple browsers
  • Integration with W3C HTML Validator
  • Compliance with CSS standards and various browsers
  • Preview in the different browsers.
  • Integrated help system and built-in CSS Reference
  • Multiple style sheets editing
  • Compatibility Check and Syntax check
  • Search and Replace with Regular Expression support
  • Customizable navigator with media rules support
  • Visual editors for different data types
  • Wizards for body, IE Scrollbars, lists and backgrounds

Jellyfish CSS

Jellyfish CSS (Mac)
Being extremely simple and intuitive, Jellyfish CSS makes sure that developers can edit CSS-styles easily and quickly. The editor has a code library, Code-Sense support, browser support reference, wizards and helps you avoiding mistakes (you’ll be informed immediately by the program, if you have mistyped accidentialy). You can also use an integrated Colorblender to create matching colour palettes. Price: 29,- € ($47). A trial-version is, of course, available.

CSS Editor Screenshot

Some of Jellyfish’s Features

  • Code-Sense helps you avoiding mistakes
  • Supports Mobile Profile 1.0
  • Syntax-highlighting
  • Codechecking while typing
  • 3 different preview-types
  • integrates extern Programs for a quick availability
  • Style-Check with the W3C Validator and CSS-Tidy
  • load CSS-files directly from thw www and work on them
  • Codesnippets
  • Wizards support you while creating Stylesheets
  • Colourblender

Astyle

Astyle (Win)
Astyle is a basic visual CSS-editor which offers exactly what one would expect from a basic editing tool. No advanced features, however more than essential editing tools. Astyle couldn’t really impress us with some extremely useful features or sensatonal abilities. Price: $20.

CSS Editor Screenshot

Some of Astyle’s Features

  • Visual easy-to-use interface
  • Graphic tree-type view of attachment files and the CSS structure
  • Grouped view of properties and selectors
  • Automatic selection and grouping of CSS selectors from a markup language document
  • Source CSS, HTML, XML highlight code editor
  • Active preview current selectors and documents with IE and Mozilla support
  • Clean up HTML document via CSS
  • Icon associate dictionary
  • Copy, Paste and Cut operations
  • Drag and Drop operations

Further CSS-Editors

JustStyle CSS Editor (Cross-platform)
JustStyle CSS Editor is a cross-platform editing application. Written entirely in Java, it works on different platforms, such as Microsoft Windows, IBM OS/2, Linux, Apple Mac OS, Mac OS X and others. You can edit the whole CSS-file at once or select some fragments of it and edit them separately. An integrated tool lets you integrate the CSS “on the fly” in HTML-files. Although JustStyle CSS Editor offers only a minimal set of features for CSS-development, it can serve as a quick tool for updating a CSS-file outside your personal development environment. However, JustStyle won’t be of any help in large corporate projects. UCWare offers JustStyle for free download.

Simple CSS (Win)
Simple CSS is another free editor for Mac, Linux and Windows. Single elements which can be styled via CSS can be grouped and defined separately. The preview-window enalbles designer to quickly check or tweak the produced source code. Once the CSS-file is done you can click on “Export CSS” and the file can be used for another project. Simple, easy and intuitive.

CSS Editor Screenshot

CSSED (Linux / Win / Mac)
CSSED is a CSS-expert for Linux. Although it delivers only essential features such as syntax highlighting, syntax validation and autocompletion-tool, it is highly extensible via plugins. For instance, you can easily add the search functionality or a file browser. You can find further plugins in the download area of developer’s site. Open Source.

Eric Meyer’s CSS Sculptor (Win)
Eric Meyer’s template-based add-on for Dreamweaver and Microsoft Expression Web. You can choose from any of the 30 included layouts—and then modify the design to the max: change the page width and position or number of columns. It is also possible to specify margins and padding for any page element along with type properties for paragraphs, headings and link states. You can save your modified layouts as new presets to be easily re-created or modified further.

Causeway CSS Editor
A legend, a legacy and one of the first CSS-editors ever created. The tool is unlikely to help you in developing CSS-stylesheets, but definitely had to be mentioned in a review of CSS-editors.

Alternative tools

  • Oxygen
    An XML-Editor with CSS-functionality
  • Eledicss
    A CSS2 editor (GPL licensed) implemented as a server-side PHP script. It allows editing CSS files using a web browser.
  • XMLSpy
    This editor includes a full-featured CSS editor to assist developers creating XML-based Web sites in XMLSpy.
  • Firebug
    Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.
  • CSS Layout Magic (Win / Mac)
    This Dreamweaver-plugin offers you a number of simple or advanced CSS-layouts. Works on Windows and Mac OS X systems running Dreamweaver MX. Price: $60.
  • Web Developer’s Toolbar (Firefox Extension)
    The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

    CSS Editor Screenshot

↑ Back to top

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

  1. 1

    Style Master looks very nice, thanks for sharing!
    Great post as usual. :)

    Joffrey

    1
  2. 2

    what about my favorite dreamweawer?

    0
  3. 3

    For windows, my favorite editor of everything text. NOTEPAD++.

    0
  4. 4

    One that was missed and in my opinion is one of the best out there both visually (very important) and with amazingly integrated functionality is Coda.

    These are the guys that brought us Transmit on Mac. This software has changed the way I work on code and is much faster working WYSIWIG than staring at code.

    Great article!

    1
  5. 5

    You guys left out InType for windows. Its possibly the most simplisitc editor for windows.

    0
  6. 6

    Matthijn Dijkstra

    June 19, 2008 9:20 am

    phpDesigner 2008 for the win :) For develloping in php, html, css, javascript, mysql you name it :)

    0
  7. 7

    I wish Adobe would build in a good CSS editor into Dreamweaver. That’ll be the day.
    -Furley

    0
  8. 8

    Great article! I am now think about using a CSS editor for a change. But i miss a “Editors pick” and rating (0 to 10 or something) of the various editors.

    0
  9. 9

    cougron.zxq.net

    June 19, 2008 9:44 am

    Smashing article, once again. I love it!

    0
  10. 10

    What about aptana?

    1
  11. 11

    dreamweaver rules when it comes to being a CSS editor

    0
  12. 12

    Nice list. In my opinion CSSEdit is the best, I love it.

    0
  13. 14

    Awesome! Thanks a ton

    Ajay

    0
  14. 15

    I use Textmate on the mac personally, since I’m also editing all my other files there at the same time across a project (html, css, ruby, yaml etc)

    0
  15. 16

    I use CSSEdit, and I’m happy with that. I haven’t tried Coda, though…

    0
  16. 17

    I’m not sure why EditCSS is in the CSSEdit section (other then the similar names) but to correct an error: CSSEdit is $29.99 US dollars.

    0
  17. 18

    And 4 linux that’s all?

    0
  18. 19

    These are all nice but I think handcoding CSS is the best way to go. For troubleshooting styles I use the firefox plugins you mentioned (Firebug and Web Developer Toolbar) but otherwise I don’t see a need for it. The most i’d get out of a CSS editor is code coloring and I get that just fine in Dreamweaver where I do all my other coding.

    0
  19. 20

    Vim all you need :)

    0
  20. 21

    Nice article, but surprised you didn’t mention Coda. I couldn’t live without it :)

    0
  21. 22

    yeah Coda for sure

    0
  22. 23

    I agree with Jarand…an editors pick or a ratings system would have been very helpful!

    Otherwise the post is great…two thumbs up for MacRabbit’s CSSEdit!

    0
  23. 24

    “Eric Meyer’s CSS Sculptor (Win)” Also works on a Mac.

    0
  24. 25

    I read almost all post but i couldn’t find freeware software. I use Free CSS Tollbox. It’s practical and lite. I suggest it to you.

    0
  25. 26

    I love the Web Developer tool bar for FF. Everything is right there on the screen!

    0
  26. 27

    where’s Coda?

    0
  27. 28

    I just wanted to ask what about TextMate (mac) and E-TextEditor (win). They are very powerful because of their bundles.

    0
  28. 29

    I don’t get why people need CSS editors, CSS is so easy you should be able to work it out if you’re a serious designer. The difficult part is the cross browser compatibility, but I don’t see how an editor would solve this.

    0
  29. 30

    aussi Adobe Golive .. c’est un editor pour le CSS ..

    tout chose clear et simple …et trés rapide

    0
  30. 31

    Mo buena revisión, como d costumbre
    QuintoH

    0
  31. 32

    Is there an “on-the-fly” editor like Xyle but for Windows ?

    Seems to be a very time-effective way !

    0
  32. 33

    “I wish Adobe would build in a good CSS editor into Dreamweaver. That’ll be the day.
    -Furley”

    Uh? Dreamweaver has by far the best css editor..

    0
  33. 34

    I just can’t live without CSSEdit. While some may think it’s heavy-handed, you can remove most of it’s hand holding and get on with just coding. It’s inspection tools and ability to override stylesheets are quite impressive.

    Easily the best I have tried.

    0
  34. 35

    I tried most of the things posted here and none had any improvement on my css coding. Firebug and EditCSS is basically all you need.

    0
  35. 36

    Sorry, folks, but CODA is for Mac only.
    It might be great, but what I’m looking for is something more the LINUX-type!

    0
  36. 37

    dreamweaver works fine for me, phpdesigner is a very powerful tool to, anyway I allready tested some editors specified here like Style Master, SimpleCSS etc, but I found more useful editing css directly with my project and not separately.

    0
  37. 38

    Firebug is far and away the most useful CSS tool I’ve found.

    Anybody have any suggestions for a way to edit CSS on the fly in IE like you can w/ Firebug?

    0
  38. 39

    The CSS editor in Expression Web is awesome because while you edit your external CSS by hand in one instance of the program, the preview surface of your page updates automatically w/out requiring a refresh in a second instance of the program.

    0
  39. 40

    @Ryan: I’m a serious designer and the reason I favour Coda is because it combines a great coding editor (with lots of useful features), a file manager and fast ftp client — all-in-one.

    For these reasons, it allows a much faster workflow, and combined with Firefox/Firebug, a perfect web development environment.

    Regarding cross-browser compatibility, Coda’s built-in ftp client makes it much easier to bugfix for IE etc. as you can perform your tweaks and upload the css file very quickly, rinsing and repeating as required ;)

    0
  40. 41

    Notepad2 beats them all

    0
  41. 42

    Vitaly Friedman & Sven Lennartz

    June 19, 2008 1:57 pm

    @all: this post is about CSS-editors, we’ve featured WYSIWIG- and source code-editors in our previous posts. Please read the article carefully.

    0
  42. 43

    Notepad++ for any development. period.

    0
  43. 44

    Aptana Studio has a powerful CSS editing feature too, among its other good sides :-)

    0
  44. 45

    @JakeT (June 19th, 2008, 1:27 pm)
    Use IE Developer Toolbar, it’s no match to Firebug, but surely helps.

    0
  45. 46

    Hey, your parser eats link content, this sucks.

    0
  46. 47

    Coda + CSSedit …working great… i’dlove a tool with IE preview on the mac… Curently, parallels does the job…

    0
  47. 48

    To make your workflow more effective is exactly right. I could code in pico in unix but what’s the point? I’m not trying to impress anyone, I’m trying to get to bed before 2am.

    0
  48. 49

    On the Mac, I’ve ditched Coda in favor of TextMate for all text/code editing tasks.

    But for CSS, I use CSSEdit and love it.

    On Windows, all my code editing is done with Notepad++

    0
  49. 50

    Please remember that many people are CSS novices..and posting that Notepad rules ok! is just another way of telling us how superb you are at hand coding. Apart from that gripe thanks muchly to the folks at Smashing for not overlooking us less experienced coders.

    0
  50. 51

    I used to use TopStyle a lot – not so much for all the fancy features, but the built-in documentation was integrated beautifully. It didn’t feel like documentation – and that was great.

    0
  51. 52

    My main tool is the awesome Coda, although I must confess that I usually write the css myself and not by using the editor.
    CSSEdit is also one among my favorite tools. Xyle, I don’t use that often but can be handy at times.

    0
  52. 53

    CSSEdit and Textmate – my tools! They are da bomb!

    0
  53. 54

    Notepad++ all the way. It offers very nice highlighting, among dozens of other features, and supports dozens of languages.

    0
  54. 55

    How can you not mention Coda from Panic?!

    0
  55. 56

    Blah! Nothing compares with Skybound Stylizer…

    0
  56. 57

    You know – one of the most creative and advanced features I’ve seen in a CSS editor is Dreamweaver’s ability to autocomplete class names from included style sheets.

    So, if you’re editing an HTML page with a stylesheet included, the autocompletion tool can complete classnames reference in the stylesheet. Pretty cool!

    -Andy

    0
  57. 58

    Nice collection!.. but notepad is handy always!!

    0
  58. 59

    @Matthijn Dijkstra… I use PHP Designer 2008 too, it’s great, but it doesn’t have auto-suggest for values in CSS as well as some other small things.

    0
  59. 60

    Nice smashing article :)

    what about Dreamwear? where does it stands as CSSEditor??

    0
  60. 61

    I’m trying out Stylizer at the moment, and I must say it is pretty impressive.

    Anyway, this is a nice list, thanks!

    0
  61. 62

    The newer versions of Dreamweaver has pretty good CSS integration. Why would I go to a program outside of my editor? Just seems like a waste of time, disk and screen space.

    0
  62. 63

    Very it is sorry that many requiring payment tools.
    It would be desirable selection of the alternative and free CSS-tools!!

    Очень жаль что много платных программ. Хотелось бы подборку альтернативных и бесплатных программ!!

    0
  63. 64

    Notepad is still the best. :)

    0
  64. 65

    I never thought I’d use CSS edit, but man, on big website projects or projects where you are coming in a working with someone else’s code it is a lifesaver. The interface is so great.

    0
  65. 66

    I use Dreamweaver for everything. Wether it is HTML, PHP, Javascript, CSS… In my opinion Dreamweaver is a great Editor also for CSS.

    0
  66. 67

    There’s also a decent css editor in MS Visual Studio.

    0
  67. 68

    I was working with MacRabbit CSSEdit but I went back to Dreamweaver. The Dreamweaver is for me more clear what I do. But when you don’t have a clue about CSS then the CSSEdit is a cool chois.

    0
  68. 69

    Martijn de Valk

    June 19, 2008 11:54 pm

    I’m using dreamweaver. I think there is no better editor then that.

    0
  69. 70

    Vitaly Friedman & Sven Lennartz

    June 19, 2008 11:54 pm

    @Coda-fans: Coda was already mentioned in our previous post: link.

    0
  70. 71

    CSS-Edit ftw!

    0
  71. 72

    I use Textmate and CssEdit…think that this is the best available

    0
  72. 73

    I’d echo the other comments about Dreamweaver. Part of the reason I use it is because it’s what I’ve always used, but whenever I’ve tried out other tools, like Notepad++, I’ve never found that they offer enough over Dreamweaver to make it worth switching. For me Dreamweaver is a great coding tool

    0
  73. 74

    Good review.

    btw. There is a bug in link to TopStyle website…

    0
  74. 75

    About the Firefox Extension EditCSS: It’s completely free ! Is there a confusion between CSSEdit and EditCSS ?

    For Firefox, there are 3 CSS editor extensions : EditCSS, Webdeveloper toolbar and CSSMate. In addition, Firebug and CSSViewer are useful. ANY of those extensions are free.

    0
  75. 76

    For me the best solution on Win is TopStyle 3.x on Mac i work whit Dreamwaver CS3

    0
  76. 77

    hello,

    which one for windows?

    I’m a php developer, not a designer.

    thx for your help

    Psyke

    0
  77. 78

    @rayeno GoLive n’est plus supportée par Adobe depuis avril, puis son moteur est intégré à Dreamweaver, donc je ne vois pas pourquoi combiner les éditeurs pour tous les langages du web quand Dreamweaver les supporte tous dans une seule interface.

    @rayeno GoLive is no longer supported by Adobe since April, and the engine is integrated in Dreamweaver, so I do not see why combine all the web laguages with multiple editors when Dreamweaver supports all in a single interface.

    0
  78. 79

    Nice list. Was looking for this a while back. But my main concern: why are all window apps so ugly?

    0
  79. 80

    I bought an early version of CSSEdit because it looked so nice, but then I found I wasn’t using it that much. So I relied heavily on Dreamweaver’s built-in CSS editing functions and that worked fine for years.

    But lately I’ve come back to CSSEdit to edit my CSS code used in my content management systems where external editing is much more effective. CSSEdit has a great interface and is specifically geared to best handle CSS editing and maintenance. It’s clear, friendly, organized and writes clean, optimal code. You have to expect that from a tool dedicated to that one specific task which CSSEdit performs in spades. Highly recommended for all beginner, intermediate and advanced coders.

    0
  80. 81

    I like to use CSSEdit on Mac.

    For the Windows, I use PSPad for both HTML and CSS development.

    0
  81. 82

    Aptana FTW! But then again that is an IDE. I agree with those above that say that overall a straight CSS editor is not really needed, just more more work on the back end.

    0
  82. 83

    i use WINE por emule Notepad++, and use gEdit, the father of notepad++

    0
  83. 84

    Rodrigo Teixeira

    June 20, 2008 10:23 am

    Great article!

    0
  84. 85

    Anthony Ettinger

    June 20, 2008 3:00 pm

    what’s a “CSS Editor” ?

    0
  85. 86

    Greg Vandagriff

    June 20, 2008 4:04 pm

    Another vote for the underrepresented Notepad++, by far the best choice for me, as it provides text highlighting and so forth for the various tags, which is all I need. Best of all, it’s free.

    0
  86. 87

    i love EditPlus.. ah…

    0
  87. 88

    Nice post,
    raftam ke “Rapid CSS Editor” ro download konam :D

    0
  88. 89

    Another vote for Notepad++ :)

    0
  89. 90

    No doubt! Topstyle Pro is the best!!!

    0
  90. 91

    Another vote for TopStyle Pro!!! Beautiful and efficient!!

    0
  91. 92

    Yes, TopStyle is great but there are still problems with the UTF-8 stuff… A nightmare for french accents such as “é”, “à”, etc.
    What a shame !

    0
  92. 93

    Great to see some nice comments about TopStyle here! STPo, a new version of TopStyle is in the works which supports UTF-8/Unicode.

    0
  93. 94

    Great article, I will have to explore CSS Editor!

    0
  94. 95

    Notepad++ is the one and only editor :) … and free :)

    0
  95. 96

    CODA is perfect tools for me ;)

    0
  96. 97

    thibault claisse

    June 22, 2008 10:06 am

    Does anybody use SciTE? Just the best for me…

    0
  97. 98

    POO POOS to Dreamweaver, that’s why it wasn’t included. It’s a bad tool if you are a pro you should need it…

    it does have some good stuff like site-wide find and replace and autocomplete class names.

    I have been using coda, and I haven;’t looked back. I hand write css anyway so it’s editor is great.

    Then I use Firefox+firebug to debug, and Safari, VMware and opera for testing.

    0
  98. 99

    POO POOS to Dreamweaver, that’s why it wasn’t included. It’s a bad tool if you are a pro you should not need it…

    it does have some good stuff like site-wide find and replace and autocomplete class names.

    I have been using coda, and I haven;’t looked back. I hand write css anyway so it’s editor is great.

    Then I use Firefox+firebug to debug, and Safari, VMware and opera for testing.

    0
    • 100

      I find it hard to believe that you’re a “pro”, considering the juvenile content and grammar of your post. You sound like one of those guys who claims to hate the Beatles, just because everyone else likes them. Dreamweaver is by far the best program out there for web creation.

      1
  99. 101

    Hinduismnet.com

    June 22, 2008 10:47 pm

    CSS editor, the good old Dreamweaver would suffice. I am looking for a good Javascript edtor with intellisense, Smashing magazine or the pros here can help me out with a tool. Preferably a free one.

    0
  100. 102

    Wow has anyone else out there given stylize a look? Im trying the trial version of ultimate and its amazing! Its like firebug on steroids!

    And I think Im more than willing to drop $70 once the trial is over and Im more familiar with all the features.

    Right now Im using Notepad++ and have always been a fan of straight up text editors but this is changing how I think about styling.

    0
  101. 103

    CSSEdit is great, the x-ray function really helps out when elements are deeply nested.

    Now how about a PHP editor review?

    0
  102. 104

    All editors sucks except of Komodo Edit! It’s multi-platform, totally free and very powerful.

    2
  103. 106

    I agree with the guy who lauded Vim. Which, incidentally, is available for every platform and comes with syntax coloring for just about every system of mark-up or code in the inhabited universe. You can shlepp your runtime control file with you on a USB stick and have your personalized Vim wherever you work.

    Solid knowledge plus a REAL text editor with syntax coloring and auto-balancing of delimiters will beat the click-a-di-doo-da apps hands down every time. Mark-up and language no object.

    You simply cannot overlook a missing semi-colon, quot or brace, when the subsequent portions of the source code following the instance switch to an ugly blaring shade of some really revolting color. Saved my bacon many a time.

    Admittedly, there is a bit of a learning curve involved with mastering any of the biggies such as Vim, emacs or even TextMate. Emacs is almost like an operating system… After a while, however, you will get hooked on the sheer raw power and speed.

    Some words on Dreamweaver:
    CSS from Dreamweaver is like HTML from FrontPage. Pure Bloat and Spaghetti! It should not be used in pro development and certainly not in situations where bandwidth may become an issue. Most times handrolling your CSS can reduce the size of your stylesheet by a minimum of 50%.

    0
  104. 107

    Jérôme Jaglale

    June 23, 2008 3:57 pm

    CSSEdit and Firebug together is what’s the most efficient to me.

    0
  105. 108

    Love CSSEdit, but it just lacks one thing – doesn’t allow editing markup.

    0
  106. 109

    I am missing PSPad! Ok, it’s not a “full” CSS-Editor but i use em for all my stuff!

    0
  107. 110

    I really miss the comparison in these kind of articles… Which one is SM’s choice???

    0
  108. 111

    Anybody know which Windows editor is most like MacRabbit CSSEdit? I need an editor that can extract stylesheets from an existing site which uses php, javascript and ajax? Has to have a real-time preview etc?

    1
  109. 112

    im use Gedit in all linux distribution with Gnome!!

    0
  110. 113

    I use TopStyle and have used it for a number of years. I find it to be the hands-down best CSS editor, and I’ve tried quite a few of them over the years. The clip library (code snippets) saves me a ton of work and time. The integration of Tidy has been invaluable when we’ve had to convert on old site full of deprecated code and lately, we’ve taken over a site built with Cold Fusion, and I was able to have Tidy strip out all the CF-specific code and leave clean, XHTML Strict pages ready to be put into .Net master pages.

    I can’t wait for TopStyle 4 to come out !

    0
  111. 114

    i like komodo edit…pretty powerful and free. normally use it in conjunction with firebug

    0
  112. 115

    I think I need to move to Mac :D

    0
  113. 116

    well, of course visual studio, web developer are one of the best most best software for css creation. but no one can compete dreamweaver yet because of its easy tools. I mean even if you are creating first professional css page, dreamweaver helps you alot. no matter you are working in page. just by changing propertise of item or box in deesign page you can change css. which shows its quite easy and simple to use. if one one of you guys don’t use it or not aware about it well then try it. because it also give you drop easy down menu option which helps you alot to find your exact need. but if you are profeesional and need to work on form system or user or login panel pages system, then after having strong grip on css by using dreamweaver,it will be lot of easy for you to migrate or handle both of software such as visual web developer. which is quite essential for web developers nowadays. saadirfan.com

    0
  114. 117

    Very Useful Article…

    0
  115. 118

    Not very useful article.. :-(

    What I really DON’T like about these articles is that they are basically just at list of programs and features. Where are the conclusion?
    I would really LOVE to read a last section called conclusion, which should go something like:

    In conclusion: If you are on a Mac and want easy WYSIWYG then you should check out xxx and yyy. For the power user who want’s more features like e.g. macro, you should turn to zzzz. On Win platform, we believe your best bet is to go with xxx…

    3
  116. 119

    I vote for Coda, it just the best CSS editor out there.

    0
  117. 120

    only one mention for Visual Web?? bah. VWD is free and very powerful especially for .net, also has good formatting capabilities for CSS… coudln’t live without it and I am a Mac man!

    0
  118. 121

    Joachim Bengtsson

    August 1, 2008 11:44 am

    TextMate + CSSEdit for the win, seriously. CSSEdit’s live preview is just so good, and the UI is perfect.

    Coda’s CSS editor is just a quick hack trying to copy CSSEdit and failing.

    (As for the article: Where’s the conclusion? The ratings? At least give us a very rough approximate for what you think of the overall feel of the app.)

    0
  119. 122
  120. 123

    why Xyle didn’t provide the software in windows based?

    0
  121. 124

    I agree. till today notepad++ is the most light weighted and best editor

    0
  122. 125

    Thanks for taking time to write this up. But with all the great info, it would be even greater to see an editor’s choice and or TOP PICKS…

    0
  123. 126

    CSSedit for the Mac is Far and away the fastest and easiest way to code css.

    0
  124. 127

    Notepad2 and notepad++ arent the best way to work….. designers are like the last hold out when it comes to actually using tools to do things faster. And at worst take it as a point of pride.

    As a developer the increase in quality and timesavings by using good tools makes doing it in a text editor redundant.

    0
  125. 128

    Very interesting article, i bookmarked your blog
    Best regards

    0
  126. 129

    As a beginner I would say Dreamweaver has the best style editor if you can afford it. At the cheaper end, Stylemaster has menu driven facilities for CSS properties, and changes can be viewed instantly in the preview window. A bargain.

    0
  127. 130

    all same css rocks ;)

    I prefer dreamweaver I enjoy much with it.

    1
  128. 131

    Stylizer was truely the best one that i came across amongst all the others,(well, all others being dreamweaver and notepad!!) the live editing feature made it a breeze creating the css, especially since i have been developing for wordpress from photoshop, and the real hustle really is getting the photoshop part and the wordpress bit done,(the wordpress part can make you bang ur head on a wall, especially if you are a copy-paste maestro like me!!)

    0
  129. 132

    yes,I am using topstyle now,not bad,but maybe also can check the other tools.

    0
  130. 133

    My All time favorite is top style. Didn’t get to use the MAC editors yet.

    0
  131. 134

    Agree with @anna Expression Web has a great css editor, kinda shocked it’s evolved into such a great front end developers application.

    0
  132. 135

    I use either Notepad++ or TopStyle Pro 3.

    The author did the right thing by just listing some of the choices available to us instead of actually inputting his opinion about these choices. Everyone has their own preferences and ways of working so we need to make our own choice about which editor to use, be it Notepad or some sophisticated editor, based upon our own preferences etc instead of relying on a stranger’s opinion about which editors are the best.

    0
  133. 136

    Notepad++ is the one and only editor :) … and free :)

    0
  134. 137

    interesting post, will come back here, bookmarked your site

    0
  135. 138

    I must say that Stylizer is an awsome tool. That kind of approach for creating and changing stylesheets in real time without having to write code is the future. Have been trying it out for some days and what took some time to do now only takes a few minutes. If only Dreamweaver had this kind of tool…

    0
  136. 139

    I use html-kit with the bsStyle plugin from wwwDOTchamiDOTcom. It works well for me. I just can’t wait for css3 to be fully implemented by all the top browsers. Yeah, they’re still working on css2 implementation, so I won’t hold my breath.

    0
  137. 140

    I only vote for Dreamweaver because of familiarity (using it since 4 UltraDev). Otherwise I use Gedit or Netbeans on my *NIX boxen.

    0
  138. 141

    No, notepad sucks!
    you have no completion, jump-to-selector, FTP sync, project management or multi-row search & replace. And yes, it need that. I don´t want to upload every file by hand, when I have to work remote.

    I try to find a slim alternative to dreamweaver, but its the best for me. I just need a “selector jump” (ALT + click on a selector and jump directly into the css-file), FTP sync and multi-row search & replace.

    Its a shame, none of the masses of tried tools have all this simple features. One ray of hope is jEdit. With the masses of plugins it is a good editor for every sort of needs.

    0
  139. 142

    Dreamweaver is an excellent tool for people who work primarily on the front end of websites. It makes writing CSS a breeze. I don’t agree with a previous poster’s statement that Dreamweaver’s CSS is anything like FrontPage’s HTML. It is as good as the person writing the code and you don’t have to blindly accept DW’s suggestions, which tend to lead to verbose margin, padding and background CSS. Outstanding code completion and coloring, as well as tight integration with the HTML document it’s included in, make it a pleasure to use. This coming from someone who primarily works in Drupal and rarely uses DW’s WYSIWYG features.

    I encourage people to pause before issuing a blanket statement about a particular method or tool. It’s not the tool that matters, it’s the coder who uses it.

    1
  140. 143

    Ultradev…wow have not heard this in a long time :)…back when MM_ stuff actually worked.
    Now my vote goes to WeBuilder http://www.blumentals.net/webuilder/

    0
  141. 144

    wow, I used to use coffeecup asa basic html editor back in the day, then i wised up and got myself dreamweaver for css and html editing, i tend to use liquid-technologies.com xml editor for detailed xml work, i find it’s a good enough compromise.

    0
  142. 145

    Try Chilli Css Editor : http://csseditor.in/

    1
  143. 146

    I use bluePen Editor ( http://bluepeneditor.com ) for a while.. I’m quite satisfied with it despite the fact, that it is in beta version.

    0
  144. 147
  145. 148

    I suggest to review also free HTML/CSS/PHP Editor – Codelobster PHP Edition -
    It works great for me.

    0
  146. 149

    To put this into laymen terms, HTML determines the structure and meaning of content on a web page while CSS determines the style and appearance of this content. The two languages are independent of one another. CSS should not reside within an HTML document and vice versa.
    handycss.com/tutorials/css-syntax-for-newbies/

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top