Using Adobe GoLive CS, Part 3

Let's start by creating an internal CSS. Open a blank GoLive page, and then click the CSS icon at the upper right (looks like steps) to access the page's internal CSS Editor. The editor employs two buttons at the top, CSS Definitions and Source. The CSS Definitions window gives you a visual way to create styles, and the Source window shows you the source code (see Figure 9.79).

Figure 9.79 The Definitions window and the Source
window of the CSS Editor.

To define a style, you need to determine whether it will be an element style, a class style, or an ID style. Let's concentrate on element styles first. Element, in this case, refers to an HTML tag, which is a markup element. Say, for example, you wanted to create a style that would make all your hyperlinks appear with no underline, but you want the underline to show up when the visitor puts his mouse over the link. You'd need to define a style for the <a> tag, which is the tag used to make a link, and you'd need to define two variations of the tag, one for each mouse state, off the link and over the link.

In the CSS Editor, click and hold the Create New Element Style button, either at the right side of the CSS editor in its default view or at the bottom of the window, until a list of tags pops up (see Figure 9.80). Choose "a" from the list.

Next, "a" appears in the CSS Definitions list, and the right half of the editor changes to display tools with which you can define the style's attributes. Across the top right half of the CSS Editor is a series of buttons. Each button represents a unique set of properties that can be applied to a style (see Figure 9.81).

Click the Font Properties button and choose a color for your link. Then in the Decoration area, click the No Text Decoration button (see Figure 9.82). This removes the underline from the link in its normal state. Now we need to define the over state of a link that is called a:hover. Click into the whitespace of the CSS Definitions pane to go back to the editor's default state. Choose a:hover from the Markup Elements list. Choose a color for the mouse over state of your link, and then click the Text Decoration Underline button. It's that simple!

Figure 9.80 Clicking the button adds an untitled element, but clicking and holding reveals a list of markup elements from which to choose.

Figure 9.81 The buttons in the CSS Editor represent various sets of properties that can be added to your style definition.

Figure 9.82 Use the Text Decoration buttons to apply or remove an underline, strikethrough, overline, or blink.

Notice that in the lower-right portion of the CSS Editor a preview of the style appears and continues to update as you add attributes to a style. To preview all the styles in your definitions list, select one and then use the arrow keys to move up or down the list. The preview updates as each new definition is selected. It's also helpful that the label of an attribute that has been applied to the selected style appears in blue in the top section of the right half of the pane.

To test out the styles you defined, create a link on your HTML page, choose Preview, and put your mouse over the link. Remember, when you create an element style, that style attaches to every instance of that element in the page, or in all pages referenced by an external style sheet. In some instances you may want to define a style that you can apply only where needed. In that case, you need a class style.