Writing CSS doesn't require anything more than a text editor.
If you're comfortable with the rules and syntax of CSS, you could just use
programs like Notepad or TextEdit, write your styles, and save the documents
with a .css extension.
Although some designers are quite content to do just that, most designers
are looking for software that makes the job of writing and editing CSS a little easier.
CSS editors come in many different varieties, from bare-bones editors
dedicated to CSS, to fully featured web development applications with CSS
editing capabilities.
What's right for one designer might not be right for another,
so before you commit to a single editor, you should consider what type
of features you're looking for and find an editor that matches your personal workflow.
With that in mind, I want to give you a sample of some of the types of editors
available to you and the features that they offer.
Use this as a starting point for researching and finding the editor that's right for you.
I want to start by going over some of the more basic CSS editors.
Many of these are free, and they tend to be used by developers who are more
focused on hand coding sites with minimal intrusion by the software.
If you're looking for something basic but with a bit more functionality than
your everyday text editor, try Notepad++ for Windows or TextMate for the Mac.
Both of these are more focused on writing code and offer support for CSS.
TextMate comes with support for over fifty languages, including CSS baked in, while
Notepad++ has a plug-in designed to offer support for HTML and CSS.
You can find Notepad++ at notepad-plus-plus.org.
You can find TextMate at macromates.com.
Snapcss is an open-source, no-frills CSS editor aimed at those that prefer to
code with little or no distractions.
Its feature set is extremely limited by design, and its focus is entirely on the code itself.
You can find it at www.improvingcode.com/snapcss.
BBEdit is a simple code editor built for the Mac.
Code snippets, code completion, and code support for over twenty languages makes
BBEdit a logical choice for a web designer that needs to work heavily in code or
switch between scripting languages.
Unfortunately, it's Mac only.
You can find it at barebones.com/products/bbedit.
There are also several CSS editors that focus almost entirely on CSS but have a
bigger feature set than the previous set of tools. Let's take a look.
Rapid CSS is a feature-rich editor for creating CSS.
It has tools for both designers who prefer to write styles manually or those
that prefer to let the software write the code for them.
It features support for both HTML and CSS3, has a preview functionality to let
you test your code, and has a built-in FTP client for uploading and downloading files.
You can find out more about it at blumentals.net/rapidcss.
Simple CSS is just that,
a simple editor for CSS files.
You can create new projects or edit existing files, and creating and editing
rules are done through simple and clear dialog boxes.
Although it isn't as feature rich as some of the other tools, it is free, and
it's very easy to use.
You can find out more about it at hostm.com/css.
cssedit is a powerful CSS editor for the Mac.
It comes with live preview, an x-ray inspector that allows you to quickly
identify which elements belong to which styles, style editing through a
visual editor or a code editor depending upon your personal preference, and
helpful debugging tools.
One of the tools I really like is the ability to group styles in the visual editor.
This allows you to quickly find styles for navigation tabs or other groups,
rather than scrolling through your style sheet to locate them.
You can find out more about it at macrabbit.com/cssedit.
Style Master by Western Civ is a full-featured CSS editor for both the Mac and the PC.
In addition to features like Live Preview and a powerful code editor, it comes
with pre-built templates, integration with blogs, and popular CMSes, and powerful
wizards for rapidly building styles.
You can find out more about it at westciv.com/style_master.
Stylizer is one of my favorite CSS editors.
It comes with built-in previews from nine integrated browsers, neat tools like
their bull's-eye feature that allows you to target an element on the page and
quickly edit the styles relating to it, and an editor that allows you to edit
the code directly while still giving you WYSIWYG-like editing tools.
You can find out more about Stylizer at skybound.ca.
Of course, you might also be looking for a CSS editor that is part of a
larger development suite. Let's face it,
you'll probably be authoring more than just CSS.
Here are some of the more popular all-in-one web development suites.
CoffeeCup software's HTML editor is another clean and standards-compliant HTML
and CSS editor that is packed full of powerful features.
Code validation, multi-browser testing support, code completion, code snippets,
and site management tools make this a very powerful web-authoring tool.
In addition to the HTML editor, CoffeeCup offers separate programs for specific
tasks like e-commerce and form building.
As such, if you find you need more functionality, you can often add it through
another one of their applications.
You can find it at www.coffeecup.com.
Coda is a very popular and powerful web design program that's released on the Mac only.
Coda offers two ways to edit your CSS files, either visually or through hand coding.
It will even let you split windows out and use both modes at the same time.
Coda also has an integrated WebKit Preview pane that lets you see just how your
styles are going to render.
In addition to CSS, Coda features an impressive array of web development tools,
such as a terminal window, JavaScript consoles, and a live collaboration feature
that helps remote teams work together on projects.
Learn more about it at panic.com/coda.
Last but not least is Adobe's Dreamweaver.
Dreamweaver is recognized by many as being the industry standard tool for web development,
and for good reason. Its integration with other Adobe tools makes it easier
to create and share assets, and its feature list is far too large for me to list here.
As for CSS, Dreamweaver has some of the best features in the business.
Support for HTML5 and CSS3 makes hand coding CSS easy, and Dreamweaver's CSS
Styles panel gives you a central hub for controlling, organizing, and even
creating styles visually.
Dreamweaver also has an integrated WebKit Preview and comes with a CSS
Inspect mode that is similar to the functionality of tools like Firebug and WebKit Inspector.
Dreamweaver is certainly more expensive than the other tools I have mentioned
here, but its feature set makes it worth the price.
Find out more at adobe.com/products/dreamweaver.html.
How you write your CSS is entirely up to you.
As I mentioned earlier, what works for one designer isn't going to work for another.
You owe it to yourself to try as many tools as you can, and it's worth
mentioning that all the tools that I've listed here are either free or have
demos that you can try out to find your favorite.
Just be sure to find a tool that writes clean consistent CSS the way that
you like to work.