Thanks to Cascading Style Sheets (CSS) — a formatting language for controlling the display of HTML — the Web is becoming a more beautiful place. CSS can make drab Web pages sparkle with color, imagery, complex layouts, and creative typographic controls. But keeping track of the myriad CSS properties and correct CSS syntax is a challenging task. A dedicated CSS-editing program makes it much simpler.
Two CSS editors for the Mac, Western Civilisation’s Style Master 3.5 and MacRabbit’s CSSEdit 1.6.3, do an admirable job of streamlining the process of style-sheet creation. But Style Master provides a complete tool not only for creating styles, but also for learning the complexities of CSS.
Style Master 3.5
Style Master 3.5 provides several approaches to CSS. For novices, a series of wizards takes you through the process of creating style sheets, CSS layouts, navigation bars, and link styles. You can preview your designs directly in the program, using Style Master’s built-in Web-page templates or Web-page designs of your own, to get immediate visual feedback on how they look and how well they work.
Advanced designers can use the program’s hand-coding window to type CSS code directly, or take advantage of the many CSS property editors that provide a simple interface for setting related CSS properties. For example, the border properties editor provides pull-down menus, form fields, and the OS X Color Picker to quickly assign colorful borders to a style. Fortunately, Style Master doesn’t make you choose one approach or the other: both the hand-coding window and the style editors can be open simultaneously, and you can freely jump between the two.
The program also makes it easy to add comments, rearrange styles within a style sheet, and link a style sheet to one Web page or an entire site’s worth of files. It even supports media types, so you can apply a “printer-only” style sheet to a page, for example. Unfortunately, you can’t link more than one style sheet to a page.
Style Master offers many resources to help you master the tricky ins and outs of CSS. For example, the Feature Info window provides context-sensitive information about the CSS property you’re currently editing. And the Support Watcher bar displays simple icons to identify whether a property is supported in a particular browser. Clicking on an icon opens the Feature Compatibility window, which gives a detailed description of any browser incompatibility problems. You can customize the list of browsers to check against, but the program unfortunately doesn’t distinguish between Internet Explorer 5 for Mac and Windows.
Beginning and experienced designers alike can learn nearly everything they need to know about CSS simply by reading the supplied Web-based reference materials: a manual, a getting-started guide, a thorough tutorial, and others are well written and easy to understand.
MacRabbit’s CSSEdit 1.6.3 is a relatively new program that still feels rough around the edges. Unlike Style Master, CSSEdit assumes you already have a pretty good working knowledge of CSS. There aren’t any CSS tutorials or information, and Apple help documents are skimpy.
CSSEdit provides two approaches to coding CSS: by hand or via a series of panes grouped together according to related CSS properties such as text, margin, background, and positioning. As with Style Master, this menu- and button-driven method makes constructing style sheets painless. Unfortunately, you must switch from one view to work in the other, so you can’t see both the code and the friendly interface at the same time.
For hand-coders, CSSEdit shines. Its intelligent autocompletion feature matches CSS properties and values to what you’re typing. So, for example, if you type co, the program writes the CSS property color into the style sheet and displays a pop-up list of other matching properties (such as content). You can select a property from the list, or just press return if the first listed property matches what you want. The program is smart enough to not list properties you’ve already applied to the style. Best of all, this feature is very responsive (unlike a similar feature in Style Master), so quick typists can whip out a style with far fewer keystrokes.
CSSEdit includes features for dealing with complex style sheets that include many styles. You can group related styles into “folders” within a style sheet, and quickly search a style sheet for styles that have a particular name or that contain a particular property or value. The unique Extract CSS From URL feature lets you retrieve the styles used on any Web page.
Once you’ve created a style sheet, CSSEdit lets you link it to an entire site’s worth of files. An added option that lets you remove any previously linked style sheets means you can quickly replace one style sheet with another throughout a site.
Macworld’s Buying Advice
Both CSSEdit 1.6.3 and Style Master 3.5 do an excellent job of creating style sheets. CSSEdit is inexpensive and great for hand-coders. It also provides a more-than-adequate visual-editing environment. Style Master 3.5, with its wealth of supplemental reference material, browser compatibility information, simple wizards, and CSS file-linking tools, makes creating and learning about style sheets fast and easy for both novice and advanced users.