Section 54. Exploring the CSS Editor

#54. Exploring the CSS Editor

Just as GoLive offers both visual and source-code editing tools to design your Web pages, the enhanced CSS Editor in GoLive CS2 gives you a choice of editing your stylesheets using a graphical user interface or switching over to the CSS code. You can even preview your stylesheet definitions directly from the editor without having to open a page and apply them.

Managing Styles with Folders

Using folders, GoLive provides an easy, familiar way to organize your styles when there's too many of them to keep track of. Click the Create folder button in the CSS Editor to add a folder to your set of styles. Name the folder and drag styles into it just as you would any other folder. Style folders are merely comments formatted in a way that GoLive knows how to treat them. Web pages will recognize them as standard CSS comments.

To open the CSS Editor click the Open CSS Editor button in the upper-right corner of a page in Layout mode. Once the CSS Editor is open, you'll notice that the right panel offers buttons with helpful explanations of the different types of items you can add to your stylesheet (Figure 54a). Miniature versions of these buttons will always display at the top of the editor if you select the Show These Buttons at Top option.

Figure 54a. The right panel of the CSS Editor provides buttons for all the items you can create in your stylesheet.

If you create a new style definition or select an existing style, the right panel changes to show a set of icon-based tabs sorted into various categories of available styling properties. Use these tabs to find and add the properties you want to create your style.

After you've added a property to a style definition, a representative icon for the property section appears in the Info column to the right of that style so you can see at a glance what's been defined. Click an icon to jump to its corresponding property tab.

You can preview styles while you're defining them by clicking the Show/Hide Style Preview button located in the bottom-left corner of the editor. This view gives you a good idea of the appearance of your style before you apply it to a page element and load it in a browser (Figure 54b). What a huge timesaver.

Figure 54b. The Style Preview pane shows you an example of the selected style before you apply it to one of your pages.

In addition, if you're a code junkie or aspiring to become one, click the Show/Hide Split Source button to view or edit the underlying code. You can also click the Source tab at the top of the editor window to switch entirely to code editing mode. Like all source views in GoLive, code completion is available, making it almost as much fun to define a style by hand (Figure 54c).

Figure 54c. GoLive's code completion feature handles CSS as well as HTML.