|< Day Day Up >|
6.3 Using Styles
Once you've created styles, applying them is easy. In fact, if you created HTML tag styles, you needn't do anything to apply them, because their selectors (see the box on Section 6.2.2) automatically dictate which tags they affect.
6.3.1 Linking to an External Style Sheet
Whenever you create an external style sheet, Dreamweaver automatically links it to the current document. To use its styles in a different Web page, however, you must attach it to the page.
To do so, open the Web page to which you wish to add the style sheet. Click the Attach Style Sheet button (see Figure 6-1) on the CSS Styles panel. (If the CSS Styles panel isn't open, choose WindowCSS Styles or press Shift-F11.)
The Link External Style Sheet window appears. Click the Browse button. In the Select Style Sheet File dialog box that appears, navigate to and double-click the CSS (.css) file you wish to attach to the document. If Dreamweaver offers to copy the style sheet file into your site's root folder, click Yes.
The Link External Style Sheet window provides two other options: Link or Import. These two choices are nearly identical; they're simply two different methods of attaching an external style sheet to a Web page. The only real difference is that Netscape Navigator 4 doesn't understand the Import method. For greatest compatibility, use the Link option.
Dreamweaver adds the necessary HTML code to the head of the Web page, and automatically formats any tags in the document according to the style sheet's HTML tag styles. You'll see the formatting changes take place in the document window immediately after attaching the external style sheet.
If the style sheet contains class styles, on the other hand, you won't see their formatting effects until you apply them to an element on the page, as described next.
6.3.2 Applying a Class Style
You can apply class styles to any selection in the document window, whether it's a word, an image, or an entire paragraph. (You can apply any class style to any element, although doing so doesn't always make sense. If you format a graphic with a style that specifies bold, red Courier type, it won't look any different.)
For example, suppose your company's name appears in a paragraph of text on a Web page that includes a class style named .company. To format that text using the class style, you select the name in the document window and apply the style, as described below.
Similarly, to format larger selections, such as an entire paragraph, you'd select the paragraph and apply the class style. In fact, you can apply a class style to any HTML tag, such as the <p> (paragraph), <td> (table cell), or <body> tags.
When you apply a class style (.content, for example) to a tag, Dreamweaver adds a special class property to the page's code, like this: <p class="company">. On the other hand, if you apply a class to a selection that isn't a tag梐 single word that you've double-clicked, for example桪reamweaver wraps the selection within a <span> tag like this: <span class="company">The National Exasperater</span>. This tag, in other words, applies a style to a span of text that can't be identified by a single tag.
As you can see, it doesn't take much code to add a style to a Web page. A single application of a CSS style might add only 15 characters to your document (<p class="company">). When you compare that compact instruction with the equivalent HTML code required to produce the same formatted text (such as <font size="5" face="Georgia, Times New Roman, Times, serif " color="#999933"> The National Exasperater</font>, class styles look downright petite.
To apply a class style to text, select some words. Then, from the Style menu in the Property inspector, select the style name (Figure 6-4). To style an entire paragraph, you only need to place the cursor anywhere inside the paragraph (or heading) before using the Property inspector.
To apply a class style to an object like an image, select the object (as always, the tag selector in the bottom of the document window is a great way to select a tag). Then use the Class pop-up menu on the Property inspector (Figure 6-4) to select the style name.
The Property inspector provides the easiest method of applying a class style. Depending on what you've selected on the page (text, an image, or some other HTML tag) you'll encounter one of two different menus梩he Style menu (top) or the Class menu (bottom). Either way, it's the same menu with the same options, and you use it to select the name of a style to apply it to whatever you've selected in the document window. You can also remove a style by selecting None from the menu.
You can also apply a class style by selecting whatever element you wish to style, choosing Text > CSS Styles, selecting the style from the submenu. Finally, you can also apply a class from the document window's tag selector, as shown in Figure 6-5.
6.3.3 Un-Applying a Class Style
To remove a style from an object on a Web page, simply select the element and select None from the Property inspector's Style menu (see Figure 6-4). You can also choose TextCSS StylesNone to remove a style from any selection (even non-text elements like images or tables).
You can apply a class style directly to a tag using the document window's tag selector. Just right-click (Control-click) the tag you wish to format, and then select the class style from the Set Class submenu. In addition, the tag selector lets you know if a tag has a class style applied to it. If so, the style's name is added at the end of the tag. For example, in the bottom figure, a class style named .newsBox2 is applied to a table cell (the <td> tag) on the page.
You can't, however, remove tag styles from HTML tags. For example, suppose you've redefined the <h1> tag using the steps outlined on Section 6.2. If your page has three Heading 1 (<h1>) paragraphs, and you want the third heading to have a different style than the other two, you're out of luck. The only way to remove the formatting is to delete the <h1> style altogether (see Section 6.4.3), which, of course, would remove the formatting from all three headings. In this case, you'd have been better off creating a class style and applying it to the first two headlines only.
|< Day Day Up >|