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

CSS CSS Basics (2014) Getting Started with CSS Importing Style Sheets with @import

Myles Edric C. Chuahiock
Myles Edric C. Chuahiock
2,986 Points
Posted by Myles Edric C. Chuahiock
Myles Edric C. Chuahiock
2,986 Points

Cascading Nature of Stylesheets with @import

If you place @import at the top of the stylesheet, shouldn't styles.css "override" the declarations of @import?

It came to my attention earlier that he placed @import beneath the link to styles.css in the index.html file. This would mean that @import would be loaded 2nd and override the declarations of styles.css. However, when he placed @import inside styles.css, namely on top of all the other declarations, shouldn't styles.css override @import's declarations the same way?

Is this a consistency problem? Or the @import just really functions this way.

1 Answer

Thomas Noe
Thomas Noe
12,486 Points
Thomas Noe
Thomas Noe
12,486 Points

Hey Myles,

You're absolutely right that style.css should overwrite the import styles if the @import is used within style.css. In the course example, though, style.css did not contain any rules that would clash with import-styles.css, so the page looks the same regardless of where/how the import-styles.css file is imported.

To test this theory, try using @import to import the import-styles.css file within styles.css, and change the font-size of h1 in style.css. In both files, h1's font-size is set to 72px, but set the font-size to 100px in style.css. Since the h1 rule in style.css is declared after the h1 rule in import-styles.css (because the @import declaration is above the styles.css h1 rule), you should see the 100px font-size in the browser preview.

Now move the @import declaration out of styles.css and into a <style> tag within index.html declared after the link to style.css. You should now see the font-size of h1 set to 72px. This is because the import-styles.css is declared after styles.css, so import-styles.css's h1 rule is assigned.

Hope this helps!