Cascade rules
Specificity Rule
h1 (Potatoes) is more specific than *.
If one selector is more specific than the others, the more specific rule will take precedence over more general one.
Last Rule
There are two CSS rules for i, the second i selector takes precedence over the first. If the selectors are identical, the later of the two will take precedence. Her the word "dozens" is red not green. Important
Important Rule
You can add ! important after any property value to indicate that it should be considered more important than other rules. that apply to the same element. Here the word "potato" is blue not violet.
h1 (Potatoes) is more specific than *.
If one selector is more specific than the others, the more specific rule will take precedence over more general one.
Last Rule
There are two CSS rules for i, the second i selector takes precedence over the first. If the selectors are identical, the later of the two will take precedence. Her the word "dozens" is red not green. Important
Important Rule
You can add ! important after any property value to indicate that it should be considered more important than other rules. that apply to the same element. Here the word "potato" is blue not violet.
Understanding the Cascade
Before we wrap up this module, let's take a moment and look at the cascading nature of CSS. We have covered a lot of selectors and you might be wondering how all this stuff works together. We'll actually start to design using CSS in the next module, but before we do, here are a few helpful tips when planning your CSS selectors.
Inline styles take precedence over embedded styles and embedded styles take precedence over external style sheets. This is simple to fix: never use inline or embedded styles. When you have conflicting styles, the last one will be used. Example:
p {color:black;}
p {color:red;}
p {color:green;}
In this instance, the paragraph will be green. Why? Because CSS is read from top to bottom of the page and the last declaration wins. Another thing to remember is that the more specific your selector, it will be the style that is used. These selectors hold the following specificity values:
Type selector = value of 1 (example: p)
Descendant selector = value of 2 (example: body p)
Class selector = value of 10 (example: .button)
ID selector = value of 100 (example: #wrapper)
Higher value means more specificity.
Before we wrap up this module, let's take a moment and look at the cascading nature of CSS. We have covered a lot of selectors and you might be wondering how all this stuff works together. We'll actually start to design using CSS in the next module, but before we do, here are a few helpful tips when planning your CSS selectors.
Inline styles take precedence over embedded styles and embedded styles take precedence over external style sheets. This is simple to fix: never use inline or embedded styles. When you have conflicting styles, the last one will be used. Example:
p {color:black;}
p {color:red;}
p {color:green;}
In this instance, the paragraph will be green. Why? Because CSS is read from top to bottom of the page and the last declaration wins. Another thing to remember is that the more specific your selector, it will be the style that is used. These selectors hold the following specificity values:
Type selector = value of 1 (example: p)
Descendant selector = value of 2 (example: body p)
Class selector = value of 10 (example: .button)
ID selector = value of 100 (example: #wrapper)
Higher value means more specificity.