6.5 More About Styles

As you begin to pile styles onto your pages, you may start to notice some peculiar behaviors as styles start to interact. The rules governing these interactions can be complex, but boil down to two main concepts: inheritance and cascading.

6.5.1 Inheritance

Imagine that you've created a new style by redefining the paragraph tag (<p>). This style has a font type of Arial, is red, and is 24 pixels tall. Then you select a single word in a paragraph and apply bold formatting to it. When you use the Property inspector's bold button to do this, Dreamweaver quietly wraps that word in a pair of <strong> HTML tags (Dreamweaver MX 2004 doesn't use the <b> tag when making text bold—see Section 3.3.2).

When a browser loads the page, it formats all paragraphs in Arial, red, 24 pixels, because that's how you defined the <p> tag. But what happens when the browser suddenly encounters the <strong> tag? Since you didn't redefine the <strong> tag in red, Arial, 24 pixels, the browser scratches its little silicon head: Should the browser just resort to the default font, size, and color when it gets to the <strong> tag?

No, of course not. The bolded word should look just like the rest of the paragraph? Arial, red, 24 pixels—but be bold too. And indeed, that's how cascading style sheets work: the <strong> tag inherits the formatting of the surrounding <p> tags.

Just as human babies inherit traits—eye color, for example—from their biological parents, nested HTML tags inherit the properties of tags that surround them. A tag that's nested inside of another tag—that <strong> tag inside the <p> tag, for example —is called a child, while the enclosing tag is called the parent.

Inheritance passes from parent to child. So, in this example, the <p> tag (the parent) passes on the Arial font, red color, and 24 pixel size to the <strong> tag (the child). But just as children have their own unique qualities, the <strong> tag adds its own quality—boldness—to the properties of its parent.

NOTE

Inheritance applies to all styles, not just HTML tag styles. If you apply a class style, for example, to a <td> (table cell) tag, all tags inside the cell—paragraphs, images, and so on—inherit the properties of the class style.

Inheritance comes in quite handy at times. For instance, say you want to display all text on a page (paragraphs, headings, unordered lists, and links) using the Verdana font. You could, of course, knock off for the week and redefine every html tag used to format text?lt;h1>, <h2>, <p>, <a>, <ul>, and so on, or create a class style and then manually apply it to all text on the page.

NOTE

For more information on inheritance, the Web offers some useful articles. For example, www.creativepro.com/story/feature/14776.html?origin=story takes you through the ins and outs of basic inheritance. The article at www.brainjar.com/css/using/default3.asp offers specific code examples. And www.ddj.com/documents/s=2370/nam1011137269/index.html is called "Style Inheritance: Friend and Foe," which speaks for itself.

However, a better and faster technique is to take advantage of inheritance. Every Web page contains a <body> tag, which contains all the elements of your page. The <body> tag, therefore, is the parent of all HTML you see in a page—images, paragraphs, headings, and so on. To quickly format all text, you could create an HTML tag style for the <body> tag using Verdana, or create a class style using that font and apply it to the <body> tag. Every bit of text inside the body—all children—then inherit the Verdana font property.

NOTE

Note: Actually, not all CSS properties are inherited. The Border property, for instance, is not inherited by child tags. Use Dreamweaver's built-in CSS Reference to see which properties are inherited (see Section 10.5).

6.5.2 Cascading

At times, styles can conflict. Let's say you redefine the <h1> tag in an external style sheet, so that all <h1> tags will show up in red, using the Arial font. But now you attach this external style sheet to a Web page that already has an internal style sheet, whose <h1> tag style has been set to Times, 24 pixels.

When a Web browser has to display any text formatted as a Heading 1 paragraph, it runs into a little dilemma. The page has two different styles—two sets of formatting rules—for the same tag. So which does the browser choose: the style from the internal style sheet or the style from the external style sheet?

The answer is both. The browser merges the two styles into a sort of hybrid, following these rules:

To summarize this example, then, the Web browser determines that text inside an <h1> tag on this Web page should be Times, red, 24 pixels tall.

This cascading effect applies to all styles, including class styles and the advanced styles discussed on Section 6.6. When there's a direct conflict between properties from a class style and an HTML tag style, the class style prevails. Because class styles must be applied directly to a tag?lt;h1 class="specialHeadline">—they are considered more specific than the HTML tag style. After all, you added the style to a specific instance of the <h1> tag on the page.

NOTE

Note: In the CSS version of rock-paper-scissors, HTML text formatting beats CSS formatting. So if you add new, improved CSS styles to old Web pages that include out-of-date HTML formatting (see the note on Section 3.3.1), your CSS styles won't work. To eliminate this conflict, remove the <font> tag from the page's code using Dreamweaver's Search and Replace tool (Section 19.3) or the Clean Up HTML/XHTML command (Section 15.5).

These same rules apply when child elements inherit properties from parent elements, as described on Section 6.5. For example, if you apply a purple, Arial-font class style to the body of a page, then the child elements (anything within the <body> tag) inherits those properties. If you then redefine the paragraph tag so that paragraph text is green, paragraph text will inherit the Arial font from the body, but will ignore the purple color in favor of the green you specified when redefining its own—paragraph—tag.

To learn more than you probably ever wanted to know about cascading, visit the following Web pages:

6.5.3 Using the Relevant CSS Panel

If you haven't yet set this book aside in hopes that the swelling in your brain will subside, you've probably absorbed the notion that the application of style properties can be quite complex. With all this inheritance and cascading going on, it's very easy for styles to collide in unpredictable ways. To help you discern how styles interact and ferret out possible style conflicts, Dreamweaver MX 2004 introduces a new tool—the Relevant CSS panel (Figure 6-10).

The Relevant CSS panel is part of the Tag inspector and has the same style-editing features as the Rule inspector described on Section 6.4.2, but its main purpose is to show which styles affect a given selection. For example, Figure 6-10 shows that four styles are affecting the formatting of a single paragraph of text: 3 tag styles (<body>, <p>, and <p>) and one class style (.sidebar). Why two <p> tag styles? One is in an external style sheet, while the other belongs to the page's internal style sheet.

Selecting a style in the list at the top of the panel displays that style's properties at the bottom. This lower area works just like the Rule inspector described on Section 6.4.2 for editing style properties. For example, in Figure 6-10, the Tag inspector lists a variety of properties for the .sidebar style, including background-color, border, float, fontfamily, and so on.

You can edit any of these properties by retyping, say, or choosing from a pop-up menu. Clicking the second-to-last style in the list—a <p> tag style—shows that it has a setting for the Font-family property. In addition, there's a red line through the property name, indicating that it doesn't apply to the current selection. Because the more specific .sidebar class style also has the font-family property set, in the battle of cascading style properties, it wins (see Section 6.5 for more on inheritance and cascading).

If your Web pages are elegantly simple and use only a couple of styles, you may not find much need for the Relevant CSS panel. But as you become more proficient (and adventurous) with CSS, you'll find that this panel is a great way to untangle masses of colliding and conflicting styles.