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 below) automatically dictate which tags they affect.
POWER USERS' CLINIC Anatomy of a Style |
Dreamweaver automatically handles the details of adding the proper CSS code to your pages, but if you're looking for something to read in bed, here's the behind-the-scenes scoop on how it works. When you create an internal style sheet, Dreamweaver adds a pair of <style> tags to the head of the page (and a pair of HTML comment tags that hide the CSS from very old browsers). The opening <style> tag tells a Web browser that the following information isn't HTMLit's CSS code. When the Web browser encounters the closing </style> tag, it knows the CSS style information has ended. Each line inside the<style> tag is a single style (in CSS speak, styles are also called "rules"). An HTML tag style for the Heading 1 tag (<h1>), for example, might look like this: h1 { font-size: 24px; color: #003399 } The first parth1is called a selector (in CSS-speak) and indicates what the style applies to. In this case, wherever the <h1> (Heading 1) tag appears in the Web page's code, this style applies. The information between the braces{ }states what formatting the browser should apply. For example, the code shown above contains two formatting instructions for the <h1> tag. Each one's called a declaration and is composed of a property and a value . For example, font-size: 24px is one declaration with a property of font-size and a value of 24px . In other words, this rule tells a Web browser that text inside an <h1> tag should be 24 pixels tall. The second declaration in the code makes the text of all <h1> tags show up in the color #003399. A class style looks just like an HTML tag, except that instead of a tag, the selector is a name you've supplied, preceded by a dot, like this: .company { font-size: 24px; color: #003399 } Styles stored in an external style sheet look exactly the same; the only difference is that external style sheets don't include the <style> tags and shouldn't include any HTML code. You can open a page in Code view (choose View Code) and edit an internal style sheet, just as you would the HTML of the page(see Chapter 9). In Dreamweaver, you can also look at the raw style information of an external style sheet in several ways: open the .css file as you would a Web page (choose File Open or double-click its name in the Files panel), or you can right-click (Control-click) on the styles name in the CSS Styles panel and choose "Go to code" from the pop-up menu; if you've changed Dreamweaver's preferences, double-clicking a style's name can also open the CSS file. |
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. Then click the Attach External Style Sheet button (see Figure 6-1) on the CSS Styles panel. (If the CSS Styles panel isn't open, choose Window CSS Styles or press Shift-F11.)
The Attach External Style Sheet window appears (see Figure 6-4.) 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 Attach External Style Sheet window provides two other options: how to attach the style sheet and what type of "media" you want the styles to apply to. The "media" setting is optional.
When attaching an external style sheet you can either "link" it or"import" it. 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.
The Media menu defines which type of output device or display should use the style sheet. For example, selecting "printer" means that the style sheet applies only when the document is printed. Most of these optionssuch as TV for televisions or TTY for teletype machinesaren't of any use to the average Web designer. But the options "printer" and "screen" can come in handy. For example, you can create a set of styles that applies just to computer monitors by attaching a style sheet with the "screen" optiongreat for those moody white-text on black background designer sitesand another setthis time using printer-friendly black text on a white backgroundthat applies only when printed. Then attach both sheets to the same page, and only styles in the "screen" style sheet appear when the page is viewed on a monitor, while those in the "printer" version appear only in the printed copy.
The "all" option in the Media menu is the same as not selecting anythingthe style sheet applies when printed, viewed on a monitor, felt on a Braille reader, and so on. (Dreamweaver 8 also includes a helpful toolbar for controlling the display of style sheets aimed at different mediasee Figure 6-5.) By using the Media menu, you can build one external style sheet that defines the basic look of all of your pages, and then create separate screen and printer style sheets that tweak that design for presentation on a monitor and on a piece of paper.
After choosing your options, click OK, and 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 .
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 (either in an internal style sheet or in a linked, external style sheet) 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 ( .company , 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 taga single word that you've double-clicked, for exampleDreamweaver wraps the selection within a <span> tag like this: <span class="company"> The National Exasperator</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 may 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 Exasperator</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 (top image in Figure 6-6). 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 (bottom image in Figure6-6) to select the style name.
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, or by right-clicking (Control-clicking) on the styles name in the CSS Styles panel, and then choosing "Apply" from the pop-up menu. Finally, you can also apply a class from the document window's tag selector, as shown in Figure 6-7.
To remove a style from an object on a Web page, simply select the element and then select None from the Property inspector's Style menu (see Figure 6-6). You can also choose Text CSS Styles None to remove a style from any selection (even nontext elements like images or tables).
FREQUENTLY ASKED QUESTION When Formatting Disappears |
Sometimes when I copy text from one Web page and paste it into another Web page, all of the formatting disappears. What's going on? When you use Cascading Style Sheets, keep in mind that the actual style information is stored either in the <head> of the Web page (for internal style sheets) or in a separate CSS file (an external style sheet). If a page includes an internal style sheet, when you copy text, graphics, or other page elements, Dreamweaver copies those elements and any class style definitions used by that content. When you paste the HTML into another page, the styles are written into the <head> of that page. This feature, new in Dreamweaver 8, can save you some time, but won't solve all of your woes. It doesn't, for example, copy any tag styles you've created or most advanced styles you may create (see Section 6.6). So if you copy and paste some textsay, an <h1> tag styled with an h1 tag stylethe <h1> tag and its contents will paste into another page, but not the tag style. In addition, if a page uses an external style sheet, when you copy and paste text, the styles themselves don't go along for the ride. For example, if you copy a paragraph that has a class style applied to it and paste it into another document, the code in the paragraph is pasted (<p class="company"> for instance), but the actual "company" style, with all its formatting properties, isn't. The best solution is to use a common external style sheet for all pages on your site. That way, when you copy and paste text, all the pages share the same styles and formatting. So in the example above, if you copy a paragraph that includes a class styleclass="company"into another page that shares the same style sheet, the paragraphs look the same on both pages. |