Chapter 9: External Style Sheets and CSS Code | Microsoft Expression Web For Dummies

An external style sheet is a file that contains no content of its own-just a specially arranged list of your site's style rules. When you create an external style sheet to hold your page's formatting instructions, you get to experience the true timesaving benefit of using CSS in your Web site. All of a sudden, your styles have moved beyond the realm of formatting a single page-in a few steps, you can apply these styles to any page in your Web site.

External style sheets are especially useful if more than one author works on a site. Because the site's formatting instructions are stored in the style sheet, individual authors can concentrate on the page's content and can later attach the style sheet to take care of the stylistic details.

In this chapter, we cover what you need to know to create and attach style sheets to your Web pages, as well as some skills for getting comfortable with style sheet code (which is slightly different from HTML). We also help you take a look at some of the style sheets included in one of the Expression Web template Web sites so that you can get an idea of how to organize styles in your own, homemade style sheets.

Using External Style Sheets

The basic process for moving style rules from a Web page to an external style sheet is simple (we cover each of these steps in detail in the sections that follow):

Create a new, blank style sheet file (basically, an empty page with a special extension that identifies it as a style sheet).
Attach the style sheet file to your Web page (we explain what attach means a bit later).
Move the style rules embedded in the Web page to the style sheet file.

After you move your styles to an external style sheet, you can continue to perform the following tasks (which we cover in detail in Chapter 7):

Apply style rules to content on your Web page
Create and save new style rules
Change existing style rules

Tip

If you already have an existing style sheet and you want to use it in your Web site, import it into your Web site first and then follow the instructions in the "Attaching an external style sheet to a Web page" section, later in this chapter. If you're not sure how to import a file into your site, see the section about adding existing files to a Web site in Chapter 1.

Creating a new style sheet

Creating a new style sheet is easy. To do so, follow these steps:

Choose File New CSS.

Or, on the Common or Standard toolbar, click the New Page down-arrow button and choose CSS.

A blank CSS file opens in the editing window, with Untitled_1.css displayed on its tab, as shown in Figure 9-1.

Figure 9-1: New, blank style sheet file.
Choose File Save As.

The Save As dialog box appears, and Untitled_1.css appears in the File Name text box.
In the File Name text box, enter a name for your CSS file.

As with other files in your Web site, you should stick to one-word filenames in all lowercase letters. You can cheat a little by using the underscore (_) or hyphen (-) to separate words.

Warning
Make sure that you don't erase the .css extension. If you do, Expression Web doesn't know that it's a style sheet file.
Click Save.

The style sheet appears in the Folder List task pane with the name you gave it. The name also appears on its tab in the editing window.

Attaching an external style sheet to a Web page

When you attach an external style sheet to a Web page, you're basically putting a "note" inside the Web page that tells the browser to look inside the style sheet file for style rules that control the Web page's formatting.

You can attach a style sheet to a Web page in several ways. Attaching an external style sheet to a single Web page is a simple drag-and-drop operation. Attaching an external style sheet to more than one Web page is slightly more involved.

To attach a style sheet to a single Web page that's located inside the open Web site, follow these steps:

Open the page to which you want to attach the style sheet.
From the Folder List task pane, drag the icon for the style sheet file into the page's Design view.

The style sheet filename appears as a heading in both the Apply Styles and Manage Styles task panes.

If the style sheet contains predefined style rules, they appear in the Apply Styles task pane, in the Manage Styles task pane (under the style sheet filename), and in the CSS Properties task pane.
Save the Web page to which you attached the style sheet.

To attach a style sheet to all pages in the open Web site, follow these steps:

In the Manage Styles task pane or the Apply Styles task pane (or on the Style toolbar or the Style Application toolbar), click the Attach Style Sheet button.

You can also choose Format CSS Styles Attach Style Sheet.

The Attach Style Sheet dialog box appears.
In the URL text area, enter the path and filename of the style sheet you want to attach.

Or click the Browse button and, in the Locate Style Sheet dialog box, navigate to the location of the style sheet, select it, and click Open. You return to the Attach Style Sheet dialog box. The URL text area shows the path and filename of the style sheet.
To attach the style sheet to all pages in the current Web site, click the All HTML Pages option.

Keep the Attach As option set to Link. This option creates a link to the external style sheet in the <head> section of the Web page or pages. (We show you what a link to an external style sheet looks like in Chapter 7.)
Click OK.

A message box may appear, warning you that these links will overwrite all the selected pages' style sheet links. Because you're attaching style sheets for the first time, there are no existing style sheet links.
In the message box (if it appears), click the Continue button.

The style sheet filename appears as a heading in both the Apply Styles and Manage Styles task panes in all pages in the open Web site.

If the style sheet contains predefined style rules, they appear in the Apply Styles task pane, in the Manage Styles task pane (under the style sheet filename), and in the CSS Properties task pane.

To attach a style sheet to selected pages in the open Web site, follow these steps:

In the Folder List task pane, hold down the Ctrl key and click the page icon of each page to which you want to attach the style sheet.
In the Manage Styles or Apply Styles task pane (or on the Style or Style Application toolbar), click the Attach Style Sheet button.

You can also choose Format CSS Styles Attach Style Sheet.

The Attach Style Sheet dialog box appears, as shown in Figure 9-2. The Selected Page(s) option is selected.

Figure 9-2: The Attach Style Sheet dialog box.
In the URL text area, enter the path and filename of the style sheet you want to attach.

Or click the Browse button and, in the Locate Style Sheet dialog box, navigate to the location of the style sheet, select it, and click Open. You return to the Attach Style Sheet dialog box. The URL text shows the path and filename of the style sheet.

Keep the Attach As option set to Link.

This option creates a link to the external style sheet in the <head> section of the Web page or pages. (We show you what a link to an external style sheet looks like in Chapter 7.)
Click OK.

A message box appears, telling you that the files were updated.
In the message box, click the Close button.

The style sheet filename appears as a heading in both the Apply Styles and Manage Styles task panes in all pages in the open Web site.

If the style sheet contains predefined style rules, they appear in the Apply Styles task pane, in the Manage Styles task pane (under the style sheet filename), and in the CSS Properties task pane.

Moving internal (embedded) styles to an attached style sheet

After you attach an external style sheet to a Web page, you can move any internal style rules embedded in the <head> section of the page to the external style sheet. (If you're not sure what an internal style is, see Chapter 7.) Why CSS is such a big deal: If the external style sheet is attached to other pages, those styles become available to the other pages as well.

Searching out style sheets

The Web contains a treasure trove of style sheets you can grab and use in your site. (We list some sources in Chapter 16.) Delving into style sheets created by professional Web designers and CSS experts is a great way to figure out how to use styles to create effects you want to use on your own pages. If you use someone else's style sheet, however, make sure that you're not violating the license agreement under which the style sheet is offered. Many Web sites offer downloadable style sheets as part of their CSS tutorials, and others specify that you can use the style sheets for your own, noncommercialuse. If you're not sure whether the way you want to use the style sheet com-plies with the style sheet creator's intended use, contact the Web site's owner and ask.

Always make sure that the style sheet you use sticks to valid CSS code. Most sites that offer style sheets for download use catch phrases such as "valid" or "code that validates" or "standards-compliant CSS" to state that their style sheets are valid. If you're unsure, you can always run the style sheet through the World Wide Web Consortium's CSS Validation Service at http://www.jigsaw.w3.org/css-validator.

To move an internal style (or styles) to an external style sheet, follow these steps:

In the Manage Styles task pane's CSS Styles list, scroll to the location of the style rule you want to move and click to select it.

If the external style sheet already contains styles, the open page's styles are located at the bottom of the list, under Current Page.

If you want to move more than one style rule, hold down the Ctrl key while you click to select each one.

Drag the styles into the section of the list under the heading for the external style sheet file.

A gray line shows the location where the style (or styles) will land when you release the mouse button.

If the styles aren't in the order you want, drag each style up or down the list until its location suits you.

Warning

Some styles need to appear in a particular order in a style sheet (such as hyperlink pseudo classes, which must appear in this order: a:link, a:visited, a:hover, a:active). Also, order matters if style rules collide; style rules collide when two rules set the same property for the same bit of content, but each style rule's property has a different value. (For example, if one rule sets paragraph text to red, and another one sets it to blue, the style rule farther down in the style sheet, which is closest in the page's code to the paragraphs, wins.) Chapter 7 introduces some of these basics, or check your favorite CSS reference manual for more information.

When you're done moving styles, click the Save button.

The Save Embedded Files dialog box appears each time you make changes to the external style sheet. Click Save to save changes to the style sheet file.

Tip

Working with styles stored in external style sheets is exactly like working with internal styles, and the page formatting doesn't change when you move the styles into an external style sheet. Refer to Chapter 7 to find out how to create new styles, modify existing styles, delete styles, or remove styles from content.

Attaching multiple style sheets to Web pages

You can attach more than one style sheet to a page (or pages) in a Web site, and when you do so, the style rules located in all attached style sheets are available to format page elements. The benefits don't come without an extra layer of complication, however. Using multiple style sheets can get tricky if a duplicate style rule exists in both style sheets and must duke it out. For example, what if one style sheet contains a rule that sets all paragraph text to red and the other contains a rule that sets all paragraph text to blue? Which rule wins out?

GLANCE AT THE CODE

CSS itself conforms to a set of rules that determine which rules take priority. Sometimes a style rule wins because of where it's located in the "cascade" of style sheets attached to the Web page. This code example shows a Web page with two style sheets attached to it:

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

The style sheet listed second is farther down in the cascade of style sheets (and closer to the actual content; remember that browsers are reading the code, and the second line of code is closer to the page's content), so the style rule located in styles2.css would win.

The rules of CSS are involved enough that we can't do the topic justice here. Refer to your favorite CSS reference for more information about how style rules interact with one another. We list some of our favorite resources in Chapter 7.

If a style property's value is overridden by another rule, a red line is drawn through the property in the CSS Properties task pane, as shown in Figure 9-3. If you hover your cursor over the crossed-out style property, a helpful tip pops up, telling you what's going on.

image from book
Figure 9-3: Overriding a style property.

To attach multiple style sheets to the current page or to all pages in the currently open Web site, follow these steps:

Choose Format CSS Styles Manage Style Sheet Links.

The Link Style Sheet dialog box appears, as shown in Figure 9-4.

Figure 9-4: The Link Style Sheet dialog box.
To link the style sheets to only the current page, select the Current Page option; to link to all pages in the open Web site, select the All Pages option.
To select a style sheet to attach, click the Add button.
In the Select Style Sheet dialog box that appears, navigate to the style sheet file, click to select it, and then click OK.

The Select Style Sheet dialog box closes, and the style sheet appears on the URL list in the Link Style Sheet dialog box.
Repeat Steps 3 and 4 to add all style sheets you want to attach.

Style sheet links appear in the Web page's <head> section in the same order they appear in the URL list. Click the Move Down and Move Up buttons to change the order of individual style sheets.

To remove a style sheet from the list, click it and then click the Remove button.
After you arrange the style sheets in the order you want them, click OK.

If you're attaching the style sheets to all pages in the Web site, a message box appears, warning you that these links will overwrite all the selected pages' style sheet links. Because you're attaching style sheets for the first time, there are no existing style sheet links, so it's not a problem.
In the message box, click the Continue button.

To attach multiple style sheets to selected pages, you begin as follows:

In the Folder List task pane, hold down the Ctrl key and click the page icon of each page to which you want to attach style sheets.
Choose Format CSS Styles Manage Style Sheet Links.

The Link Style Sheet dialog box appears. The Selected Pages option is selected.
Now, in the Link Style Sheet dialog box, you can start at Step 3 in the preceding set of steps.

Detaching a style sheet

If you find that you no longer want to use a style sheet in your Web site or on a particular page, you can detach it. If a page has more than one style sheet attached to it, you can specify which style sheet you want to detach. When you detach a style sheet, it gathers up all its style rules and they disappear from the style-related task panes. Your page elements revert to their original formatting.

To detach an external style sheet from a single page, follow these steps:

In either the Apply Styles or Manage Styles task pane, right-click the name of the style sheet you want to detach.
From the pop-up menu that appears, choose Remove Link.

A message box appears, asking you to confirm deleting the style sheet link.
Click Yes to close the message box and then save your page.

To detach multiple style sheets or detach a single style sheet from multiple pages, follow these steps:

If you want to detach a single style sheet or multiple style sheets from selected pages, in the Folder List task pane, hold down the Ctrl key and click the icon for each page whose style sheet (or sheets) you want to detach.

If you want to remove style sheets from a single page or all pages in your site, go on to Step 2.
Choose Format CSS Styles Manage Style Sheet Links.

The Link Style Sheet dialog box appears. The URL area lists the style sheets attached to the selected pages.
Choose the option that corresponds to the pages from which you want to detach the style sheet (or sheets).

Choose the All Pages option to detach the style sheet or style sheets from all pages in the open Web site.

Choose the Current Page option to detach the style sheet or style sheets from only the current page.

If you highlighted pages in the Folder List task pane in Step 1, the Selected Page(s) option is already selected.
In the URL list, click the name of the style sheet you want to detach and then click the Remove button.

If necessary, repeat this step to remove other style sheets from the list.
Click OK.

If you chose to detach a style sheet (or style sheets) from all pages, a message box appears, warning you that existing style sheet links will be overwritten.
In the message box, click the Continue button.

Tip

Sometimes it's handy to temporarily unlink a style sheet from a page. This option is especially useful for troubleshooting page formatting when you have multiple style sheets attached to a page. Unlinking one of the style sheets allows you to see which style sheet is producing which formatting effects on your page. To temporarily unlink a style sheet, in Code view of the Web page, scroll up to the <head> section and locate the style sheet link. Change the style sheet's filename to a bogus filename. For example, if your style sheet is named styles.css, change it to stylesx.css. Save the page and view it without the style sheet. When you're ready to reattach the style sheet, change the style sheet's filename back to its real name.

Attaching a style sheet to another style sheet

Rather than attach multiple style sheets to a Web page, you can attach a style sheet to another style sheet. This option is especially useful if a generic style sheet contains styles you use in all your Web sites and you don't want to retype them each time you start a new site. Attaching the more generic style sheet to a more specific style sheet gives your site access to both sets of styles.

To attach a style sheet to another style sheet, follow these steps:

Open the style sheet to which you want to attach another style sheet.
Choose Format CSS Styles Attach Style Sheet.

The Attach Style Sheet dialog box appears. Import is selected as the Attach As option. Styles from the attached style sheet are "imported" into the existing style sheet.
In the URL text box, type the name and path of the style sheet you want to attach. Or click the Browse button and, in the Select Style Sheet dialog box that appears, navigate to the style sheet file, click to select it, and then click the Open button.

The Attach Style Sheet dialog box appears again, with the style sheet filename and path in the URL text box.
Keep the Attach To option set to Current Page.
Click OK.

GLANCE AT THE CODE

This code appears at the top of the style sheet, indicating that it is importing styles from the other style sheet:

 @import url('stylesheet. CSS')

Tip

The Web site templates that come with Expression Web all use several layers of style sheets, where a style sheet that defines layout styles is attached to a formatting style sheet that is then attached to a Web page (which happens to be a Dynamic Web Template; we talk about that topic in Chapter 11). Style rules cascade from one style sheet to the next, down to the actual page. We talk about using styles for page layout in Chapter 8.