Recognizing Style Rule Geography
In the section "Understanding How Styles Cascade," earlier in this chapter, we explain how different types of style rules-internal (or embedded), external, and inline-take precedence over each other to apply a font to a heading. In this section, you take a look at what inline, internal, and external style rules look like in the Expression Web Design view and Code view. We show you a bit of code, and we also introduce you to the visual cues and workspace areas you use when working with styles in Expression Web.
| Tip | If you're completely new to CSS, this section makes you comfortable with what different types of style rules look like and how they appear in Expression Web. If you're already familiar with style rules and want to get right down to creating and modifying style rules, you may want to skip ahead to the section "Performing Common Style-Rule Maneuvers," later in this chapter. |
Internal (embedded) styles
An internal (or embedded) style appears in the <head> section of its Web page's HTML code, and thus internal style rules control formatting for only the elements on that page. You can't apply an internal style rule that's embedded in one page to an element on another Web page.
Most of the style rules that Expression Web writes automatically are internal class-based styles. (We explain class-based styles earlier in this chapter.) If you already fiddled around with formatting, you probably have a smattering of style rules sitting inside your page named style1, style2, and style3, for example.
Figure 7-4 shows a paragraph with an internal style applied to it. This example shows a typical style rule that Expression Web writes when you choose a font family for a paragraph.
Figure 7-4: A paragraph with an internal style rule applied.
Expression Web gives you information about the page's internal styles in a number of ways:
-
In Design view: Displays a little tab on the paragraph that says p.style1, indicating that this paragraph has a class attribute whose value is style1.
-
The Quick Tag Selector bar: Shows the paragraph tag with the class attribute <p.style1>.
-
The CSS Properties task pane: Shows the name of the style rule in the Applied Rules column and, under (Current Page), shows the paragraph tag <p.style1> exactly as it appears on the Quick Tag Selector bar.
-
In the CSS Properties list: Displays font-family in bold and blue and displays the font family name in the Value column.
-
In the Apply Styles task pane: Shows the style rule .style1 as well, decorated like the text it applies to. A box around the style rule indicates that this style rule applies to the element that's selected on the page-in this case, the paragraph. The green dot identifies the style rule as class based. The circle around the dot means that the style rule is in use on this page.
Hovering your cursor over the style rule in the Apply Styles, Manage Styles, or CSS Properties task pane displays the style rule, exactly as it is written in your Web page's code. (We talk more about these task panes later in this chapter.)
| GLANCE AT THE CODE | Here's the style rule for our example (the rule's selector is in bold type), which appears in the <head> section of the Web page: .style1 { font-family: Arial, Helvetica, sans-serif; } |
Here's what this style rule says in English: "Find the thing with style1 in it, and make its font family Arial, Helvetica, sans-serif." The period preceding the style rule name tells the style rule that it's looking for something with a class selector (class=“style1”).
Here's a closer look at the code for the paragraph itself (the class attribute that the style rule selects is in bold type):
<p >This is a paragraph with an internal style applied to it.</para>
Because this style is an internal one, you can add class=“style1” to any HTML element on the page, and the CSS code in the <head> section tells the browser to apply the class-based .style1 rule to it. An easy way to do this in one step is to select the element, such as another paragraph, and, in the Apply Styles task pane, click .style1. (We talk more about applying style rules to elements in the section "Applying style rules to page elements," later in this chapter.) If you decide that the chosen fonts in .style1 don't look quite right, all you need to do is change the style properties of .style1 in the internal CSS style rule to change all elements formatted with that style at one time. We show you how to edit style rules in the section "Modifying an existing style rule," later in this chapter.
| Tip | Expression Web is pretty smart about working with style rules. As much as possible, when creating internal style rules, it adds additional properties to the same style rule instead of creating a whole new style rule. In the code example below, we selected the paragraph that had a font style applied to it and then clicked the Center Align button on the Common toolbar. Expression Web adds the new style declaration to the existing style rule, like this: .style1 { font-family: Arial, Helvetica, sans-serif; text-align: center; } |
| REMEMBER | We say "pretty smart" because occasionally Expression Web does seem to write separate style rules when one would suffice, and these instances have left us scratching our heads. You will undoubtedly experience a few of these situations, too! No harm done, though. You may end up with an extra style rule or two, but we show you how to edit and delete style rules later in this chapter. |
| Tip | To quickly and accurately select an element on your Web page, click its tag on the Quick Tag Selector bar, as shown in Figure 7-5. |
Figure 7-5: Quick Tag Selector bar.
External styles
Internal style rules can easily be moved to an external style sheet, which is simply a separate file that contains a bunch of style rules. Moving style rules to an external style sheet makes them available for use on any page you attach the style sheet to-pages you haven't yet created and any plain-Jane content pages waiting around to get dressed up. Ah, here's the true power of style sheets: instant sitewide formatting with a few clicks!
| Tip | Move internal styles to a separate style sheet after you fiddle with the formatting on a page and get everything looking the way you like it, and after you rename any Expression Web-generated styles. (We explain the virtues of renaming styles, such as .style1, to something more descriptive in the section "Renaming a class-based style," later in this chapter. We show you how to move styles to an external style sheet in Chapter 9.) |
To show you what an external style rule looks like, we moved the internal style rule from Figure 7-4 for the formatted paragraph to an external style sheet without changing its name (something you wouldn't normally do because .style1 doesn't convey any useful information about what the style is used for). Figure 7-6 shows the style rule after it packed its bags and moved to the external style sheet named mystyles.css.
Figure 7-6: A paragraph with a style rule from an external style sheet applied to it.
Notice that the information in the CSS Properties task pane looks exactly like it did in the example with the internal style, as does the Quick Tag Selector bar. The paragraph also looks the same. But in the Apply Styles task pane, the style rule appears under the external style sheet filename mystyles.css rather than under (Current Page). The Manage Styles task pane shows the same information, indicating that the style rule now lives in the mystyles. css style sheet. (We talk more about the Apply Styles, Manage Styles, and CSS Properties task panes in the next section of this chapter.)
| GLANCE AT THE CODE | Peek at the code in the <head> section of the Web page:
<link rel="stylesheet" type="text/css" href="mystyles.css" /> |
Expression Web replaced the style rule with a link to the external style sheet named mystyles.css.
After you move a style rule to an external style sheet, you have to modify the style rule if you want to apply additional formatting to the elements it's applied to. For example, if we were to select our sample paragraph and click the Center Align button on the Common toolbar or change the text color, Expression Web wouldn't automatically add the new style property to the style rule located in the external style sheet. Instead, a new internal class-based style rule gets created in the <head> section of the page. Although this behavior seems quirky, Expression Web makes it easy to modify a style rule regardless of where it lives (in your page or in an external style sheet). Simply right-click the style rule in either the Apply Styles or Manage Styles task pane and, from the pop-up menu that appears, select Modify Style. (We show you in more detail how to do this in the section "Modifying an existing style rule," later in this chapter.)
| Tip | If you find this behavior annoying, just refrain from moving your internal style rules to an external style sheet until you finish most of the formatting on your page. This way, you let Expression Web take care of writing internal style rules while you focus on clicking toolbar buttons and selecting dialog box options. |
Inline styles
We would be remiss if we ended this style geography tour without a glance at inline styles and a description of what they look like in Expression Web. An inline style rule lives inside the HTML element's tag that it affects. In Figure 7-7, we manually modified the code to show you what our sample paragraph would look like if it were controlled by an inline style. (Expression Web would not write this kind of style rule by default.)
Figure 7-7: The sample paragraph with an inline style rule applied.
In Figure 7-7, notice where Expression Web gives you information about the selected paragraph and the style that formats it:
-
The CSS Properties task pane tells you that an inline style is applied to the selected HTML element, <p>. This task pane also shows you exactly which style property is being used, by bolding the font-family property, coloring it blue, and showing its value: Arial, Helvetica, sans-serif.
-
The Apply Styles task pane tells you that an inline style is applied to the selected paragraph and displays the name of the style (Inline Style) formatted exactly like the element being styled (the paragraph).
We talk more about the CSS Properties and Apply Styles task panes later in this chapter.
| GLANCE AT THE CODE | Here's the code for the paragraph being styled, with the inline style in bold: <p style="font-family: Arial, Helvetica, sans-serif">This is a paragraph.</para> |
| TECHNICAL STUFF | By default, Expression Web writes inline CSS style codes for only two types of properties (we talk more about these properties and why you may want to change the Expression Web defaults in Chapter 8):
|
EAN: 2147483647
Pages: 142