The Cascade
Cascade ~ they're not called "Cascading" Style Sheets for nothing!
The Cascade is important, if there is a conflict in styles i.e. the same property has been redeclared, the rule that comes later in the cascade (nearer to the actual element) wins. The later in the cascade the more likely it is to affect an element..this applies not only to an external stylesheet but to all of the varying methods of applying styles, even the use of multiple classes.
Using an external stylesheet only, this is effected like so:
p {color: red;}
p {color: blue;}
The second rule overwrites the first by order of the cascade so your <p> will be blue.
Now if you have p {color: red;} in your external stylesheet then you have p (color: blue;} in an embedded stylesheet your <p> text will again be blue, the embedded style rule is nearer to your element, later in the cascade, so overwrites the first (external) rule.
Similarly if you then write <p style="color: green;"> as an inline style that will "trump"/overwrite the embedded rule so that <p> will be in green text.
This also applies to using multiple classes.
Example:
.red {color: red; font-weight: bold;}
.blue {color: blue;}
<p class="red blue">this text will be blue and bold</p>
The first class "red" tells the text to be red and bold, the later class "blue" tells the text to be blue, so it "wins" in the color stakes, but the text is still bold because the "blue" rule doesn't tell the font-weight to be any different (i.e. doesn't overwrite the red rule for font-weight).
disclaimer ~ yes class names should not be named for their appearance these are just examples
Updates:
«« Previous Page | Crib Sheet Index | Next Page»»
ChristinaYoung on