CSS Hierarchy
Of course there may be times when you want to break the general rule you've set up with the CSS document. For example, on one particular heading on one particular page, you may want the <h1> heading to be green instead of red.
In CSS design, there is a hierarchy of command that the browser will follow in building your page.
1. If no style is specifically stated, INHERITANCE determines what rule will be followed. The last applied rule (or the browser's default) will be the setting used.
2. When more than one rule is set at the same time, the rule that is the most SPECIFIC will be the one used. The most specific is the ID selector, followed by the class selector, followed by a general html tag, followed by the inheritance.
3. The LOCATION of where the rule is applied also helps determine which rule is applied. Rules that appear later in a document have more weight in the decision. Therefore, rules that are applied right in the html document have more weight than those that appear in the CSS text page. Rules that appear farther on in an html document override those at the top of the page.
In CSS design, there is a hierarchy of command that the browser will follow in building your page.
1. If no style is specifically stated, INHERITANCE determines what rule will be followed. The last applied rule (or the browser's default) will be the setting used.
2. When more than one rule is set at the same time, the rule that is the most SPECIFIC will be the one used. The most specific is the ID selector, followed by the class selector, followed by a general html tag, followed by the inheritance.
3. The LOCATION of where the rule is applied also helps determine which rule is applied. Rules that appear later in a document have more weight in the decision. Therefore, rules that are applied right in the html document have more weight than those that appear in the CSS text page. Rules that appear farther on in an html document override those at the top of the page.