Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.