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 · 68620 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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.