Pin Me

Top 7 CSS Layout Editors

written by: Daniel Robson•edited by: Amber Neely•updated: 8/7/2010

Integrated Development Environments are common for languages like C++ and Java, but when it comes to HTML and CSS it often feels like you are limited to notepad or Dreamweaver. However if you want something a little more useful and a little less bloated, here are a profusion of free CSS editors.

  • slide 1 of 7


    Rating Average

    CSSED - Free, Open Source CSS Layout Editor A superb open source CSS editor, CSSED is released under the GNU general public license. The source code is freely available, and so can be built on any system including Linux and Windows. The editor itself is primarily code based and supports the kind of features you'd expect from a fully established integrated development environment, including code folding and auto-complete functionality. Interestingly it also includes a built-in validator, which is ideal if you need to ensure your code conforms to the CSS standards.

  • slide 2 of 7


    Rating Average

    Coda - Mac Based Web IDE Coda is a one-window development environment for web based design. Exclusive to Mac computers, it provides built-in terminal, FTP, text editing and web preview functions. As well as this it has a fully functional CSS layout editor, which can be used in either text or visual mode. The editor itself is one of the slickest I've seen, and the ability to swap between the two modes makes it ideal for someone who wants to learn more about CSS coding.

  • slide 3 of 7

    Simple CSS

    Rating Average

    Simple CSS Layout Editor Simple CSS is a GUI based layout editor which allows you to quickly and easily create and modify CSS styles. Capable of running on both Windows and Mac, Simple CSS can import and edit existing CSS documents. This means it's ideal for a beginner who needs to make a quick change to an existing style without knowing about the actual code involved.

  • slide 4 of 7

    JustStyle CSS Editor

    Rating Average

    JustStyle CSS Development Environment As a specialized development environment for cascading style sheets JustStyle has the advantage of pin-point focus. The built in Site Manager functionality makes deploying stylesheets a snap, and as it's written in Java JustStyle can be run on practically any platform.

  • slide 5 of 7

    CSS Layout Generator

    Rating Average

    CSS Layout Generator Although not strictly a CSS editor, the CSS layout generator provided by CSS portal is of particular interest to people just dipping their toes into the waters of cascading style sheets. It allows you to quickly and easily build the skeleton of a CSS layout, which can then be imported into many of the other programs on this list and expanded on. Ideal for someone who wants to rapidly prototype a new website with a CSS based design.

  • slide 6 of 7

    AStyle CSS Editor

    Rating Average

    AStyle CSS Layout Editor For those who don't have the time or inclination to create their own CSS code the AStyle CSS layout editor might be the way to go. This free editor uses a simple GUI which can be used to create complex CSS layouts by dragging and dropping components. It also has the advantage of very low system requirements.

  • slide 7 of 7


    Rating Average

    notepad++ Syntax Highlighter NotePad++ is a free, windows based syntax highlighter which is designed primarily to replace the built-in notepad application. I personally use it for most of my web development work, although I accept it isn't a CSS layout editor per-se. However useful plugins, especially TextFX, and the wide range of supported languages makes it an extremely useful development environment.