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

importing style sheet

why do we need to import stylesheet when we already have a style sheet from a css file.

and also if we are importing a style sheet can we do it in 2 ways like:

from the head tag using a style tags, and from writing @import "mystyle.css"; writing on top of the css rules in the css file.

2 Answers

Gabriel Plackey
Gabriel Plackey
11,064 Points

I'll be honest. I have never seen @import in any actual files/pages. I believe it's kind of new and not used too terribly often. i can see it being used for quickly importing styles that are universal for your website like for say a header or footer or nav bars, things like that without muddling up the css for the specific page you are making, so things are easier to read. Easier to change.. And yes that is correct you can do it in those two ways.

Chai Chong Teh
Chai Chong Teh
25,709 Points

So far, I have seen developers "importing" to a main css. E.g. the main file is styles.css. However, there may be a few components on a web page such as "header", "body", "footer"; and all of them may have different viewports like width: 480px, 720px, 1020px and so on. So choosing the style files to import from styles.css is easier.

David Koen
David Koen
Front End Web Development Techdegree Student 8,449 Points

Importing multiple CSS stylesheets into a single stylesheet will save the time in having to link multiple stylesheets into a HTML doc. Rather just link the doc to the CSS stylesheet containing the imported stylesheets.