Cascading is a fundamental feature of CSS.
It's an algorithm defining how to combine properties values originating from
different sources.
As the name itself suggests, cascading style sheets, in other words the cascade
algorithm, is at the core of understanding and using CSS.
The cascade combine the importance, origin, specificity and
source order of the applicable style declarations
to determine exactly which declaration should be applied to any given element.
And if there's a conflict, how to resolve that conflict.
In other words, how to tell which CSS rule wins.
There are a lot of terminology and
concepts surrounding the cascading algorithm.
However, I believe to have a working knowledge of the cascading algorithm,
you should understand these four concepts.
And these are origin, or origin precedence,
merge, as well as inheritance and specificity.
So let's tackle the first two, origin and merge.
When two declarations are in conflict,
in other words they specify the same property for
the same target, origin precedence rule kicks in, and it's a very simple rule.
And the rule is, the last declaration wins.
Now, when trying to figure out what the last declaration is,
you have to remember that HTML is processed sequentially.
That means top to bottom.
So as you see the declarations happen,
the lower on the page they are, the more precedence they have.
And also for precedence,
think of external CSS as declared at the spot where it's linked to.
So usually it's declared in the head somewhere, but
there could be other styles that I declared in the head.
And to figure out which one was declared last,
imagine that the entire contents of an external CSS file were cut and
pasted straight into the head portion, where that external CSS is declared.
When different CSS declarations do not conflict, that is,
they still target the same element, but the CSS properties with which they target
that element are different, there's even a simpler rule.
And that is that declarations merge.
So a declaration for, for example, font size, and a declaration for color, since
they're two different properties, when they're targeted to the same element, even
if they're targeted from two different origins, they will merge into one.
And the element will get both the font size and the color.
Let's take a quick look at an example of that in code.
Okay, so here I am in Sublime Text and I'm looking at origin.html.
And it's located in the examples Lecture17 folder.
Let me go ahead and hide the sidebar so we could see the file a little bit better.
So to go over the structure of our HTML, in the head we have a link that links
our external.css, which is also located in the same folder as this file, and
you could see that file is right here.
And it specifies that every p,
every paragraph tag, should have font size increased to 130%,
the background will be gray, and the color of the text will be white.
Now, right after that, we have a style tag, again,
still in the head, that overwrites the p element and
says that the color, that is, the text color, should be maroon.
Now, when we get to the actual viewable content,
we have a couple of paragraphs here.
The first one is just a simple paragraph and the second one is a paragraph where
we've declared an attribute style and specified color of the text to be black.
So let's take a look at the first paragraph.
You could see that the background of the paragraph is gray and
the text color is maroon.
Now, how do we get this gray and maroon?
Well, let's take a look.
We first declared external.css.
That's the first thing that comes in the HTML file.
So remember, I told you to think about it as if we basically took these contents and
pasted them straight into this spot.
So basically we've declared we want the font size to be increased,
the background color should be gray, and the text color should be white.
However, right after that, we turned around and overwritten that
with another color declaration and said that the color in fact should be maroon.
And that's really the last thing that we could see as far as the text color of our
paragraph text.
And that is why this paragraph right here does in fact have its text color maroon.
That is because of the last declaration of that color, one.
The second paragraph, however, has its text color black because the very last
declaration of the text color is black, so therefore the text color is black.
So that's our origin precedence rule in action.
However, unlike the color property, we have other properties here,
which are the background color and the font size, that are still being
applied to both paragraphs and that's our example of a merge.
In fact, if we right-click on this paragraph and go ahead and
inspect the element, we can see that the first paragraph does in fact have
the color: maroon and it's coming from origin.html, line 9.
That's our style tag inside our head section.
But you could see that it's showing you that other things apply as well,
that background color is gray and the font size is 130.
And the Chrome developer tools are clearly showing you here that we've overwritten
the color that was specified in external.css with our color: maroon.
And that's why you see the color crossed out here.
