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

General Discussion

Linking CSS file to HTML file

I am having problems in my workspace linking my CSS to HTML - it's just not linking. Here is my code:

<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">

I have also made sure the CSS files are sitting in the CSS folder. Any suggestions?

18 Answers

Matt Campbell
Matt Campbell
9,767 Points

Code hasn't popped up. Make sure you hit spacebar 4 times and then past or type code. It'll be formatted like code then, easier to read.

Woops...here is the code:

 <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
Matt Campbell
Matt Campbell
9,767 Points

I'm not sure to be honest. Can workspaces be shared and linked to?

James Barnett
James Barnett
39,199 Points

A user's workspace is (currently) only accessible only when that user is logged in.

> Can workspaces be shared and linked to?

So not really.

Yeh I was wondering the same thing about sharing workspaces...I hope so as I am stuck until I can resolve this!

I haven't used them myself but there is a preview url that some people have posted in the forums to share their workspace.

Avelardo Mendoza
Avelardo Mendoza
2,809 Points

if you go to your workspace and open the file up and click the eye on they right it will share what you have made but not the code that you have written.

Avelardo Mendoza
Avelardo Mendoza
2,809 Points

did you make sure that the code was within the head element?

Yes the code is in the head element. Here is what it looks it, may have stuffed something up there?

<head>
<meta charset="utf-8">
<title>Teri Nolan | Family Photo Taker</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">

</head> <body> <header>

It seems I'm not the only one with this exact problem, in the "How to Make a Website' course

https://teamtreehouse.com/forum/css-is-not-linking-to-html

Avelardo Mendoza
Avelardo Mendoza
2,809 Points
<head>
  <title> Teri Nolan | Family Photo Taker</title>
  <link rel="stylesheet" href="css/normalize.css">
  < link rel="stylesheet" href="css/main.css">
 </head>

Thanks, my code didn't paste properly, I think it actually is nested, here it is again....

''' <html> <head> <meta charset="utf-8"> <title>Teri Nolan | Family Photo Taker</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> '''

hmmm, can;t get it to paste!

Avelardo Mendoza
Avelardo Mendoza
2,809 Points

if you are trying to paste the code press the space bar 4 times before entering the code

<html> <head> <meta charset="utf-8"> <title>Teri Nolan | Family Photo Taker</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>

<html>
  <head>
    <meta charset="utf-8">
    <title>Teri Nolan | Family Photo Taker</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
<body>

Sorry - trying to paste the code with the 4 spaces in front, but it's not happening (which is strange because that's how I pasted my code 5 hours ago...)

James Barnett
James Barnett
39,199 Points

Fixed it for you, you have to use 4 spaces in front of every line of code.

Check out this thread for examples of the various ways to type code in the forum for some examples.

Hi Teri, just wondering if your css folder is on the same level as your index.html folder? Or did you put index.html in another folder?

Hi Diane, yep my CSS folder is the same level as my index.html. And inside my CSS folder are two files - main.css and normalize.css

There must be something wrong with the css file - can you post the main.css code? (this is driving me crazy, so it must be REALLY driving you crazy!)

It sure is! The normalise.css file was given to us to download as part of the course. When I linked that file I knew it wasn't working properly because in my preview my links still had bullet points (whereas the instructor's didn't). The main.css file is the first bit of CSS code I have written. Again, I could tell it didn't link because it did not change the background colour in my preview. Here is the CSS that I wrote:

body {
  background-color: orange;
}

You wrote "normalise.css" just now, but your html has "normalize.css". Make sure they're the same.

Nice pick up! But alas, all reference to the file is spelled - normalize.css in the workspace.

Have you tried your files locally on your own computer? At least you could eliminate whether it's a problem with your files or a workspace problem.

Thanks Jason, I just did that and it worked! When I open the files locally on Chrome the page looks exactly how it should! So it is a workspace issue.

If you'd like to continue using workspaces then you might try deleting that workspace, creating a new one, and upload those local files that you have. Then see if it works properly.