Top CSS-Editors

    • 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.
  • 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 somereally 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.


    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.

    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.


    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.


    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.

    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.


    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.


    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.


    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.

    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.


    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.



    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.


    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.


    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.


You may also like...