Dreamweaver CS5: 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’ve styled a particular paragraph to appear with green text, but it refuses to change color. Most 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 created a new style by redefining the paragraph tag (<p>). The style specifies red text displayed in the Arial font at 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 wraps that word in a pair of <strong> HTML 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 <strong> tag inside a paragraph? 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, 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—but boldface too. And indeed, that’s how CSS ...