Previous Section  < Day Day Up >  Next Section

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梥ee 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梑ut 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梕ye color, for example梖rom their biological parents, nested HTML tags inherit the properties of tags that surround them. A tag that's nested inside of another tag梩hat <strong> tag inside the <p> tag, for example 梚s 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梑oldness梩o the properties of its parent.


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梡aragraphs, images, and so on梚nherit 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.


For more information on inheritance, the Web offers some useful articles. For example, takes you through the ins and outs of basic inheritance. The article at offers specific code examples. And 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梚mages, 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梐ll children梩hen inherit the Verdana font property.


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梩wo sets of formatting rules梖or 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:

  • Properties that don't conflict are applied as usual. In the above example, the red color property only exists in the external style, while only the internal style speci- fies a font size. So far, the browser knows that, for this page, text inside <h1> tags should be both red and 24 pixels tall.

  • When properties do conflict, a Web browser uses the property from the "closest" or more specific style. External styles (since they're in a separate file) are not as specific as the internal styles, which were created specifically to style this one page. In this case, the font Times (specified in the <h1> tag style in the internal style sheet) wins.

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">梩hey 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: 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梡aragraph梩ag.

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梩he Relevant CSS panel (Figure 6-10).

The Relevant CSS panel lists all styles that affect the current selection in the document window. The styles are listed in order of most general (top) to most specific (bottom). The most specific rule梚n this example, the .sidebar class style梬ins out in the battle of inherited properties (see Section 6.5).

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梐 <p> tag style梥hows 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.

The Relevant CSS panel lets you easily view all the properties for your Web page's styles. A red line (circled in these images) strikes out properties that don't apply to the given selection. In this example, the font-family in the second <p> style is overridden by the Font-family property in the more specific .sidebar class style. Likewise, the sidebar class also overrides the Margin-left property in the top <p> style.
    Previous Section  < Day Day Up >  Next Section