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.
E R
1,220 Pointsimporting 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
11,014 PointsI'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.
David Koen
Front End Web Development Techdegree Student 8,449 PointsImporting 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.
Chai Chong Teh
25,709 PointsChai Chong Teh
25,709 PointsSo 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.