Lecture 17, Part 1: Conflict Resolution

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.

Explore Related Videos

面向 Web 开发者的 HTML、CSS 与 Javascript 课程

與講師見面

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。