Css Editors

From CSS Discuss

Jump to: navigation, search

One can use a regular text editor (including Windows Notepad or Apple's Text Edit ) to edit CSS files as they're just plain text. This page gives an overview of both general text editors that have some features (minimal syntax highlighting) that make them attractive for CSS editing, as well as more specialized tools.

Contents

Recommended text editors

Some recommendations for text editors that include special capabilities for CSS are, sorted by Operating System, in alphabetical order:

Windows

  • Context (Win) - Freeware - Syntax Highlighting Plug-Ins for over 200 languages (you choose which ones to install and enable) plus translations to languages besides English. Small (1.5 MB) and very fast. Supports saving to *ix format (LF only) as well as DOS/Windows (CR/LF). Too many features to list them all.
  • Crimson Editor (Win) - Crimson Editor is a professional source code editor for Windows. Development had seemingly stalled by 2006 with the source code having since been released. - Freeware
  • Edit Plus (Win)- A shareware editor for Windows. Features supporting many languages. Includes intelligent syntax highlighting and a FTP client among many other features.
  • Emerald Editor (Win) - Emerald Editor is (being) designed to be an open-source multi-purpose, functional text editor, heavily inspired by Crimson Editor.
  • TSW Web Coder (Win) - Web Coder offers you extensive support for XHTML and CSS. The CSS tree creates an overview of an entire Style Sheet document. The Code Inspector allows you to edit both (X)HTML and CSS code using just the mouse. And with the CSS preview, it can't get much easier. You don't really need an external CSS editor (like Top Style ) anymore, since a lot of the same functionality is already in Web Coder ! When you want to validate your work, Web Coder has integrated online validation of both (X)HTML and CSS documents through the W3.org validators. The results are displayed directly in Web Coder .
  • HTMLKiT (Win)- Freeware syntax highlighting editor for HTML, CSS, PHP, ASP, and other languages, also FTP support. Has an extensive range of 3rd party add-ins.
  • Notepad2 (Win) - Simpe to use "upgrade" of Notepad. Supports syntax-highlighing for a variety of languages, including CSS and HTML, fully customizable and easy to change preferences. Lighweight and fast to load. Standalone application. < 1MB in size.
  • Notepad++ (Win) - Simple, opensource notepad replacement with syntax highlighting for many popular languages, including CSS, HTML and Java Script . ~1MB in size
  • Note Tab (Win) freeware and shareware versions, similar to Edit Plus with more robust clips for both HTML4 and CSS1. There's also a variety of active support lists for beginners to advanced users for help with the program, clip programming, HTML and CSS. Also integrates with Top Style for easy CSS editing in Top Style .
  • PSPad (Win) - The universal freeware editor. Great tool whether you work with plain text (editor has a wealth of formatting functions, including a spell checker), you create web pages (as web authoring editor PSPad contains many unique tools to save your time) or you use it as an IDE for you compiler (editor PSPad catch and parse compiler output, integrate external help files, compare versions) and much more...
  • Site Pad Pro (Win32) - Scriptable Editor supports HTML, XHTML, XML, CSS, C#, C/C++, JSP, PHP, ASP, Java Script , Java, VBScript, XML, FTP, Spellchecker, Template-based Generation, Project support, more...
  • Style Master (Mac / Win) - Shareware - Powerful, dedicated CSS editor with a plethora of CSS editing and troubleshooting tools.
  • Text Pad (Win)- Shareware editor for Windows. Supports syntax highlighting lots of languages. Spell checking included.
  • Ultra Edit (Win)- Syntax highlighting editor for diverse programming languages; includes FTP client for quickly editing and saving and Spellchecker
  • Zeus for Windows - A powerful programmer's editor designed for Windows developers. Highly configurable and packed full of features.

Mac

  • CSSEdit - "Staff Pic" at Apple's downloads website. Intuitive graphical interface along with direct code manipulation. Live preview. CSS specific.
  • BBEdit (Mac)- A very popular commercial Mac text editor providing CSS syntax highlighting as well as dialogues for editing the most commonly used CSS properties. Also offers CSS formatting options and a host of other modern perks, like built-in S/FTP, rectangular selection, etc. Provides real time preview courtesy of Safari/ Web Kit which can be trivially integrated with any "live" server. Some say it's expensive at $199, but time is money, and it will code faster. Bare Bones also makes Text Wrangler, the free "little brother" to BBEdit. Text Wrangler does not provide all the sexy code-editing assistance that BBEdit does, but it does provide syntax coloring and more.
  • Page Spinner (Mac)- Mac OS text editor that supports HTML 3.2 and 4, XHTML, PHP and customizable syntax color-coding of Javascript, PHP, and CSS.
  • Style Master (Mac / Win) - Shareware - Powerful, dedicated CSS editor with a plethora of CSS editing and troubleshooting tools.
  • Web Design (Mac) - Highly extensible Mac HTML Editor supports XHTML, CSS, PHP, ASP, Java Script , VBScript, XML, more...
  • Sk Edit (Mac)- a Mac OSX app that supports hints and ftp
  • Sub Etha Edit (MacOSX) - A lean, mean editing machine with many syntax descriptions. You can share documents via Rendezvous.
  • Smultron - Smultron is a free text editor for Mac OS X 10.4 Tiger which is both easy to use and powerful. Some of its features are tabs, line numbers, support for syntax colouring for many different languages, functions list, support for text encodings, snippets, a toolbar, a status bar, preview, split window, multi-document find and replace with regular expressions, possibility to show invisible characters, authenticated open and saves, command-line utility, full screen editing and running commands and scripts from within the application.
  • Text Mate - A very powerful Text Editor with customizable "bundles" of snippets and tag triggers which makes for streamlined authoring. Works with HTML, CSS, Java Script , as well as more sophisticated programming languages not of interest to most web designers. Other features include foldable code blocks, search and replace throughout project, clipboard history, recordable macros, theme-able syntax highlight colors, among others.

Linux/Unix

  • Bluefish (Linux/Unix) Free editor designed for web development, with solid built-in support for CSS including syntax highlighting and a full CSS2 reference.
  • Quanta+ ('nix) Quanta Plus is a web development tool for the K Desktop Environment. Quanta is designed for quick web development and is rapidly becoming a mature editor with a number of great features, including but not limited to css editing. Quanta is a markup and scripting language IDE that strives to be DTD agnostic, supporting web based markup and scripting languages.

Multi platform

  • Eclipse WTP (Multiplatform) - THE Open Source IDE, the Web Tools Project extends support for many markup languages, Java Script and CSS.
  • Komodo Edit (Windows, Mac, Linux) A powerful open source programmer's editor based on Komodo IDE. Supports PHP, Python, Ruby, Perl and Tcl, plus Java Script , CSS, HTML and template languages like RHTML, Template-Toolkit, HTML-Smarty and Django.
  • Emacs (Unix, Win, Amiga, Mac and others). Use CSS-mode
  • jEdit (Java)- Syntax highlightling for most languages, tag completion for HTML, realtime XML validation with the XML plugin, intelligent indenting, sophisticated global search and replace, unicode support. Cross platform (its written in Java) with support for plugins (many plugins are available).
  • Nedit (X Window on *nix including Mac OS X, MAC OS2 & MS Windows with Cygwin) - Very powerful and simple to use editor, support a lot of languages for syntax highlighting including CSS, full featured search / replace, support for regexp - useful for professional coders and newbies as well.
  • SciTE (Win32, X) - Free and open source with BSD-style license. Syntax highlighting with support for CSS, HTML, Java Script , Perl, PHP, etc. One key preview in most browsers. One key context-sensitive help. Tabbed edit windows for working with multiple documents. Most features available out-of-the-box; some features require editing of configuration files.
  • Vim (Unix, Win, Amiga, Mac and others) - "Vim is a highly configurable text editor built to enable efficient text editing. It is an improved version of the vi editor distributed with most UNIX systems".
  • Site Grinder 2 (Win32, OS X) - Site Grinder 2 is a Photoshop plug-in that converts Photoshop designs to working web sites. All output is valid XHTML 1.1 and CSS, no tables or slicing, it supports the conversion of Photoshop styled text to styled HTML text (as well as CSS-only buttons with rollovers, hierarchical menus, forms, etc.). While not a CSS editor, per se, it's a handy tool for going from a Photoshop design to another tool like Dream Weaver . The base output is absolutely positioned, though it does support vertically expanding documents as well as various background tiling options (for faux-columns, infinitely wide headers, etc.). Also, it never duplicates graphics, whether they appear multiple times on one page or across different pages, a pleasant optimization. It's a nice time saver.
  • IntelliJ IDEA (Java) - Commercial Java IDE but it also has extensive support for HTML, CSS, Java Script , XML (syntax and error highlighting, code completion, find usages, refactorings, formatting, validation, go to declaration navigation).
  • Aptana Studio - Open Source IDE for Today's Web offering integrated language support for HTML, DOM, Java Script and CSS, embedded development platforms and databases for PHP, Jaxer, Ruby on Rails, and Python. Plus support for emerging platforms that use Ajax like Adobe AIR and Apple iPhone. Aptana Studio is free, open source software based on the Eclipse tools platform
  • Zend - Zend is a commercial IDE with support for developing modern Ajax applications. By providing powerful PHP capabilities, improved Java Script support, deep integration to Zend Framework and the Dojo Ajax, application development gets done in record time. Zend and Adobe are collaborating to simplify development of RIAs using Flex by integrating Action Message Format (AMF) into Zend Framework. Since Zend Studio and Adobe Flex Builder both use Eclipse the developer has a powerful set of capabilities with a unified user experience.

If something of your taste is not around here, you might want to check out: All My Faqs: HTML Editors

Dedicated CSS editors

Another option is to use a editor designed specially for CSS. These generally include functions targeted especially towards Css editing, eg. real-time previews and css validation:

  • Stylizer CSS editor Stylizer is a futuristic visual CSS editor with a highly refined interface. It has some unique features, such as real-time preview, Bullseye (a replacement for Firebug), and a very nice real-time color manipulation model.
  • PHP Freedomeditor CSS-editor html/CSS-Editor in webbrowser, written in PHP and Javascript. Freedomeditor is a web-gui for editing all kinds of text documents with optional source highlighting or TINYMCE, can be easily modified to load input in unique ways for unique mime types, can convert a (x)html document with inline style tags to a (x)html document loading a generated css file, having the style tags removed from the (x)html. You create a template with Freedomeditor's Tinymce integration and freedomeditor can remove TINYMCE's inline style tags, save them to a css file, autoload that file on further HTML editing, Easy customizable GUI. Ever wanted to write CSS in your native language? Web CLI (phpterminal) and file browser included, Joomla password reset script and virtuemart batch stock updater, edit file in text format, syntax highlighting, + many more features. You can modify all aspects of freedomeditor from within freedomeditor. Reverse engineering at its best. GPL Licensed.
  • <oXygen/> CSS Editor (Win, Mac, Linux, Unix) allows you to edit and validate the CSS files. Different CSS profiles are supported like CSS2, CSS3, etc. and different media types like Braille or screen for instance. You can also choose the verbosity level of the validation warnings. The content completion provides property values associated with the property name. All the property names are annotated with descriptions from the CSS specification.
  • CSSEdit (Mac) - Shareware - Fast, dedicated CSS editor for Mac OS X with code completion, preview, visual property editors, and a beautiful interface. http://www.colour-crash.com/wallpaper/ Great Wall Site
  • CSSED (Unix, Linux), very nice CSS-(only)-Editor, with syntax highlighting, CSS-validation
  • Style Master (Mac, Win)- CSS editor for Windows and Mac featuring editors for all aspects of CSS alongside a complete set of tools for hand coding. Built in browser support and CSS info and internal previewing.
  • Top Style (Win)- A shareware CSS and HTML editor by the creator of Home Site , with validation, code completion, selectable css profiles and many other tools.
  • Expression Web (Win) Questions? Very complete. Works CSS with other code systems like Java Script , PHP, etc.); few templates, tons of functionality. Add-ins friendly - e.g., Product Details .asp?CouponID=z2fsad&PID=152 CSS Sculptor. As you work validation, accessibility and compatibility details. No specificity display for CSS elements and selectors yet, but CSS designers can trial and error in a very basic built-in preview substitute along with multiple browsers (any you select) in a built-in IIS7 shell. Rock solid tool. http://www.planet-wallpaper.com/
  • iStylr (Web based), very nice CSS-Editor, with syntax highlighting, image generators for backgrounds and export options for different cms and blogs.
  • SnapCSS (Windows only), very simple CSS-Editor, with code formatting and collapsing so you can easily shrink the file for faster downloads and to save bandwidth, then beautify it so you can easily edit it.
Personal tools