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

Raihan Khan
Raihan Khan
2,168 Points
Posted by Raihan Khan
Raihan Khan
2,168 Points

What is the main purpose of using @import style sheet.

Why not use external style sheet. What is the purpose of using @import style sheet. I can have all the necessary css in on external style sheet right. What I am confuse here, why not use all the css in one file instead of using @import or many other external sheet. Am I going to face any issues if i use one external css file for all the style require for my webpage.

1 Answer

Ryan M
Ryan M
16,203 Points
Ryan M
Ryan M
16,203 Points

@import is a way to organise your CSS by splitting up related code into different files. This can be useful for code maintenance since large projects require lots of CSS. However, writing all of your CSS in one file means fewer server requests since each @import statement is a new request, so a single file will load faster.

Using @import for linking to external files is not ideal since the browser will wait for the imported file to download before downloading the rest of the css, while multiple <link> elements in your HTML allows for parallel downloading. This means that <link> elements are best for external css files.

Raihan Khan
Raihan Khan
2,168 Points
Raihan Khan
Raihan Khan
2,168 Points

Thank you so much. Now it makes sense

Adam Acree
Adam Acree
8,640 Points

I was wondering the same thing. My suspicion was that one would use @import for multiple CSS files to split up related code, but I wasn't entirely sure if that was in fact the reason or if there were any other primary uses not discussed. Thanks!