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

GoldSpec Digital
GoldSpec Digital
4,185 Points

@import style sheets

Instead of using @import to import various different style sheets, why not just have several different CSS files (fonts.css background.css colors.css) and link these in your head?

<head> <link a href="/fonts.css"> <link a href="/background.css"> <link a href="/colors.css">

</head>

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Yes, you could totally do that and it would still be the same number of HTTP requests. So in that regard, it's exactly the same.

But the real thing to take away here is efficiency for you, the developer and maintainer of that site. Your site might have 3 pages and that would mean you would need to update the <head>on each page if you needed to remove a style sheet or add one. That would likely be manageable.

But what happens if your site has 25 pages... or even 100? Do you really want to retype all those by hand or would it be simpler just to import them into your current stylesheet? :smiley: Personally, my vote is for the one style sheet link in the head.

Hope this helps! :sparkles:

Brian Miller
Brian Miller
Courses Plus Student 6,696 Points

This is the bottom line take away! Great point.

Ray Karyshyn
Ray Karyshyn
13,443 Points

Hey Naomi,

Using the head in your HTML documents to add CSS files is actually more preferable than using @import in your CSS.

However, it is recommended to use @import for adding web-fonts.

Check out this discussion for more info: https://stackoverflow.com/questions/7199364/import-vs-link/7199377

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi Ray Karyshyn! I read that discussion (and a few others) about this issue, and yes, @import blocks link, but only in IE. I suppose it ultimately depends on how dedicated you are to supporting IE users and if that is a requirement.