Performing Common Style-Rule Maneuvers

If you're a complete newcomer to CSS, the style rules that Expression Web generates can help you understand how CSS works. As you become more comfortable using styles, you can graduate to writing your own style rules. Eventually, you may even find it easier to do some of your work in Code view.

In this section, we cover the basics of dealing with automatically generated styles as well as how to write your own style rules from scratch. We also show you how to apply style rules to different elements on your page and how to modify and delete styles.

REMEMBER 

When we refer to a style rule's name, the name matches its selector. For example, the style rule named .style1 is a class-based style rule that targets any element with class=“style1” in its tag. The style rule named h1 is an element-based style rule that targets all first-level headings (<h1>) in the page. The style rule named #copyright is an ID-based style rule that targets the single HTML element on a page that contains id=“copyright” in its tag.

Renaming a class-based style

Because Expression Web writes class-based styles for almost all formatting you do, your Web page can quickly accumulate a bunch of sequentially numbered style rules. And .style1, .style2, and .style3 don't exactly tell you anything useful about what they do. Fortunately, Expression Web makes it easy to rename class-based style rules.

When you rename a class-based style in Expression Web, you have the option of also renaming the class attribute in the HTML element so that the style rule still knows what it's supposed to format. (Why this is optional we don't know, because you must do it for the style rule to work). To rename the class attribute, follow these steps:

1. In the Apply Styles task pane, click the drop-down arrow to the right of the style you want to rename.

   Or, in the Manage Styles task pane, right-click the style name.

2. From the pop-up menu that appears, choose Rename Class Stylename.

   The Rename Class dialog box appears, as shown in Figure 7-14.

   
   Figure 7-14: The Rename Class dialog box.

   The style rule's location appears in the Defined In area. For an automatically generated style, this location is always the open Web page. The Current Name area displays the class name.

3. In the New Name text box, type a new name for the style.

   Tip 

   When choosing names for class-based styles, keep these tips in mind:

   • Use words that describe the purpose of the style rather than its properties. For example, a style that sets the text color to red should not be named redtext because you may change your mind and decide to make that text green later on. A better name is alert or warning if the purpose of the red text is to alert the Web visitor.

   • Use a single word for the style name.

   • Use all lowercase letters.

4. Leave the Rename Class References in This Page check box selected.

   If you deselect this check box, Expression Web changes only the name of the style rule selector (.stylename to. newname). The class= “stylename” attributes in the HTML tags don't change to match the new selector, and the style rule doesn't know which page element (or elements) to style. If you inadvertently deselect this check box, the easiest way to fix it is to edit your page's code directly. In the code, find the element with the old class attribute value, and change it to match the style name. Chapter 14 covers how to work in your page's code.

5. Click OK.

   REMEMBER 

   Follow these instructions to rename any style rules and their associated class attributes, not just the ones that Expression Web automatically generates.

   Warning 

   If you were to apply some other formatting to an element whose automatically generated style you renamed, Expression Web doesn't add the new style property to the renamed style. Instead, it creates a brand-new automatic style named style x and gives the element the new class attribute class= “style x “. If you want to add the style property to your renamed style, follow the instructions for modifying existing styles later in this chapter.

Removing styles from page elements

When you're experimenting with formatting on your Web page, you will probably end up with a bunch of automatically generated class-based styles that you don't need. Not a problem. You can easily clear the class-based styles that Expression Web generates from an element on your page and delete the associated style rules in one fell swoop. To do so, select the element whose style (or styles) you want to clear and, in the Apply Styles task pane, click Clear Styles.

Tip 

The Clear Styles command can also clear inline styles from a page element's HTML tag.

If you already renamed an automatically generated style, Clear Styles removes the class attribute from the page element but leaves the style rule in the <head> section of your Web page. If you want it gone from your page, you have to delete it separately. (We tell you how later in this chapter.)

Tip 

The Quick Tag Selector bar can help you make sure that you're selecting the right HTML element. In Figure 7-15, suppose that you want to clear the style rule named style1, which makes the word select underlined. You know that the correct tag is selected because the Quick Tag Selector bar displays <span. style1> (a class-based style rule applied to a span tag with class= “style1”).

Figure 7-15: The Quick Tag Selector bar shows you exactly which element is selected.

Removing a class or an ID from an element

Deleting a class-or ID-based style doesn't remove any associated class or id attributes and their values in an element's HTML tag. You have to remove these attributes separately. Here are four quick ways to remove a class or id attribute from a selected page element:

• On the Quick Tag Selector bar, click the drop-down arrow next to the tag you want to edit, and then choose Edit Tag. In the Quick Tag Editor that appears, select the class or id attribute and value (for example, class=“style x “), and then press the Delete key.

• Pop open the Style toolbar (choose View Toolbars Style) and, in the Class or ID field, select the value and press the Delete key.

• In the Tag Properties task pane, select the class or id value and press the Delete key.

• In Code view (or the code portion of Split view), select the class or id attribute and its value and press the Delete key.

Creating a style rule from scratch

After you get the hang of how your HTML and CSS styles work together, you can write your own style rules by using the tools in Expression Web. Expression Web makes it easy to write any kind of style rule-element-based, class-based, or ID-based. You can specify whether the style rule is inline, internal, or saved to an existing external style sheet. When you write a new style from scratch, you have access to all the formatting properties that are scattered throughout the various Expression Web dialog boxes and tool-bar buttons in one place so that you can pick the exact ones you want your style rule to include.

When you create a new class-or ID-based style rule, you also have the option of telling Expression Web to create the style rule and add the class or id value to the element or item selected in Design view. Or, you can add class and id values separately (see the section "Style toolbar," earlier in this chapter, to find out how to add class and id values to your page elements, or refer to Chapter 14 for instructions on working in the Expression Web Code view).

Tip 

When you create your own style rules, it's helpful to have a good Cascading Style Sheet reference manual handy so that you can look up the purpose of any properties you aren't sure about. We give you some book suggestions at the beginning of this chapter, in the sidebar "Miles of styles." Also, see the Cheat Sheet, inside the front cover, for a list of the most commonly used style properties.

To create a new internal or inline style rule, follow these steps:

1. Do one of the following:

   • Choose Format New Style.

     • In the Apply Styles or Manage Styles task pane, click New Style.

   • On the Style toolbar (choose View Toolbars Style); click the New Style button.

     The New Style dialog box appears, as shown in Figure 7-16.

   
   Figure 7-16: The New Style dialog box.

2. In the Selector text box, tell Expression Web what the style rule will target (the selector) by doing one of the following:

   • To create an element-based style rule, select the HTML element that the style rule will apply to from the drop-down list. For example, to create a rule to set properties for all first-level headings on the page, select h1.

   • To create an inline style rule, select (inline style) from the drop-down list.

   • To create a class-based style rule, type a period (.), and then type the class value. (Make sure that no space appears between the period and the class value.) For example, if you want to target all HTML elements that contain the class value warning in their tags, type .warning.

     If you want Expression Web to also add the class value to the selected HTML element, select the Apply New Style to Document Selection check box. In the preceding example, Expression Web would create the style rule .warning and add class=“warning” to the selected element on your page.

   • To create an ID-based style rule, type the # character (press Shift+3), and then type the id value. (Make sure that no space appears between the period and the id value.) For example, if you want to target an HTML element that contains the id value copyright in its tag, type #copyright.

     If you want Expression Web to also add the id value to the selected HTML element, select the Apply New Style to Document Selection check box. In the preceding example, Expression Web would create the ID-based style rule #copyright and add id=“copyright” to the selected element on your page.

   • If you know how to create complex selectors or if you want to target multiple HTML elements, type the selector in the Selector text box. For example, to create a style rule that targets all heading levels, type h1, h2, h3, h4, h5, h6.

3. To save the style rule in the open page (an internal style rule), leave the Define In option set to Current Page.

   This option isn't available if you're creating an inline style because an inline style is saved inside the HTML element's tag.

   If you choose to save the style to an external style sheet (either a new style sheet or an existing style sheet), see the additional steps a little later in this section.

4. To choose the properties and their values, first click the type of property you want to set in the Category list, and then, from the displayed properties, set values for the ones you want your style rule to include.

   The New Style dialog box contains all possible CSS properties, grouped by category. See Table 7-2, a little later in this section, for more information about which type of properties each category contains.

   Table 7-2: Style Categories and Their Property Types
   Open table as spreadsheet

   Category	What the Property Type Controls
   Font	The way the characters (the letters, numbers, symbols, and special characters) look on the page. These properties correspond to the buttons and commands on the Font tab (choose Format Font) in the Font dialog box and to the font-formatting buttons on the Common and Formatting toolbars.
   Block	The spacing between lines of text within a block of text (a paragraph or heading), the spacing between letters in words and between words, and the alignment (indenting, centering, or right or left alignment) of a block of text on the page. These properties correspond to the commands in the Paragraph dialog box (choose Format Paragraph), the Character Spacing tab (choose Format Font) in the Font dialog box, and the paragraph alignment and indent buttons on the Common and Formatting toolbars.
   Background	The way the background of the selected element looks and behaves: its color, the image it uses, whether it repeats and in which direction (horizontally, vertically, or both), and whether the background is fixed in one position or scrolls with the page. These properties correspond to the commands on the Shading tab in the Borders and Shading dialog box (choose Format Borders and Shading) and on the Highlight button on the Common and Formatting toolbars.
   Border	The border style (solid, dashed, dotted, or grooved), width, and color of the selected element. These properties correspond to the commands on the Borders tab in the Borders and Shading dialog box (choose Format Borders and Shading) and on the Outside Borders button on the Common and Formatting toolbars.
   Box	Margins and padding properties, the amount of space between the contents of an element and its border (padding) and the amount of space between the border and other surrounding elements (margins). To set padding and margin properties, you must understand the concept of the CSS box model. Chapter 8 gives you more information about margins and padding.
   Position	The dimensions (width and height) of page elements-headings, paragraphs, and other items, such as navigation bars and footers, defined as block-level elements using <div> tags. These properties also control an element's position on the page. We talk more about these properties in Chapter 8.
   Layout	The way that elements on the page act and interact with each other on the page. For example, you can control how elements wrap around each other by using the float property (we talk about using float for aligning a picture with surrounding text in Chapter 5) or whether an element should always appear below its preceding elements (clear). We talk about these properties in Chapter 8.
   List	Ordered and unordered lists. These properties let you set the type of numbering or bullet style you use (or turn off bullets and numbers) and specify how a list is positioned on the page. These properties correspond to the commands in the Bullets and Numbering dialog box (choose Format Bullets and Numbering).
   Table	A table's position on a Web page, and the appearance of table cells, caption, and borders (although not the color and line style-those properties are set in the Borders category).

   The Preview area gives you a peek at what the selected element will look like as you select properties and set their values.

   The Description box shows you the style declarations as they will appear in the code.

5. Continue setting properties and their values by clicking the type of property in the Category list and setting values for the properties you want to use.

   If a category contains a defined property, the category name appears in bold type in the Category list. In Figure 7-17, properties are defined in the Font, Background, and Box categories.

   
   Figure 7-17: Categories with defined properties appear in bold.

6. When you are finished setting properties, click OK to close the New Style dialog box and save the style rule.

If you selected the Apply New Style to Document Selection check box, the selected element gets styled as defined in the style rule. Notice also that the new style rule appears in both the Apply Styles and Manage Styles task panes. The Apply Styles task pane shows the style rule with its formatting applied, whereas the Manage Styles task pane simply lists the style.

If you choose to save the new style rule to an external style sheet, you have a few additional steps to go through, depending on whether you chose a new style sheet or an existing style sheet in the Define In list box. (Refer to Step 3 in the preceding set of steps).

If you chose to save the style rule to a new style sheet (in the Define In list box), Expression Web pops open a dialog box asking whether you want to attach the new style sheet for the new style to your open page. Follow these steps:

1. Click Yes to save the new style sheet.

   Expression Web creates a new style sheet named Untitled_1.css, saves the new style in it, and attaches it to your page.

2. Save your page. (We tell you how in Chapter 2.)

   The Save As dialog box opens and prompts you to save the new style sheet file with a new name.

3. In the File Name text box, type the new name without deleting the extension .css.

   Try to use one-word, all-lowercase filenames for style sheets.

4. Click OK to save the style sheet.

If you chose to save the style rule to an existing style sheet (in the Define In list box), follow these steps:

1. In the URL text box in the New Style dialog box, type the name and path of the style sheet.

   Or, click the Browse button and, in the Select Style Sheet dialog box that appears, use the options to navigate to the style sheet you want to save the new style rule in. Click the style sheet name to select it and then click Open.

   Warning 

   If you want to save the style rule to a style sheet that isn't located in your open Web site, you should import the style sheet into the Web site first, before saving new styles to it. We tell you how to import files into a Web site in Chapter 1.

   The name and path of the style sheet file appear in the URL text box.

2. Click OK to save the new style rule.

   Expression Web opens the style sheet in which you saved the style rule in the editing window, but doesn't make it the active window.

3. Click the style sheet tab to make it the active window, and click the Save button to save the style sheet.

We talk more about external style sheets in Chapter 9.

Tip 

If you created an element-based style rule, (such as a style rule for all paragraphs), those elements receive their new formatting as soon as you click OK to save the style rule.

Tip 

By the way, in Design view, if you click at the end of the text in the styled paragraph and press Enter, the paragraph style is carried over to the next paragraph. You may or may not want that to happen. If you don't want the style to carry over to the next paragraph, click in Design view below the selected paragraph rather than press the Enter key. (We show you how to apply and remove styles later in this chapter.)

Copying style properties to a new rule

Tip 

Just as you can use a Web page as the basis for another Web page, you can use a style rule as the basis for another style rule. You can then save time if you want to create a new style rule that contains some of the same properties as another rule.

To copy style properties from an existing rule to a new rule, follow these steps:

1. In the Apply Styles task pane, click the drop-down arrow to the right of the style rule you want to use as the basis for the new style rule and, from the menu that appears, choose New Style Copy.

   The New Style dialog box appears; stylename Copy appears in the Selector field. The original style rule's properties and values appear in each category.

2. In the Selector field, type the style rule selector you want to use, or choose an HTML element from the drop-down list.

3. In the Define In list box, tell Expression Web where you want the new rule defined.

   We cover how to use the Define In list box earlier in this chapter, in the section "Creating a style rule from scratch."

4. If you want the new style rule to apply to an element selected in the Web page, select the Apply New Style to Document Selection check box.

   If you just want to create the rule without applying it, leave this box deselected.

5. Set new properties or change values for the properties already set by the original rule by clicking a property category in the Category list box and selecting the properties you want the rule to include.

6. When you finish defining the new rule, click OK to save it.

REMEMBER 

There's no limit to how many style rules you can have and use. And, you can apply multiple styles to a single element. When you're first getting used to formatting your page elements with styles, you may find it easier to create many style rules with only a few properties apiece. As you gain style prowess, you may find that you prefer to create fewer style rules with more style properties.

Applying style rules to page elements

After you create a style rule you like, you can apply it to other elements on your page. You can apply the same rule to multiple elements, and you can apply multiple rules to a single element or to multiple elements.

To apply style rules to a single page element or multiple elements, follow these steps:

1. In Design view or Code view, select the element to which you want to apply the style.

   To select multiple elements, hold down the Ctrl key while clicking each element.

2. In the Apply Styles task pane, click the style rule you want to apply to the element.

3. To apply another style rule to the selected elements, hold down the Ctrl key and, in the Apply Styles task pane, click the next style rule.

Modifying an existing style rule

Did you change your mind about a style? Did you decide that you want green text rather than red? Expression Web makes it easy to modify your style rules.

To modify a style by using the Modify Style dialog box, follow these steps:

1. In the Apply Styles task pane, click the drop-down arrow next to the style rule you want to modify.

2. From the pop-up menu that appears, choose Modify Style.

   The Modify Style dialog box appears, as shown in Figure 7-18. The Modify Style dialog box displays all the properties and their values that are set by the rule.

   
   Figure 7-18: The Modify Style dialog box.

3. Make the changes you want to the style rule by selecting properties and setting their values.

   If you want to delete a property from the style rule, clear its value by deleting any information that appears in its value field.

   If necessary, change the rule's selector in the Selector field.

4. Click OK to save the changes.

5. Depending on where the style rule is located, do one of the following:

   • If the style rule is an internal style rule embedded in the open page (or if it's an inline style), save the Web page. (We tell you how in Chapter 2.)

   • If the style rule is defined in an external style sheet, save the page and, in the Save Embedded Files dialog box that appears, click OK to save changes to the style sheet file.

Deleting style rules

Delete any style rule that you no longer need. The process for deleting a style rule is almost the same, regardless of whether the style rule is embedded in the open Web page or located in an external style sheet.

To delete a style rule, follow these steps:

1. In the Apply Styles task pane, click the drop-down arrow next to the style rule you want to delete and, from the menu that appears, choose Delete.

   In the Manage Styles task pane, right-click the style rule you want to delete and then choose Delete from the pop-up menu.

2. In the message box that appears, asking you to confirm deleting the style, click Yes.

   If the style you're deleting is located in an external style sheet, save the Web page that has the style sheet file attached to it. In the Save Embedded Files dialog box that appears, click OK to save changes to the style sheet.