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 Foundations Getting Started with CSS Adding CSS to a Page

Posted by Reagen Rahardjo
Reagen Rahardjo
Courses Plus Student 1,431 Points

@import path is not working

Hi Guys,

I have a question for the @import path.

I downloaded the project files and edit the content inside the final folder.

the folder arrangement in sublime text would be

adding css > final >css >more-styles.css >style.css

First I have issue with directory linking on the href to the css file. but I solved the linking issue.

The code below is work for me

<link rel="stylesheet" href="../final/css/style.css">

When i use the same code for the import, somehow the path doesn't work the code below what i use now

<style type="css/text"> @import '../final/css/more-styles.css'; </style>

I also tried couple of path which is @import 'final/css/more-styles.css'; @import 'css/more-styles.css';

can anyone help me resolve the issue

Thanks alot!

6 Answers

Callum King
Callum King
6,470 Points
Callum King
Callum King
6,470 Points

You need to add url and wrap the file path in brackets.

@import url(../final/css/more-styles.css);
Reagen Rahardjo
Reagen Rahardjo
Courses Plus Student 1,431 Points

<title>Adding CSS</title> <link rel="stylesheet" href="../final/css/style.css"> <style type="css/text"> @import url(../final/css/more-styles.css); </style>

it still didn't work.. I can confirm the href path is working

Callum King
Callum King
6,470 Points
Callum King
Callum King
6,470 Points

If you the CSS file you are trying to import into the other is within the same folder, you will only need to include that css files name.

@import 'more-styles.css';
Reagen Rahardjo
PLUS
Reagen Rahardjo
Courses Plus Student 1,431 Points
Reagen Rahardjo
Reagen Rahardjo
Courses Plus Student 1,431 Points

its on the different folder, tried to make it in the same folder but didnt worked.. i dont know what happened :(

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Reagen,

That's a pretty deep file structure you have goin on there, what's the reason for going so deep?

I would suggest having a single css folder and using a clear naming structure.

Andrew Brotherton
Andrew Brotherton
7,515 Points
Andrew Brotherton
Andrew Brotherton
7,515 Points

My CSS imports aren't working either?

<title>Adding CSS</title> <link rel="stylesheet" href="css/style.css"> <style type="text/css"> @import 'more-styles.css'; </style>

Dom Farnham
Dom Farnham
19,421 Points
Dom Farnham
Dom Farnham
19,421 Points

First check and ensure that you have the link statement in your index.html file

<head> <title>Adding CSS</title> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head>

Then check that you have the @import statement at the top of the styles.css file

@import url("more-styles.css");

Dom Farnham
Dom Farnham
19,421 Points
Dom Farnham
Dom Farnham
19,421 Points

First check and ensure that you have the link statement in your index.html file

<link rel="stylesheet" type="text/css" href="css/styles.css">

Then check that you have the @import statement at the top of the styles.css file

@import url("more-styles.css");