As you begin to pile styles onto your pages, you may notice some peculiar behaviors as styles start to interact. The rules governing these interactions can be complex, but they boil down to two main concepts: inheritance and cascading.
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 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> tag.
Just as human babies inherit traits—eye color, for example—from their biological parents, nested HTML tags inherit the properties of tags that surround ...