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! While you're at it, check out some resources Treehouse students have shared here.
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
Casey Courtney
2,678 PointsDoes the @import rule take precedence over lower styles added to the style.css file?
I am new and trying to understand the cascading thing. I tried to add a rule to the style.css file at the bottom, but then noticed a rule in the import-styles file was overriding it. The import-styles.css file is called with @import at the top of the style.css file. I thought that the rules made at the bottom of external style sheets take precedence. could someone explain this to me? Thanks so much!
Casey Courtney
2,678 PointsThanks everyone, I forgot to mention that I have the @import method for the normailize.css file at the top of my style.css file, and the html only links to the style.css file. Does this still give the normalize file precedence over the styles in style.css?
6 Answers
Alec Plummer
15,181 PointsThe problem with using @import is that it affects page load times and you can run into problems with style sheets not loading correctly, causing issues like you are experiencing (style.css not overwriting defaults from normalize.css). Link them both in the order that you need in the <head> of your html, that will fix your problem for you. Goodluck!
Michael Aubrey
3,949 PointsThe file which you reference first will take precedence.
So if you do
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
Then your own custom styles will override normalize.min.css.
However, if you do,
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.min.css">
Then normalize.min.css will override your custom styles.
For this reason you always want to put noramlize.min.css first
Bryce Santos
11,157 PointsIn the HTML file, you also have to take into account which CSS file is being referenced first. It sounds like your styles.css is above your normalize.css in your HTML file. It should be below so that it overwrites what you want it to over normalize.css.
Jason Anders
Treehouse Moderator 145,860 PointsHey Casey,
It will depend on where you load the stylesheet in your HTML. If you include the 'normalize.css' after your main stylesheet in the HTML, then the 'normalize.css' will override your styles. How they are added affects the cascade as well.
You seem to understand the cascading effect, just remember that the cascade also applies to how/when the files are included into the HTML and not just in the stylesheet.
Hope that helps.
Bryce Santos
11,157 PointsDon't use @import in your HTML. Use link rel.
Casey Courtney
2,678 PointsThanks Bryce, what about using @import in the stlye.css file?
Bryce Santos
11,157 PointsHm. Try importing your style.css into your normalize.css file then. I'm not sure which one you put in which.
Alec Plummer
15,181 PointsAlec Plummer
15,181 PointsIt depends on how they are ordered, for example
Anything in style.css will over ride whatever is in normalize.css if there are conflicting values. Do you have a specific example? Could be an issue with specificity or how you are targeting the new style.
An easy way to figure this out is by inspecting the element with dev tools in the browser. Chrome is easy to navigate, open up your file in Chrome and right click the element you are trying to style, click 'inspect element' and see if your style has a line through it or not.