Understanding Order and Specificity in CSS
When you write your styles and something seems not to work as expected, you may want to check your style "order" and "specificity".
We'll cover the following...
Let’s pull up the example from a previous lesson:
Be sure to check out the code above.
I’ll now explain the concepts of order and specificity with an example.
In the code above, what happens if I added a conflicting declaration to the h1 element?
Right now, we have this:
h1 {
color: black;
}
A conflicting declaration has been added in the code output below. Take a look at the highlighted line.
It doesn’t make sense to write CSS like this. However, see Line 7 above.
Line 6 says, “give the h1 a color of black”. On the contrary, the line just after that says, _“give h1 a color of white”
What does CSS do in this awkward case?
Yeah, ...