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

Kenton Kotsiris
Kenton Kotsiris
6,130 Points
Posted by Kenton Kotsiris
Kenton Kotsiris
6,130 Points

I can't get my stylesheet to load for Adding CSS to page Stage 1

What am I doing wrong?!

I believe it has to do with the file pathways.

I'm new so hopefully I can explain this clearly.

In the Adding CSS to a page (stage 1) we're adding css elements to our index page via sublime. For the life of me, I can't get any css to reflect when I check my index page in the browser.

My file set it (to the left of sublime) reads:

adding-css... css... more-styles.css... style.css... index.html... (sorry I don't know how to make it show as a list)

The code I am putting on my index.html page to reflect css is:

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

What am I missing?

Thanks!

1 Answer

Rand Seay
Rand Seay
13,975 Points

Hello Kenton,

I may not be interpreting your file structure diagram correctly, but I think there may be a couple of things that need to be corrected.

The <link> that you are putting in your HTML takes a rel attribute that defines the relationship between the current file and the one you are referencing. There is no need for the extension .css to be included in the value, simply "stylesheet" will do the trick.

Another note, it seems that you may be missing a directory in your path (The value for the href attribute). This is where I may not be reading your diagram correctly, but it appears that "style.css" may be in a directory called "css", which in turn looks to be in a directory called "adding-css". Is this right?

If I am interpreting that correctly, and adjusting the rel doesn't fix your problem, the path might need correcting as well.

In either case, the <link> should look more like this

<!-- If your index.html file is next to the adding-css folder -->
<link rel="stylesheet" href="adding-css/css/style.css">

<!-- If your index.html file is next to the css folder -->
<link rel="stylesheet" href="css/style.css">
Samuel Johnson
Samuel Johnson
9,152 Points
Samuel Johnson
Samuel Johnson
9,152 Points

Just had a look at your file path and realise its hard to show the list but is your whole application called 'adding-css'?

If this is the case and all your files including the index.html are in a folder called css then you can change the code to just say
<link rel="stylesheet" href="style.css">

However the answer above explains more why this may not be working so hopefully you have more luck fixing it!

Kenton Kotsiris
Kenton Kotsiris
6,130 Points
Kenton Kotsiris
Kenton Kotsiris
6,130 Points

Thank you so much for this, Randy! You have made it totally clear and helped me better understand how to read the file path. With your help, I got it working. Thanks!

Rand Seay
Rand Seay
13,975 Points

No problem, glad you were able to get it working!