Using Cascading Style Sheets


GoLive's support for Cascading Style Sheets has been dramatically updated and complies with the CSS2 specification. Not only does the Layout mode do a better job of rendering CSS designs, but the Style Sheet Editor itself has been redesigned to make it more efficient and easier to use.

Those of you familiar with paragraph and character styles in page-layout applications will probably grasp the basics of CSS readily, but the scope of the CSS spec falls well beyond altering font faces, sizes, and colors. CSS can be used to position elements, not merely text, on a page. In fact, if you have played with layers in GoLive, you were working with CSS because a layer actually writes a <DIV> tag, which defines an area, and that area is positioned (and can be styled) with CSS.

Internal vs. External

Ever wonder why they're called Cascading Style Sheets instead of simply style sheets? It's because you can define styles in several ways, which at times could result in conflicting styles. The method of resolving this conflict is called precedence. For example, you can define a style internally, meaning that it's written into a page, or externally, meaning that the style is defined in a separate document and linked to the page. In such a case, any conflicting styles in the internally defined styles take precedence over those defined in the external styles. Likewise, a style can be written inline, which means that it is applied to only one element on a page rather than the whole page, like an internal style. In this case, the inline style would take precedence over the internal style.

So if you have an external style sheet that defines a piece of text as red, and there is no internal or inline style on that text, the text appears red. If you also have an internal style declaring that text to be blue, the internal style would win and the text would be blue. But if you also had an inline style defining the text as green, the inline style would triumph over the others and the text would appear green.

Creating an Element Style

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.55).

Figure 9.55. The Definitions 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, that you want 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 would need to define a style for the <a> tag, which is the tag used to make a link, and 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.56). Choose "a" from the list.

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


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.57).

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


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.58). This removes the underline from the link in its normal state. Now you need to define the over state of a link, 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 mouseover state of your link, and then click the Text Decoration Underline button. It's that simple!

Figure 9.58. 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 might want to define a style that you can apply only where needed. In that case, you need a class style.

Creating a Class Style

Defining a class style is not much different from defining an element style, but unlike an element style, which automatically adheres to every occurrence of a specific HTML tag in a page, a class style needs to be manually applied wherever it is desired. Class style names begin with a period (.) and won't work properly without it. Let's try one. Click the New Class button at the bottom of the CSS Editor, and change the name of the style to .bodyclass.

In the Font Properties area, choose white for the color and navy for the back color, and set the type size as 16 pixels. Hold down the Create New Font Family button and choose Trebuchet Set. The preview gives you a very clear idea of how this style will look (see Figure 9.59).

Figure 9.59. The New Font Family pop-up menu. Notice how the CSS Editor gives you a preview of your style as you edit properties.


Now click the Margin and Padding Properties button, and under Padding type 5 into the All field. When you click out of the input field, the attribute automatically fills in for all four sides (see Figure 9.60).

Figure 9.60. You can define Margin and Padding values for any side or for all of them. If all sides are to use the same setting, you need to define only the All field, and the others will be filled in automatically.


By the Way

The CSS Editor uses pixels by default in all the input fields. If you'd like to change to points, picas, inches, ems, percentage, or another unit, click the pop-up menu next to the field and make your selection.


Click the Border and Outline Properties button, and make sure that Border is active. Type 2 into the All input field, and choose Lime from the color list and Solid from the border type pop-up menu (see Figure 9.61). Save your changes and go over to your HTML page. Type the words TRy it! and select them. In the toolbar, click the Apply CSS Style button. Holding your mouse over the check boxes invokes a style preview.

Figure 9.61. Add a border to finish off your style.


Moving the mouse across the check boxes enables you to see how the style will look applied as an inline style, a block style, a paragraph style, and so on. Click the inline style box to both apply the style and dismiss the Apply CSS Style window simultaneously, and then preview your page.

External CSS

Although internal style sheets are useful, the external version has the real power. When you reference an external style sheet from multiple pages in a site, all it takes is an edit to that one CSS document to make a quick site-wide change.

You can create a new external style sheet by choosing New Special, Cascading Style Sheet from the File menu, or by Ctrl+clicking (right-clicking) in the site window and choosing New, Cascading Style Sheet. When the CSS Editor for your external style sheet opens, create your definitions in exactly the same manner as you did for internal styles. When you are finished, save and name the file, but be sure to keep the .css extension.

At times, you might want to define an internal style sheet for a page and also link to an external style sheet. You can do this several ways. From an internal CSS Editor window, click Create a Reference to an External Style Sheet, and in the next window use the Fetch URL tool to link to the CSS document in your site window.

Another method is to drag a CSS file from the Files tab of the site window and drop it onto the Page Properties button at the upper right of the page (see Figure 9.62).

Figure 9.62. Drag and drop a CSS file onto the Page Properties button to create a link.


A third way is to use the CSS palette. First select the page or pages in the Files list of the site window, and then click and hold the mouse on the Create Link to External CSS button and choose the name of the CSS file to which you want to link. Alternatively, you can select the pages in the Files list and use the Fetch URL tool or browser button in the CSS palette.

Entire books are devoted to CSS, but hopefully this section will get you started. CSS is somewhat addictive. When you realize its incredible power, you'll never want to go back to the old way of styling your pages again!



Sams Teach Yourself Adobe Creative Suite 2 All in One
Sams Teach Yourself Creative Suite 2 All in One
ISBN: 067232752X
EAN: 2147483647
Year: 2003
Pages: 225
Authors: Mordy Golding

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net