Dreamweaver in a Nutshell-Dreamweaver in a Nutshell

10.3 Stylesheets

A stylesheet is simply a collection of CSS styles (formatting rules). Stylesheets do not appear in the CSS Styles panel, but some styles defined within them do. Stylesheets are accessed using the Edit Style Sheet dialog box, shown in Figure 10-2, and accessed via Text CSS Styles Edit Style Sheet.

Figure 10-2. The Edit Style Sheet dialog box

The Edit Style Sheet dialog box can be confusing; it displays the internal styles defined in the embedded stylesheet but displays only the names of external stylesheets (not the styles within them). External stylesheets are indicated in the dialog box by the word "(link)" or "(import)" after their names. If you highlight the name of an external stylesheet in the list, however, the lower portion of the dialog box shows the styles defined within it.

Let's look at both embedded and external stylesheets to avoid confusing stylesheets with the styles that they contain.

10.3.1 Embedded Stylesheets

An embedded stylesheet (a.k.a. document stylesheet) is merely a collection of styles included in a <style> tag within the head portion of an HTML document (Example 10-3 and Example 10-5 both illustrate embedded stylesheets). For now, just recognize that any CSS styles stored within an HTML document are collectively referred to as an embedded stylesheet. The name is really a misnomer; there is no separate "sheet," just an HTML document with extra stuff in it (obviously, there can be only one embedded stylesheet per HTML document).

We'll see how to add a new style to a document's embedded stylesheet later. Because the embedded stylesheet doesn't have a separate name (remember, it's contained in the same .html file as your HTML code) Dreamweaver displays its individual styles in the Edit Style Sheet dialog box.

Sometimes you'll import HTML documents that already contain CSS styles. Microsoft Word 2000 and XP convert Word document styles to CSS styles when using Word's File Save As HTML option. If you import such a document into Dreamweaver using File Import Import Word HTML, you will be prompted to clean up the HTML using the Clean Up Word HTML dialog box. Use the Detailed tab of this dialog box to control the way in which Dreamweaver modifies Word's CSS styles. (HTML documents exported from Word 97/98 don't use CSS styles.)

Embedded stylesheets cannot be shared by multiple documents. Therefore, use external stylesheets to hold styles that you expect to use with multiple web pages. To create an external stylesheet from existing embedded styles, use Text CSS Styles Export CSS Styles.

Also note that an HTML document can contain an embedded stylesheet and also include links to one or more external stylesheets (as seen in Figure 10-1). Speaking of external stylesheets, let's learn more about them.

10.3.2 External Stylesheets

An external stylesheet is a collection of CSS styles stored in a separate external .css file (not an HTML file).

External stylesheets allow you to use the same stylesheet for multiple web pages, making it easy to apply design changes across a site.

You can link to an existing external stylesheet using the Link button in the Edit Style Sheet dialog box (see Figure 10-2). This button opens the Link External Style Sheet dialog box shown in Figure 10-3.

Figure 10-3. The Link External Style Sheet dialog box

You'll notice that there are two ways to link to an external stylesheet using this dialog box's Add As option. Selecting the Link radio button causes Dreamweaver to use a <link> tag to point to the external stylesheet you've chosen, such as:

<link rel="stylesheet" href="pswissy.css" type="text/css">

Surprisingly, selecting the Import radio button does not copy the external sheet's styles to your embedded stylesheet; instead, it causes Dreamweaver to use the @import directive instead of the <link> tag to reference your external stylesheet. The two variants are shown in Example 10-1. (You would not ordinarily mix the two methods of linking to external stylesheets; we do so for comparison purposes only. Notice that both variants are stored within the head of the HTML document. Furthermore, notice that the @import directive is within the <style> tag, whereas the <link> tag is not.)

Example 10-1. References to imported and linked external stylesheets appearing in the HTML document

<head>
<title>My Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url(stylesheet1.css);
-->
</style>
<link rel="stylesheet" href="stylesheet2.css" type="text/css">
</head>

You will ordinarily use the <link> alternative. In fact, using Text CSS Styles Attach Style Sheet bypasses the Link External Style Sheet dialog box entirely and assumes you want to use <link> instead of @import.

The @import CSS2 directive is supported in IE4+ and Opera 3+, but will be ignored by NN4. CSS stylesheets (.css files) can themselves contain @import directives linking to other .css files.

You can insert a <link> tag manually by using Insert Head Tags Link and specifying stylesheet for the Rel field; Dreamweaver will automatically set the Type field to text/css. To edit an existing <link> tag's properties, double-click the corresponding Link icon in the Document window's Head Content bar (View Head Content).

If you try to open a .css file in Dreamweaver, Dreamweaver presents a dialog box similar to the one shown in Figure 10-4. The dialog box's title indicates the name of the stylesheet being edited (in this case Dreamweaver's help.css stylesheet). This dialog box can also be accessed by holding down the Ctrl key (Windows) or Cmd key (Macintosh) when clicking the Edit Style Sheet icon in the CSS Style panel.

Figure 10-4. Listing styles in an external stylesheet

There are many ways to create external stylesheets, including:

Using File Export Export CSS Styles (or Text CSS Styles Export CSS Styles) to export a new external stylesheet. Dreamweaver exports the styles defined within the <style> tag (it exports the CSS styles, but not the HTML tags). Existing @import directives, which are stored within the <style> tag, are exported as well. Any <link> tags, which reside outside the <style> tag (see Example 10-1), are not exported.
Creating a new style using the New Style dialog box (see Figure 10-5) and choosing Define In: (New Style Sheet File). Dreamweaver creates a new external stylesheet and automatically links it to the current document.
Creating a .css file by hand in any text editor. Don't include any HTML tags, just the style rules, as shown in Example 10-2.

Example 10-2. An excerpt from the Dreamweaver 4\Help\UsingDreamweaver\htm\help.css external stylesheet

p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px}
td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px}
pre { font-family: "Courier New", Courier, mono; font-size: 11px}
.subhead2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 
12px; font-weight: bold; line-height: 14px}
.grey { color: #666666 }
.caption { color: #666666 }

You should store .css files closest to where they'll be needed. If used in a limited section of your site, you may store them in a subfolder near the related .html pages. If used for your entire site, consider storing them in a folder named CSS within the site's root folder.