Creating External Styles

Although you can easily change a variety of formatting attributes such as font face, size, and color in individual documents, external styles can expand your options and make it easy to apply those same styles to other documents within your site. Rather than re-creating your styles in each page in which you want to use them, you can use an external style sheet to store all your styles, making those styles accessible to any document to which the style sheet is attached. This can speed up the formatting process greatly.

In this exercise, you'll create a new style in the sangha.css external style sheet by redefining an HTML tag. By redefining the Heading 3 (<h3>) HTML tag in this exercise, you tell the browser that any text using the <h3> tag should be displayed with the formatting you specify. This is useful because it allows you to alter the basic Heading 3 format so that all text that uses the Heading 3 format is formatted with the style attributes you specified.

1.	Click the New CSS Rule icon on the CSS Styles panel. In the Selector Type area, select Tag. Use the Tag menu to select h3. In this exercise, you make a style for the format Heading 3. In HTML, the corresponding tag is <h3>. Tags are specified in the New CSS Style dialog box without the brackets that surround them in the code. The heading near the top of the document is formatted as a Heading 3 and will take on the attributes you specify in the next step. Note When you are creating a style that redefines an existing HTML tag, it is helpful to place the insertion point within text on the page that uses the same tag or select that tag in the tag selector before you create the style. Dreamweaver then automatically associates the HTML tag with the style that will be created as long as the tag selector type is the default selectionthe default selector type is whichever type was last used. If the tag selector type is not the default, you can select it, click Cancel on the New CSS Rule dialog box, and click New CSS Rule againtag will be selected when the dialog box reopens. Selecting the tag prior to opening the New CSS Rule dialog box can be helpful if you are not familiar with HTML. For example, you could click in the heading and select the <h3> tag and then click the New CSS Rule icon on the CSS Styles panel. If Tag is selected in the Selector Type area, the <h3> tag is displayed as h3 in the Tag text field.
2.	From the Define In area, select the menu option and choose sangha.css from the menu. Click OK. Because this is the only style sheet that is linked to the current document, (New Style Sheet File) and sangha.css are the only options in the menu. For documents that do not have any external style sheets attached, the only option in this menu would be (New Style Sheet File). Note You can create a new external style sheet while creating a new style by selecting (New Style Sheet File) in the menu option in the Define In area of the New CSS Rule dialog box. When you create a new external style sheet for a rule, the style sheet is automatically linked to the document for which it was created. You should save any such new external style sheets with the .css extension. To keep the file structure clean and organized, some sites keep all external styles sheets in a central location. The CSS Rule Definition for h3 in sangha.css dialog box opens, which you use to define the formatting of Heading 3 tags. The CSS Rule Definition dialog box always displays the selector of the stylethe element that is being modifiedand the name of the style sheet that it is being defined in. In this case, the selector is h3 and the style sheet is sangha.css.
3.	In the Type category, select 18 from the Size menu and change the measurement to points. From the Font menu, choose Courier New, Courier, monospace. Change the color to #660066. Select bold from the Weight menu and click OK. You can also open the sangha.css file to make changes directly to the CSS code. When you click OK to close the CSS Rule Definition dialog box, the sangha.css file automatically opens in a new tab in the Document window. CSS files are displayed in Code view, which you will work with more in Lesson 16. If you make changes to the style sheet such as creating, editing or deleting styles, be sure to save the CSS document before closing it. If you close it without saving, you will lose any changes that you might have made. You might want to periodically save your CSS document as well as your HTML document while you are working. Note You can use the Dreamweaver Preferences to adjust how you work with CSS. The CSS Styles category allows you to choose to open CSS files when they are modifiedthis option is on by default. You should leave this option selected for this lesson. Also included in this section of the Preferences are shorthand options that affect the way CSS is written by Dreamweaver. Redefined HTML tag styles are applied automatically to any content contained by the redefined tags in the document(s) to which the style sheet applies. The style you created is now reflected in text that uses the heading 3 format.
4.	Place the insertion point within the first paragraph beginning with Yoga Sangha's inspiration is emerging…. The tag selector at the lower left of the Document window displays the HTML tag <p>, indicating that the insertion point is within the paragraph. The <p> tag defines a paragraph.
5.	Click New CSS Rule icon on the CSS Styles panel. The Tag text field should display p, Tag should be selected in the Selector Type section, and the Define In section should show sangha.css selected in the menu. Make any changes necessary to match these values and then click OK. The new style you are creating will redefine the way text formatted with paragraph tags should appearthe selector is p, and the style sheet is sangha.css. The dialog box should have the <p> tag automatically selected in the Tag text field because you placed the insertion point within a paragraph, which uses the <p> tag, before choosing to create a new CSS rule. Because you used the tag selector Type the last time you used the New CSS Rule dialog box in this lesson, that type is automatically selected. If you close Dreamweaver, it will revert back to automatically selecting the Class Selector Type upon opening the New CSS Style dialog box.
6.	In the Type category of the CSS Rule Definition dialog box, leave the Font menu blank. Type 12 into the Size text field and set the measurement to pixels in the Size unit menu. Type 20 in the Line Height text field and set the measurement to pixels. Choose black (#000000) from the Color area and then click OK to close the dialog box and create the style. Tip You can click Apply to see your selections appear on the page while the dialog box is still open. If you want to make changes based on how the text appears, you can do so before closing the dialog box. Any text that is contained within paragraph tags in the document will now appear with the formatting for the attributes that you defined in the external style sheet. The style sheet does not affect any text that has a different format applied to it, headings, or lists. Resolution and Units of Measurement on the Web Pixels are a unit of measurement for defining text size in Web pages. Points are derived from print-based media and so are only a good choice for pages that are intended for printing. Pixels originate from digital media and describe a unit of measurement based on screen resolution. Consequently, pixels tend to translate more consistently from browser to browser and platform to platform than points. Small text that is readable on a Windows computer can be completely illegible on a Macintosha situation that occurs most often when developers use points to define text size. There are several other measurement options available, including relative sizes that you learned about in Lesson 2 (choices of small, medium, large, and so on in the size menu on the Property inspector) in comparison with absolute values (defined numerically), which require the selection of a unit of measurement. Inches, centimeters, and millimeters are the other print-based units available. Picas (one pica is 12 points), ems, exes, and percents are other units of measurement. The percentage option relies on the size defined by the parent element or tag and therefore depends on inheriting a size attribute from either a previous style or the browser default. You learn more about style precedence and inheritance later in this lesson. Although relative sizes, ems and percentages are usually recommended over pixels, points or other print-based units of measurement, the most important thing is to check your Web pages on different platforms and see how your text appears on both Macintosh and Windows computers.
7.	Place the insertion point in the first line of the list that begins with is a form of Hatha yoga. In the tag selector, click <ul>. This procedure selects the list tag that controls the formatting of the text. By selecting the <ul> tag (which applies to the entire list), you apply the formatting to both the list bullet and the list item at the same time. You will also see the <li> tag (which applies only to an individual item in the list) in the tag selector.
8.	Click New CSS Rule on the CSS Styles panel. Verify that tag is selected in the Selector Type area, that ul is displayed in the Tag text field, and that the style will be created in the sangha.css style sheet. Click OK and use the CSS Rule Definition dialog box to set the size to 12 pixels, the weight to bold, and the color to #333333. Click OK. The ul style overrides the settings that you specified for the default body text color (black). You learn more about how to determine which styles are given priority later in this lesson.
9.	In the Document window, click in the heading Anusara Yoga:, located just above the bulleted list. Select the <h4> tag in the tag selector, and click New CSS Rule on the CSS Styles panel. In the New CSS Rule dialog box, verify that the Tag field displays <h4>, the Selector Type is Tag, and the style will be defined in sangha.css; then click OK. In the CSS Rule Definition dialog box, set the font to Courier New, Courier, mono and set the size to 16 pixels. Click OK.

This subheading is set to the Heading 4 format. You can see the <h4> tag displayed in the tag selector at the lower left of the Document window, and you can also see Heading 4 displayed in the Format menu on the Property inspector.

At this point, your document should look similar to the example shown here.

Leave the index.html file open for the next exercise. Save both the index.html and sangha.css documents. Remember that the sangha.css document opened in a new tab automatically when you began to edit the style sheet earlier in this lesson.