Editing an Existing Style


One of the major advantages of using external style sheets is the ability to edit styles with ease and speed. Because changes are made only in the style sheets and not in the individual Web pages, you do not have to duplicate your modifications across a large number of documents. With external styles, formatting is not kept in the HTML document (such as index.html)the only style information included is a reference that specifies which style should be used in the case of classes. Web pages tell the browser which external style sheets to use for instructions on how to display the formatting. The styles are applied to the elements by the browser at the time that a file is seen by a visitor, as you can see in the following illustration.

Any modifications are automatically reflected in every page that is attached to the edited style sheet at the time that it is viewed. Because formatting values are contained in the style sheet (sangha.css, for example), those values need to be modified in only that one location to affect all pages linked to the style sheet. This is useful because the appearance of an element such as text can be changed in several pages or even an entire site very quickly.

In this exercise, you'll edit a style in the sangha.css external style sheet.

1.

Select p from the list of All Rules in the top portion of the CSS Styles panel.

The styles you create in the external style sheet sangha.css appear in the list on the CSS Styles panel.

When you select p from the CSS Styles panel, the CSS Properties segment of the CSS Styles panel indicates that the p style is currently selected and displays the properties that have been defined for that stylecolor, font-size, and line-height are the properties in this case. Each property shows the specific attributes that have been defined in the style.

2.

Click the value for the line-height property and change it to 18.

Changing properties and their values directly in the CSS Styles panel is a quick way to modify styles. Clicking the name of the property (in the left column) selects that property. Clicking the value (in the right column) allows you to change that value. For example, you can access a menu with the available font groups by clicking the name of the font, and you can access the color picker by clicking the color square.

Your changes are applied to the document. The space between each line of text is now slightly smaller. Text that uses the <p> tag in any other documents that are linked to this style sheet will be formatted automatically when viewed in Dreamweaver or a browser according to the modifications you just made.

Clicking the Add Property link at the bottom of the Properties list will allow you to select a new property to add to the rule.

Tip

You can also edit styles by selecting the desired style and clicking the Edit Style icon on the bottom of the CSS Styles panel. The CSS Rule Definition dialog box opensthe same dialog box you used in the previous exercises to create the styles.


Save and leave open both index.html and sangha.css.




Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

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