Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Vic Mercier
Vic Mercier
3,276 Points

Is someone able to explain clearly what does it mean "the last css file will override the other" with an example.

I'm not in a css course and don't forget to put a clear example.

2 Answers

Steven Parker
Steven Parker
225,664 Points

Let's say your HTML head element has these lines:

  <link rel="stylesheet" type="text/css" href="first.css">
  <link rel="stylesheet" type="text/css" href="last.css">

And the CSS files have these rules:

first.css
body {
    background: red;
}
last.css
body {
    background: blue;
}

So "the last css file will override the other" means that the color of the page will be blue.

Basically, the last file has specificity over any file before it. So, in your example, having two body selectors with different values in each means that the last one (last.css) will have specificity over the first one (first.css). It overrides the previous one. If you added a third file that targeted the body selector with a different value then it would take on the new value of the third file.

One Two overrides one Three overrides two and one Four overrides three, two and one

This is only when you use the same selectors.