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
Stavros Sofroniadis
Courses Plus Student 1,503 PointsWays to attach a stylesheet into another css file
In order to attach a stylesheet(css file) into another css file are the folowing 3 ways or more?
1)@import url("../twentyfourteen/style.css"); 2)@import "../twentyfourteen/style.css"; 3)<link rel="stylesheet" type="text/css" href="../twentyfourteen/style.css" />
What is the difference between using url and not using as in 1,2 examples?
Ususaly which of the above do we use?
Thank You,
Stavros Sofroniadis
Courses Plus Student 1,503 PointsThank You,
The 3rd <link rel="stylesheet" type="text/css" href="../twentyfourteen/style.css" /> works only for import a css file into html file? Canot be used into a css file to import another css file or not? Have heard that into html file it preferable 3rd rather 1, 2 because it takes more time to load a css file into html. It is true?
2 Answers
Luis Felipe Lino
Full Stack JavaScript Techdegree Student 15,708 PointsExactly, the 3rd example will work only to import CSS into HTML files, if you try to use <link rel="stylesheet"> in a CSS file it doesn't work.
Yes, the standard is to use the 3rd option to call CSS inside HTML files and in theory @import loads slower. Here is a link that explains the impact in loading time that @import and <link rel="stylesheet"> causes in a webpage: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Stavros Sofroniadis
Courses Plus Student 1,503 PointsThanks for document,
It mantions underneath:
LINK blocks @import A slight variation on the previous example with surprising results in IE: LINK is used for a.css and for a new stylesheet called proxy.css. proxy.css is configured to return immediately; it contains an @import rule for b.css.
in the HTML document: <link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'> in proxy.css: @import url('b.css'); The results of this example in IE, LINK blocks @import, are shown in Figure 4. The first request is the HTML document. The second request is a.css (two seconds). The third (tiny) request is proxy.css. The fourth request is b.css (two seconds). Surprisingly, IE won’t start downloading b.css until a.css finishes. In all other browsers, this blocking issue doesn’t occur, resulting in a faster page as shown in Figure 5.
in proxy.css is another method of import a css file into html document?
Luis Felipe Lino
Full Stack JavaScript Techdegree Student 15,708 PointsLuis Felipe Lino
Full Stack JavaScript Techdegree Student 15,708 PointsThere's no significant difference between example 1 and 2, I prefer to use the first example with "URL" to import CSS rules from one file into another file, but never saw a problem happens because of the use of the example without URL.
The third example is a mechanism to include a CSS style in an HTML file, it will not work to include CSS rules from one file into another CSS file.
Best regards.