But why do we need CSS Editor? Every glorious revolution has its dark side, as for CSS is every web browser like IE7 does not support the same effect defined by CSS, so often designer has to squeeze their mind to figure out a trick, hack or fix, that’s when CSS Editor comes in to help.
CSS Editor helps you to either understand how certain CSS value works by its WYSIWYG editor, or provide you an inspector to check out what’s exactly the cause for your CSS error, or probably guiding you to decide what CSS property you should use. And in this post, we’re going to review every useful CSS editor that you can get in the web.
Meanwhile, here are more CSS related post:
1. Stylizer
Compatibility: WindowsStylizer is an absolutely unique CSS editor that focuses on real-time CSS editing. You can just enter a web address into its built-in browser that supports Firefox 3.5 and IE7’s style definition, and it would have all related CSS rules loaded for you to edit with its familiar point-and-click interface.
Notable Feature: Code Grid, Size Grips, Bullseye, Two-click Coloring
The editor comes with a Code Grid feature that makes your CSS editing more convenient as you can view the result immediately after you changed a value. Also with its diagnostic Bullseye feature, you can view associated elements at certain part of the site and edit it with points and clicks. Other features like Size Grips allows you to visually adjust the position of a CSS element, and with Two-click Coloring feature you’re granted a Photoshop-like color picker to choose any color for, let’s say, your site font. Oh, did I mention that all these edits are done in real-time, immediately viewable result?
With Stylizer it’s merely impossible to make a CSS mistake as it would restrict you to put any value that’s not compatible with the corresponding CSS property. However the software would fail to load certain CSS file sometimes, due to its unexplained critical error.
Stylizer comes with Basic and Ultimate version. While Basic version is totally free, the Ultimate version is available to you for 14 days after the installation, then it offers $85 for you to continue using its advanced features like Bullseye.
2. TopStyle
Compatibility: WindowsTopStyle CSS editor starts to amaze you by its first time configuration, when you can choose a style definition that shows only properties and values supported by either Firefox, Internet Explorer, Safari, or even iPhone OS 2.0, which is practically useful for cross-platform web designer.
Notable Feature: Style Inspector, Style Sweeper, CSS Tidy
Among all features I found Style Inspector is especially useful, as it works as a panel to let you include any CSS property with simple point-and-click interface. When you finished choosing all CSS properties you want, the source code would be automatically generated for you to save your time from repetitive and tiring coding.
One another good stuff about TopStyle is it shows browser compatibility underneath its style inspector, which you can see either the CSS property is fully supported by certain version of web browser like Internet Explorer 7, or it’s terribly buggy.
The editor comes as a trial version with limited feature, and you can unlock its full potential by $79.95.
3. Style Master
Compatibility: Windows, Mac OS XClaimed itself as a master, Style Master did pretty well to create a CSS editing environment for any level of expertise. The software not only provides WYSIWYG editor that smoothens the workflow for CSS beginner, but also grant you the access to the very detailed information about every CSS property for expert to refer. You can browse and choose CSS properties by either category or alphabetical order.
Notable Feature: Stylesheet Template
Perhaps the most unique point is the editor itself contains almost 20 useful stylesheet templates for you to start with, and not surprising for a style master to have very clean, well-arranged and professional CSS rules defined in its built-in template.
You can enjoy the fully-featured software for 30 days, and pay either $59.99 or $29.99 for education license to open up its full potential again.
4. Xyle Scope
Compatibility: MacXyle Scope is a must-have free CSS editor for Mac, as it’s a truly professional CSS editor that allows you to surf website while fine-tune its CSS directly inside the editor.
Notable Feature: Selection Mode, Smart Group, Text Editor Integration
Xyle’s browser comes with normal browser mode and selection mode which works pretty similar like Firefox plugin, Firebug that provides the CSS source viewing and editing, except that the editor allows you to save modified CSS values in their original location.
Using the ‘Smart Group‘ feature, you are able to filter out all rules influencing the way in which links are shown or those responsible for the layout, you can even narrow the result with its built-in search function, no more trial-and-error method!
Xyle Scope also offer integration with external text editors like BBEdit for more convenient and energy-saving coding work, just do a change and either the text editor or Xyle Scope would update all changes automatically for you.
5. Rapid CSS
Compatibility: WindowsRapid CSS is the way for more comfortable, convenient and complex CSS editing. It has its own fully customizable text editor with helpful features like syntax highlighting, code completion and built-in CSS reference for painless coding experience.
Notable Feature: Syntax Highlighter, Code Completion, CSS Formatting
Caring about your CSS’ cleanliness, you can format your CSS stylesheet, like rearrange them by CSS type or create shorthand properties to make the stylesheet looks more comfortable and sweet. The built-in code validator also ensure your stylesheet’s not only clean but valid.
The editor comes with 30 days evaluation period with 30 uses, you can go for full version by $29.85.
6. Style Studio
Compatibility: WindowsThe main beauty of Style Studio lies within its CSS Wizard feature, which works to provide you immediate CSS effect with few points and clicks.
Notable Feature: CSS Wizard, IntelliStyle
For example, you can select a font wizard, then choose a font family and set a font size for it, then font style, weight, variant…and boom! Rules are inserted into the stylesheet as a fully-validated CSS code.
Wizard feature also include color, border, text, positioning, classification and finally filter rules, just almost everything you can think of CSS. These wizards are pretty useful as you don’t need to type repeatedly to achieve certain complicated CSS effect. Another noble feature is IntelliStyle, which functions like code completion for you to choose certain CSS properties for your design purpose.
The downside of this editor would be its outdated browser’s style definition support, as it only support up to IE6 and, well, no Firefox.
You’re granted 30 days to enjoy the software and $49.99 to purchase it.
7. CSSEdit
Compatibility: MacDesign beautiful, innovative and fast-loading web sites with a beautiful, innovative and fast app, that’s CSSEdit by MacRabbit. From features like Selector Builder until intelligent source environment, CSSEdit is designed for any level of expertise.
Notable Feature: X-ray Inspector, Visual Editor, Selector Builder
With the highly polished editor like this, you’re expected to see changes to your CSS stylesheet appeared in real-time, without tiring upload-refresh action. X-ray inspector is also created as a feature to diagnose CSS code from specific part of the site.
The innovative part of the CSSEdit is probably its Selector Builder that lets you describe your CSS style with plain English, not much interest for an expert but useful for absolute beginner.
Demo version restricts you to save file with fewer than 2500 characters, while you can pay $39.95 to wipe out all restriction.
8. EngInSite CSS Editor
Compatibility: WindowsIf you are a serious designer who cares about correct CSS specification, right CSS placement, or your CSS stylesheet must be fully-validated, then EngInSite CSS editor can be your favorite editor.
Notable Feature: Measurement tool in Preview Mode
In this editor, you can add class, id, and element selector with the help of its built-in inspector, also you can convert the color to either Hex or RGB value, which is a very rare feature for a CSS editor. You can observe your result in the preview panel with measurement tools to ensure that your every design element is on the right position.
The editor also come with code completion but it’s little bit buggy, so I would say it’s semi code completion. Otherwise the entire editor is nice to use, except the very fact that the editor is quite outdated in term of browser’s style defnition support, as it only supports up to IE6’s style definition.
9. Stylesheet Maker
Compatibility: WindowsStylesheet Maker is yet another standard CSS editor that offers a clean coding surface with file explorer panel, and some useful CSS tools to help setting font, color, margin, border, etc.
Notable Feature: CSS Tags
Compared to several CSS editors like Rapid CSS or Style Studio, Maker has less feature yet very clean interface, and this is good for certain beginner who don’t want to get things complicated, or CSS ninja who wants everything minimal and comfortable.
Although this editor is designed for intermediate user, its CSS Tags feature can help you to simply create a CSS rule with tags by clicks.
It costs $34 to own this editor, or you can buy it with other CoffeeCup software as a bundle purchase.
10. Arduo CSS
Compatibility: WindowsArduo CSS is a new born CSS editor which aims to please you with its intuitive and easy-to-use interface. With its clean interface and syntax highlighting, you are guaranteed to create and edit a CSS file without too much trouble and interruption. Also you can use its ‘Node’ feature to define CSS rules by points and clicks.
Notable Feature: Node, CSSTidy
For those who feel your stylesheet is way too heavy, the CSSTidy tool from the editor can help you to optimize the stylesheet and wipe out all unnecessary code.
The editor is freely available on its official site.
11. Simple CSS
Compatibility: Windows, Mac OS XJust as its name, Simple CSS has everything that a designer needs for simple CSS editing. You can import a CSS file into the editor and modify it with few clicks, check out the result in its preview panel, and take out the source code right away.
Notable Feature: CSS file import, Point-and-click interface, Additional font database
Although you can import almost every CSS file into the editor, you can only view 1 CSS rule at once with a click, and sometimes your import would cause error due to its limitation like no @rules support. Also the editor itself is not so flexible like you can only select ‘Auto’ or ‘Inherit’ for z-index property, but not directly give the property a value.
Nonetheless, it’s free and pretty handy for designer who needs a quick fix.
Bonus: More Editors and Tools
While they are not exactly CSS editors, these following tools are something you might want to have when it comes to editing CSS.Firebug
The most popular and powerful web development tool which inspects HTML, modify CSS style and see the changes in real-time, available as a plugin for Firefox web browser.
CSS Usage
An extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.
Web Developer
A Firefox extension for you to do a lot of cool things like view CSS sources or disable certain CSS stylesheet for design or development use.
Notepad++
A free source code editor and Notepad replacement that supports several languages including CSS. Contains features like Function Completion to help building your CSS design.Coda
An advanced text editor with built-in CSS editor that provides you two CSS editing mode for more flexible designing experience, able to see the result instantly after changes made.
NetBeans IDE
An open-source and professional Integrated Development Environment with the most complete CSS reference in its code completion feature.Aptana Studio
A complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, currently supports up to HTML5 and CSS3.WebStorm
JetBrain’s IDE that implements relevant auto completion for everything including CSS, also you can get notified about CSS problems on the fly.
