Inheritance
Style inheritance, like human inheritance, passes from parent to child. In other words, style attributes of HTML elements pass styles onto smaller elements that they contain.
For example, say you've got a <p> paragraph style that calls for blue Verdana font. Within a paragraph that uses that style, there's a word you've italicized (using <i> italic tags). The italicized word, according to rules of inheritance, also gets the blue Verdana font.
As you design your site styles, keep this behavior in mind. Inheritance can save you a lot of work. For instance, if you want all the text on your site to appear as Tahoma font, don't set this attribute for each and every tag like <H1>, <H2>, <p>, and so on. Apply the style to your <body> tag and let the law of inheritance take over and do the work for you.
Cascading
Inheritance is easy enough to understand when you're thinking about parent-child style relationships (at least HTML ones). But what if you have conflicting style settings for the same element? Imagine that you've created an external style sheet and formatted <H2> as green, 12-point Verdana font. On one of your site's pages, you've embedded an <H2> style as red Times New Roman font. When a browser displays this page, it sees two different style settings for the very same tag. What's a browser to do? Simple. The browser displays the embedded, or page-level, style. The heading on that page shows up as red Times New Roman.
Style power structure dictates that the style closest to the element takes priority. Therefore, an inline style overrides an embedded or page-level setting, and a pagelevel setting overrides a site-wide or external style.
However, it gets a little more complicated than that. In the example above, not all properties conflicted with one another. Font size is specified on the external style sheet as 12 pt, but the embedded style specifies nothing. So, though the heading on that particular page follows the page-level rule, appearing in red Times New Roman, it takes the directive from the external style sheet to size the text at 12 point.
When you link multiple style sheets to the same Web page, cascading behaviors also apply. Within the Link Style Sheet dialog box, you can specify the order in which style sheets will be applied (see Applying Styles). The style sheet on the top overrides those below it, just as an embedded style sheet overrides an external one. Style rules on the additional sheets can fill in the blanks as in the scenario above. Often, site developers create additional style sheets to hold style rules designated for a few specific pages in a site. These supplemental CSS files can work in harmony with a master style sheet.
Take advantage of the cascading behaviors: create general rules to control your site's overall appearance, and at the same time, use embedded or inline styles to customize individual pages.
