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

Posted by aroshinemunasinghe
aroshinemunasinghe
5,649 Points

What happens if type like this? (override?)

I understand about the tag @import ... but what if I type like this

<head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/import-styles.css">

  </head>

will it be override? I want to know why we cant code like this instead going css file and calling @import tag.. :smile:

1 Answer

andren
andren
28,558 Points
andren
andren
28,558 Points

Using @import is just one way of loading additional CSS files, the method you demonstrate of adding multiple link elements is also completely valid.

In fact it is highly discouraged these days to use @import as it is far worse for performance than using multiple link elements. This is due to the fact that if you use @import then CSS files will be downloaded one at a time, whereas browsers will usually download CSS files concurrently if they are linked using separate link elements.

So to answer your question more directly, you can use the method you demonstrate, and in fact in the real world that is the method used 90% of the time.

Though it's worth noting that the order that CSS files are placed in plays some role in how the rules affect the page. In the Treehouse video the import-styles.css file is essentially placed above the style.css file. In your example they have switched places. But that can be fixed by simply reordering them so the link element for the import-styles.css is above the link element for styles.css.