Checking Out Your Style Tools | Microsoft Expression Web For Dummies

The Microsoft development team managed to make the Expression Web style tools relatively easy for beginners to use, yet flexible enough for more advanced users. Because Web designers like to work with styles differently, many of the style tools in Expression Web do the same thing by using slightly different techniques. As you get comfortable with using styles to format your page elements, you will most likely find your own favorite ways to do things with the Expression Web style tools.

In this section, we give you a brief overview of the different style tools and functions that we think are most useful. Some of them you were introduced to elsewhere. Others are tucked away, out of sight and ready to be called into service with a few clicks of the mouse.

REMEMBER

If you need quick information about these style tools as you're working in Expression Web and don't have this book handy, remember that you can access the help system by choosing Help Microsoft Expression Web Designer Help or pressing the F1 key.

Apply Styles task pane

The Apply Styles task pane (shown in Figure 7-8; choose Task Panes Apply Styles) shows you all the style rules that are working in the open Web page, including inline styles, internal style rules embedded in the page, and style rules that live in any external style sheets attached to the page.

image from book
Figure 7-8: The Apply Styles task pane.

REMEMBER

Because the styles appear in the list dressed in their formatting, the Apply Styles task pane is most useful for working closely with particular styles: creating new styles, modifying existing styles, and applying styles to page elements. Table 7-1 describes what the colored dots next to the style rules mean.

Table 7-1: Spotting the Dots in the Apply Styles Task Pane
Open table as spreadsheet
Dot	What It Indicates
Green	A class-based style rule
Blue	An element-based style rule
Red	An ID-based style rule
Yellow	An inline style rule
Circled dot	A style rule applied to at least one element in the open page

Here are some tips for using the Apply Styles task pane:

Hover your cursor over a style rule to view the complete style rule as it's written in your code so that you can glance at all the style properties it includes.
Click the drop-down arrow to the right of the style to display a menu of commands. These commands let you do such tasks as modify the style and copy style properties to a new style, in addition to many other style-related functions explained later in this chapter.
Click New Style to pop open the New Style dialog box and create a new style rule from scratch.
Click Attach Style Sheet to attach an existing external style sheet to the page.
Click the Options button to change the way styles are categorized in the list and to select which style rules to show. These choices let you customize the order and level of detail displayed in the Apply Styles task pane.
Select an element on your Web page, and then click a style rule to apply it to the selected element.

Manage Styles task pane

Like the Apply Styles task pane, the Manage Styles task pane reveals the styles operating in the page. You display this task pane, shown in Figure 7-9, by clicking the Manage Styles tab or by choosing Task Panes Manage Styles.

image from book
Figure 7-9: The Manage Styles task pane.

The styles appear only by name (although a preview of the selected style appears at the bottom of the task pane). Using this pane, you can apply styles in the CSS Styles list, create new styles, and modify existing ones. You can also attach an external style sheet.

Here are some tips for using the Manage Styles task pane:

Hover your cursor over a style rule to view the complete style rule as it's written in your code.
Right-click a style rule to display a pop-up menu of style-related commands that let you modify the style rule, copy its style information to a new style, or delete the style, to name a few.
Click New Style to pop open the New Style dialog box and create a new style rule from scratch.
Click Attach Style Sheet to attach an existing external style sheet to the page.
Click the Options button to change the way styles are categorized in the list, choose which style rules to show, and determine whether to display a preview area of the selected style.
Select an element on your Web page, and then click a style rule to apply it to the selected element.
Move a style rule somewhere else in the list by dragging it. The order in which styles appear in this list correspond to how they appear in either the external style sheet or the <head> section of the Web page. Changing the order here changes their order in the code, which is especially useful because some style rules must appear in a particular order (such as pseudo classes for hyperlink states, which must appear in this order: a:link, a:visited, a:hover, a:active).
Move a style rule from the current page to an external style sheet by dragging it from one section to the other in the CSS styles list. (We talk more about external style sheets in Chapter 9.)

CSS Properties task pane

The CSS Properties task pane, shown in Figure 7-10, packs a lot of information into a small piece of screen real estate. By default, the CSS Properties task pane hangs out in the lower-left corner, behind the Tag Properties task pane. (If you don't see it, choose Task Panes CSS Properties or Format CSS Properties).

image from book
Figure 7-10: The CSS Properties task pane.

In the top half of the task pane, under the heading Applied Rules, you see all the rules in use on the page, with the style rule applied to the selected element highlighted.
In the bottom half, you find every single CSS property you can set in Expression Web under the heading CSS Properties. This list indicates which properties are set in the style rule highlighted in the Applied Rules section.

The CSS Properties task pane can be a little intimidating at first, but after you get more comfortable working with styles, it's useful for viewing which style rules affect a particular element and how they interact with each other. If you're well versed in CSS, you may find that it's also a quick way to add or change style properties without having to use the Modify Style dialog box.

Here are some tips for using the CSS Properties task pane:

Click an applied rule at the top, and then scroll through the properties list to see which properties the rule contains, along with their values.
Click the Show Categorized List button to display properties in groups under a category header. These categories correspond to the categories in the New Style and Modify Style dialog boxes. (We explain how to use the New Style dialog box later in this chapter.)
Click the Show Alphabetized List button to sort properties alphabetically, from A to Z.
Click the Show Set Properties on Top button to group the properties used in a selected style rule at the top of the alphabetized list or the categorized list.
Click any element in your Web page, and click the Summary button. The CSS Properties list shows just the properties applied to the selected element. (If no style rule is applied to the element, the Summary button is blank.) Click a property, and Expression Web shows you the style rule that contains it in the Applied Rules section. Cancel Summary view by clicking the Summary button again.
If a property has a red line through it, another applied rule has the same property declaration. Hover your cursor over the red-lined property to see a pop-up tip.
Change or enter a property's value by clicking it in the CSS Properties list and then typing a value or clicking the drop-down arrow that appears and selecting a value from the list.
Click the small plus-sign button next to a style property to expand the list and show a more detailed breakdown of its values. For example, click the small plus-sign next to the border-width property to display border-top-width, border-right-width, border-bottom-width, and border-left-width, as shown in Figure 7-11.

Figure 7-11: Set individual properties for border width in the CSS Properties task pane.
Right-click in the CSS Properties list to display a pop-up menu of style-related commands.

Style toolbar

The Style toolbar, shown in Figure 7-12, performs some of the same tricks as the Apply Styles task pane, such as applying existing class or ID-based style rules to selected page elements, creating new styles, and attaching an external style sheet. To open the Style toolbar, choose View Toolbars Style.

image from book
Figure 7-12: The Style toolbar.

One useful function of the Style toolbar, however, is the ability to add a new class or id attribute to a selected page element. Adding a new class or id attribute from the Style toolbar doesn't create a matching style rule, so you have to create the style rule yourself.

Here are some tasks for which the Style toolbar comes in handy:

Add a new class to a page element: In Design view, select the HTML element to which you want to add the new class and then, in the Style toolbar's Class text area, type the class value. Press the Enter key to add the class.
Add a new ID to a page element: In Design view, select the HTML element to which you want to add the new ID and then, in the Style toolbar's ID text area, type the ID value. Press the Enter key to add the ID. You can also have Expression Web assign a unique ID to the selection by clicking the drop-down arrow and choosing Assign Unique ID. Expression Web creates a simple, sequentially numbered id value, however, such as p1. You're better off creating your own ID with a more meaningful name. IDs are most useful when you're using CSS to position page elements. We talk more about IDs in Chapter 8.
Apply an existing class-based or ID-based style rule to a page element:
Select the element to which you want to apply the style rule and then, from either the Class or ID drop-down list box, click the style name. Press the Enter key to apply the rule.
Remove a class or an ID from an element: Select the element from which you want to remove the class or ID (it may or may not have a style rule that targets it) and then, in the Class or ID text area, delete the class or id value. Press the Enter key.
Open the New Style dialog box: On the Style toolbar, click the New Style button.
Attach an existing style sheet to the open page: On the Style toolbar, click the Attach Style Sheet button. (We cover external style sheets in Chapter 9.)

TECHNICAL STUFF

You can also assign, change, or delete an element's class or id value by selecting the element and typing the value in the Tag Properties task pane, next to the attribute (class or id). If necessary, choose Task Panes Tag Properties to display the Tag Properties task pane.

Style Application toolbar

The Style Application toolbar, shown in Figure 7-13, is most useful after you're experienced enough with CSS to decide for yourself how you want your style rules written each time you format something on your Web page. We assume that working with raw CSS isn't at the top of your list, so for this feature we pass the buck to the Expression Web Help system. (To access Help, choose Help Expression Web Help or press F1.) To display the Style Application toolbar, choose View Toolbars Style Application or double-click Style Application: Auto in the lower-right portion of the status bar.

Figure 7-13: The Style Application toolbar.

Tip

If you plan on using Expression Web in manual-style writing mode, dock the Style Application toolbar at the top of the workspace window so that its options are accessible but not in the way.