Dreamweaver CS6: The Missing Manual

More About CSS

As you begin to pile more and more styles into your pages, you may notice that a page might not look exactly as you expect. A paragraph of text might be green even though you didn’t create a style for a green paragraph. Or you may have styled a particular paragraph to appear with green text, but it refuses to change color. Most of the time, peculiar behaviors like these occur when styles collide. The rules governing these interactions can be complex, but they boil down to two main concepts: inheritance and the cascade.

Inheritance

Imagine you create a new style by redefining the paragraph tag (<p>). The style specifies red text displayed in the Arial font at a height of 24 pixels. 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 wraps that word in a pair of <strong> tags.

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

Of course not. The bolded word should look just like the rest of the paragraph: red, Arial, 24 pixels high—and now boldfaced, ...