Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

@import confusion

Hey,

My head is spinning over this @import thing. I don't really understand what it does. Can someone explain it to me in dummy terms?

3 Answers

Mate Vegh
Mate Vegh
25,607 Points

It's like a dream within a dream in the Inception movie. With @import you can import a CSS file into another CSS file, which you can import into a third CSS and so on. It's very powerful if you are using a CSS preprocessor like Sass, but you should avoid using it within pure CSS, because it makes your page load slower. Instead, it's best if you link your fonts and stylesheets inside your HTML pages. Feel free to ask if you have further questions!

Okay, let me see if I understand this. Let's say that I have three separate CSS files. The first one is targeting the body and changing the color to red, the second is targeting the paragraphs and changing the color to blue, and the final one is changing the header background to pink, then I can link one CSS file into my page (<link rel="stylesheet" href="badcolorscheme.css">) and using @import in that main style sheet I can essentially merge all of those into one. Is that right? Sorry if that is way off base.

Mate Vegh
Mate Vegh
25,607 Points

That's totally correct! But as I said, you should avoid using it. Here is a good explanation to understand why: http://stackoverflow.com/a/10037064

Woo! Thanks! :)