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 Emily O'Neill
Emily O'Neill
3,317 Points

index.html will not link with stylesheet

I am having trouble linking my stylesheet with index.html. Both are in the same folder and the link code in html is correct, as is the css.

I am using Coda 2 which is new to me. Can someone explain how I would go about linking the two please?

Thanks

Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

Can you post your code so we can take a look at what might be wrong?

Emily O'Neill
Emily O'Neill
3,317 Points

html :

<!DOCTYPE html> <html> <head> <title>Adding CSS</title> <link rel="stylesheet" href="css/style.css"> </head>

css:

h2 { color: steelblue; padding-bottom: 10px; border-padding: 2px dotted; }

ul { color: white; background-color: steelblue;
}

Thanks

6 Answers

Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

Emily,

The code needs to be located in the head tag. It should look something like this,

Also the type attribute specifies at as CSS doc as well.

<head>

<title>HTML Document</title>

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

</head>

Does this help?

Emily O'Neill
Emily O'Neill
3,317 Points

Hi Garrett,

It is nested inside the head tag. I tried adding the type attribute however no change.

Are you familiar with Coda 2? Maybe I am doing something wrong - I have tried googling it but nothing has come up, not even a Coda tut!

Again, the files are located on my desktop, the index.html file & style.css file are saved inside the css. file from the project files.

Simon Truong
Simon Truong
2,179 Points
Simon Truong
Simon Truong
2,179 Points

Hi Emily,

If your CSS file is located in the same folder as your html file, I suggest your code should look like something like this instead of what Garrett suggested :

<head>

<title>HTML Document</title>

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

</head>

the href in your link tag shouldn't point to a css/ folder if the files are in the same folder

Kind Regards,

Simon

Emily O'Neill
Emily O'Neill
3,317 Points

Could someone please advise me on how to set up my files? I was under the impression they didnt need to be saved inside the same file, however after reading answers related to my question, I found otherwise.

Kash Johnson
Kash Johnson
3,146 Points
Kash Johnson
Kash Johnson
3,146 Points

Thanks for this...I copied my files into Workspaces and I couldn't figure out why they weren't linking. This change worked perfectly and makes complete sense.

Emily O'Neill
Emily O'Neill
3,317 Points
Emily O'Neill
Emily O'Neill
3,317 Points

I have moved the files around a bit.

I also added start to the location tag.

It now works!

Thanks

Simon Truong
Simon Truong
2,179 Points
Simon Truong
Simon Truong
2,179 Points

Then, I would suggest storing all your CSS code in a folder called /css/ located at the root folder of your index.html file and then point the stylesheet to the css file as Garrett stated.

If you need further explanation, don't hesitate to give a holler

Peace,

Kind Regards,

Simon

Simon Truong
Simon Truong
2,179 Points
Simon Truong
Simon Truong
2,179 Points

Hoped it helped.

Peace,

Nam

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Emily,

I can see you have already managed to resolve this by moving the files around but noticed you questioned the folder setup. I'm not using Coda 2 but just wanted to confirm how your stylesheet is linked...

You currently have the following within your head tags:

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

The above is saying look inside the 'css' folder for the file 'style.css'.

If you had the index.html and the style.css in the same folder your code would look something like:

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

If you had the style.css within another folder deep you'd adjust it accordingly, e.g.

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

Hope that helps to clear it up a little.

-Rich

Emily O'Neill
Emily O'Neill
3,317 Points

Thanks Rich,

That helps too!

:)