1 00:00:00,000 --> 00:00:04,990 Writing CSS doesn't require anything more than a text editor. 2 00:00:05,000 --> 00:00:07,990 If you're comfortable with the rules and syntax of CSS, you could just use 3 00:00:08,000 --> 00:00:12,990 programs like Notepad or TextEdit, write your styles, and save the documents 4 00:00:13,000 --> 00:00:14,990 with a .css extension. 5 00:00:15,000 --> 00:00:18,990 Although some designers are quite content to do just that, most designers 6 00:00:19,000 --> 00:00:24,990 are looking for software that makes the job of writing and editing CSS a little easier. 7 00:00:25,000 --> 00:00:28,990 CSS editors come in many different varieties, from bare-bones editors 8 00:00:29,000 --> 00:00:33,990 dedicated to CSS, to fully featured web development applications with CSS 9 00:00:34,000 --> 00:00:35,990 editing capabilities. 10 00:00:36,000 --> 00:00:38,990 What's right for one designer might not be right for another, 11 00:00:39,000 --> 00:00:42,990 so before you commit to a single editor, you should consider what type 12 00:00:43,000 --> 00:00:48,990 of features you're looking for and find an editor that matches your personal workflow. 13 00:00:49,000 --> 00:00:51,990 With that in mind, I want to give you a sample of some of the types of editors 14 00:00:52,000 --> 00:00:55,990 available to you and the features that they offer. 15 00:00:56,000 --> 00:01:00,990 Use this as a starting point for researching and finding the editor that's right for you. 16 00:01:01,000 --> 00:01:05,990 I want to start by going over some of the more basic CSS editors. 17 00:01:06,000 --> 00:01:09,990 Many of these are free, and they tend to be used by developers who are more 18 00:01:10,000 --> 00:01:13,990 focused on hand coding sites with minimal intrusion by the software. 19 00:01:14,000 --> 00:01:17,990 If you're looking for something basic but with a bit more functionality than 20 00:01:18,000 --> 00:01:24,990 your everyday text editor, try Notepad++ for Windows or TextMate for the Mac. 21 00:01:25,000 --> 00:01:30,990 Both of these are more focused on writing code and offer support for CSS. 22 00:01:31,000 --> 00:01:35,990 TextMate comes with support for over fifty languages, including CSS baked in, while 23 00:01:36,000 --> 00:01:42,990 Notepad++ has a plug-in designed to offer support for HTML and CSS. 24 00:01:43,000 --> 00:01:48,990 You can find Notepad++ at notepad-plus-plus.org. 25 00:01:49,000 --> 00:01:52,990 You can find TextMate at macromates.com. 26 00:01:53,000 --> 00:01:58,990 Snapcss is an open-source, no-frills CSS editor aimed at those that prefer to 27 00:01:59,000 --> 00:02:01,990 code with little or no distractions. 28 00:02:02,000 --> 00:02:08,990 Its feature set is extremely limited by design, and its focus is entirely on the code itself. 29 00:02:09,000 --> 00:02:17,990 You can find it at www.improvingcode.com/snapcss. 30 00:02:18,000 --> 00:02:21,990 BBEdit is a simple code editor built for the Mac. 31 00:02:22,000 --> 00:02:26,990 Code snippets, code completion, and code support for over twenty languages makes 32 00:02:27,000 --> 00:02:31,990 BBEdit a logical choice for a web designer that needs to work heavily in code or 33 00:02:32,000 --> 00:02:33,990 switch between scripting languages. 34 00:02:34,000 --> 00:02:35,990 Unfortunately, it's Mac only. 35 00:02:36,000 --> 00:02:43,990 You can find it at barebones.com/products/bbedit. 36 00:02:44,000 --> 00:02:48,990 There are also several CSS editors that focus almost entirely on CSS but have a 37 00:02:49,000 --> 00:02:53,990 bigger feature set than the previous set of tools. Let's take a look. 38 00:02:54,000 --> 00:02:57,990 Rapid CSS is a feature-rich editor for creating CSS. 39 00:02:58,000 --> 00:03:01,990 It has tools for both designers who prefer to write styles manually or those 40 00:03:02,000 --> 00:03:04,990 that prefer to let the software write the code for them. 41 00:03:05,000 --> 00:03:09,990 It features support for both HTML and CSS3, has a preview functionality to let 42 00:03:10,000 --> 00:03:15,990 you test your code, and has a built-in FTP client for uploading and downloading files. 43 00:03:16,000 --> 00:03:23,990 You can find out more about it at blumentals.net/rapidcss. 44 00:03:24,000 --> 00:03:25,990 Simple CSS is just that, 45 00:03:26,000 --> 00:03:28,990 a simple editor for CSS files. 46 00:03:29,000 --> 00:03:32,990 You can create new projects or edit existing files, and creating and editing 47 00:03:33,000 --> 00:03:36,990 rules are done through simple and clear dialog boxes. 48 00:03:37,000 --> 00:03:39,990 Although it isn't as feature rich as some of the other tools, it is free, and 49 00:03:40,000 --> 00:03:41,990 it's very easy to use. 50 00:03:42,000 --> 00:03:45,990 You can find out more about it at hostm.com/css. 51 00:03:46,000 --> 00:03:52,990 cssedit is a powerful CSS editor for the Mac. 52 00:03:53,000 --> 00:03:56,990 It comes with live preview, an x-ray inspector that allows you to quickly 53 00:03:57,000 --> 00:04:00,990 identify which elements belong to which styles, style editing through a 54 00:04:01,000 --> 00:04:04,990 visual editor or a code editor depending upon your personal preference, and 55 00:04:05,000 --> 00:04:06,990 helpful debugging tools. 56 00:04:07,000 --> 00:04:11,990 One of the tools I really like is the ability to group styles in the visual editor. 57 00:04:12,000 --> 00:04:15,990 This allows you to quickly find styles for navigation tabs or other groups, 58 00:04:16,000 --> 00:04:18,990 rather than scrolling through your style sheet to locate them. 59 00:04:19,000 --> 00:04:25,990 You can find out more about it at macrabbit.com/cssedit. 60 00:04:26,000 --> 00:04:31,990 Style Master by Western Civ is a full-featured CSS editor for both the Mac and the PC. 61 00:04:32,000 --> 00:04:35,990 In addition to features like Live Preview and a powerful code editor, it comes 62 00:04:36,000 --> 00:04:41,990 with pre-built templates, integration with blogs, and popular CMSes, and powerful 63 00:04:42,000 --> 00:04:44,990 wizards for rapidly building styles. 64 00:04:45,000 --> 00:04:52,990 You can find out more about it at westciv.com/style_master. 65 00:04:53,000 --> 00:04:55,990 Stylizer is one of my favorite CSS editors. 66 00:04:56,000 --> 00:05:01,990 It comes with built-in previews from nine integrated browsers, neat tools like 67 00:05:02,000 --> 00:05:04,990 their bull's-eye feature that allows you to target an element on the page and 68 00:05:05,000 --> 00:05:08,990 quickly edit the styles relating to it, and an editor that allows you to edit 69 00:05:09,000 --> 00:05:13,990 the code directly while still giving you WYSIWYG-like editing tools. 70 00:05:14,000 --> 00:05:17,990 You can find out more about Stylizer at skybound.ca. 71 00:05:18,000 --> 00:05:23,990 Of course, you might also be looking for a CSS editor that is part of a 72 00:05:24,000 --> 00:05:26,990 larger development suite. Let's face it, 73 00:05:27,000 --> 00:05:29,990 you'll probably be authoring more than just CSS. 74 00:05:30,000 --> 00:05:35,990 Here are some of the more popular all-in-one web development suites. 75 00:05:36,000 --> 00:05:40,990 CoffeeCup software's HTML editor is another clean and standards-compliant HTML 76 00:05:41,000 --> 00:05:45,990 and CSS editor that is packed full of powerful features. 77 00:05:46,000 --> 00:05:50,990 Code validation, multi-browser testing support, code completion, code snippets, 78 00:05:51,000 --> 00:05:55,990 and site management tools make this a very powerful web-authoring tool. 79 00:05:56,000 --> 00:06:00,990 In addition to the HTML editor, CoffeeCup offers separate programs for specific 80 00:06:01,000 --> 00:06:03,990 tasks like e-commerce and form building. 81 00:06:04,000 --> 00:06:07,990 As such, if you find you need more functionality, you can often add it through 82 00:06:08,000 --> 00:06:09,990 another one of their applications. 83 00:06:10,000 --> 00:06:14,990 You can find it at www.coffeecup.com. 84 00:06:15,000 --> 00:06:20,990 Coda is a very popular and powerful web design program that's released on the Mac only. 85 00:06:21,000 --> 00:06:26,990 Coda offers two ways to edit your CSS files, either visually or through hand coding. 86 00:06:27,000 --> 00:06:31,990 It will even let you split windows out and use both modes at the same time. 87 00:06:32,000 --> 00:06:35,990 Coda also has an integrated WebKit Preview pane that lets you see just how your 88 00:06:36,000 --> 00:06:36,990 styles are going to render. 89 00:06:37,000 --> 00:06:41,990 In addition to CSS, Coda features an impressive array of web development tools, 90 00:06:42,000 --> 00:06:46,990 such as a terminal window, JavaScript consoles, and a live collaboration feature 91 00:06:47,000 --> 00:06:49,990 that helps remote teams work together on projects. 92 00:06:50,000 --> 00:06:54,990 Learn more about it at panic.com/coda. 93 00:06:55,000 --> 00:06:57,990 Last but not least is Adobe's Dreamweaver. 94 00:06:58,000 --> 00:07:01,990 Dreamweaver is recognized by many as being the industry standard tool for web development, 95 00:07:02,000 --> 00:07:06,990 and for good reason. Its integration with other Adobe tools makes it easier 96 00:07:07,000 --> 00:07:11,990 to create and share assets, and its feature list is far too large for me to list here. 97 00:07:12,000 --> 00:07:15,990 As for CSS, Dreamweaver has some of the best features in the business. 98 00:07:16,000 --> 00:07:22,990 Support for HTML5 and CSS3 makes hand coding CSS easy, and Dreamweaver's CSS 99 00:07:23,000 --> 00:07:26,990 Styles panel gives you a central hub for controlling, organizing, and even 100 00:07:27,000 --> 00:07:28,990 creating styles visually. 101 00:07:29,000 --> 00:07:32,990 Dreamweaver also has an integrated WebKit Preview and comes with a CSS 102 00:07:33,000 --> 00:07:38,990 Inspect mode that is similar to the functionality of tools like Firebug and WebKit Inspector. 103 00:07:39,000 --> 00:07:41,990 Dreamweaver is certainly more expensive than the other tools I have mentioned 104 00:07:42,000 --> 00:07:44,990 here, but its feature set makes it worth the price. 105 00:07:45,000 --> 00:07:51,990 Find out more at adobe.com/products/dreamweaver.html. 106 00:07:52,000 --> 00:07:54,990 How you write your CSS is entirely up to you. 107 00:07:55,000 --> 00:07:58,990 As I mentioned earlier, what works for one designer isn't going to work for another. 108 00:07:59,000 --> 00:08:02,990 You owe it to yourself to try as many tools as you can, and it's worth 109 00:08:03,000 --> 00:08:06,990 mentioning that all the tools that I've listed here are either free or have 110 00:08:07,000 --> 00:08:09,990 demos that you can try out to find your favorite. 111 00:08:10,000 --> 00:08:14,990 Just be sure to find a tool that writes clean consistent CSS the way that 112 00:08:15,000 --> 00:08:25,000 you like to work.