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