Attaching a Style Sheet

It doesn't do you any good to create a style sheet if your Web pages don't know about it. In order for a Web page to use an external style sheet, that style sheet has to be attached to the Web page.

To attach a style sheet:

1.	Click the Attach Style Sheet icon at the bottom of the CSS Styles panel . or Right-click in the CSS Styles panel and choose Attach Style Sheet ( Figure 5.61 ). Figure 5.61. There are at least two ways to attach a style sheet from the CSS Styles panel.
2.	The Attach External Style Sheet dialog appears ( Figure 5.62 ). Click the Browse button to bring up the Select Style Sheet File dialog ( Figure 5.63 ). Navigate to the style sheet you just created, select it, and click OK. Figure 5.62. Choose which style sheet you want to attach to your Web page, and how you want to attach it. Figure 5.63. Choose which style sheet file to attach by browsing for it.
3.	Back in the Attach External Style Sheet dialog, select Add as Link if it isn't already chosen , and click OK to attach the style sheet. If your style sheet includes any rules that affect the active document, you'll see those changes reflected immediately.

Tips

• Looking at the All Rules pane of the CSS Styles panel ( Figure 5.64 ), you'll notice that your style sheet is now included, and all of its properties can be viewed .

  Figure 5.64. And here are all the styles your Web page can now access.

  

• You're offered a choice of using link or import to attach your style sheet. Each has its advantages: link works in more browsers, for instance, while import allows you to nest style sheets (i.e., you can attach a style sheet using import, and then that style sheet can include an import of another style sheet, and so on).

• You can use both link and import in the same document. That's a handy way to use two style sheets, where the link attaches a bare-bones style sheet and the import attaches a more complex style sheet that older browsers (such as Netscape Navigator) can't handle.

• When attaching a style sheet, you're also offered a choice of Media. Those choices include all, aural, braille, handheld, print, projection, screen, tty, and tv ( Figure 5.65 ). It's also acceptable to use no media type at all; in that case, the style sheet applies to all media types. And finally, you can also enter in a list of media types (comma-separated) if you want your style sheet to apply to some media types but not others.

  Figure 5.65. If you want your style sheet to only apply when the page is printed, here's where to set that.

  

• If you use set the media type for your style sheet, you can test it by choosing View > Style Rendering and picking which media type to view. When you do this, though, remember that few browsers offer full support for media types.