New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Editors

From: CSS Fundamentals

Video: Editors

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.

Editors

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.

Show transcript

This video is part of

Image for CSS Fundamentals
CSS Fundamentals

36 video lessons · 67018 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.