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 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 Pierce-Lackey
Gabriel Pierce-Lackey
11,014 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
seal-mask
.a{fill-rule:evenodd;}techdegree
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.