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 How to Make a Website CSS: Cascading Style Sheets Use ID Selectors

Liam Boyd
Liam Boyd
1,540 Points
Posted by Liam Boyd
Liam Boyd
1,540 Points

css not linking to html

When I first did this tutorial, everything appeared as it was meant to (background changed to orange etc), however the next day I moved to the next video, and nothing appeared to work.

I repeated all the steps in this video but could not get the css to change the style on the preview.

My code:

intex.html

<!DOCTYPE html> <html> <head> <meta Charset="utf-8"> <title>Liam Boyd | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>

main.css

body { background-color: orange; }

I have also checked that the name of the folder is css and not CSS and that the file is within the css folder.

Thanks in advance :)

6 Answers

Liam Boyd
Liam Boyd
1,540 Points
Liam Boyd
Liam Boyd
1,540 Points

Thank you all for your help.

I managed to fix the issue by clearing my cache. I have to clear my cache every time I want to see a change now. Bit of a pain but at least I know my code is good.

Thanks again, appreciate it.

chrisp
chrisp
13,686 Points
chrisp
chrisp
13,686 Points

Hmmm, I can't see all your codes and I am pretty much assuming that your link tag is within the head tag.

Although, I usually do the the 

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

An alternative instead of using an external css for the exercise, you can try just to do within html to verified if that works, something like.

<!DOCTYPE html>
   <html>
       <head>
            <meta charset="UTF-8">
            <title> Please work! </title>
             <style>
                  body { background-color: #f90; }
             </style>
        </head>

<!--- Inline CSS works to --->
<body style="background: #f90;">

If those don't work and you can't seem to solve, maybe make a new one or try a different browser.

Hmm, now Is it intex.html or index.html?

Best of luck!

Liam Boyd
Liam Boyd
1,540 Points
Liam Boyd
Liam Boyd
1,540 Points

My link tag is within the head tag. I basically copied exactly what Nick was doing in the video. I changed the code to how you do it but didn't have any luck.

Strange thing is, the 'normalize' file is styling the page, just not the 'main' file.

I've also tried it in Chrome, Firefox and IE with no luck.

I tried out what you said about putting the style within the html - that worked, but I'd rather have it separate.

Oh, yeah, my sloppy spelling - sure is called index.html and not intex.html ;)

Thanks :)

Alessandra Vaughn
Alessandra Vaughn
13,915 Points
Alessandra Vaughn
Alessandra Vaughn
13,915 Points

Hello, it may not be an issue with linking your files. You might have an issue with how you are selecting the elements. Selecting classes requires a period (.) and selecting ids requires a pound sign (#).

Example:

Code from HTML file:

<div id="thisDiv">Something here</div>
<div class="anotherDiv">Something else here</div>

Code from CSS file:

#thisDiv {
  color: red;
}

.anotherDiv {
  color: blue;
}
Liam Boyd
Liam Boyd
1,540 Points
Liam Boyd
Liam Boyd
1,540 Points

Hello,

Thanks for your answer.

I've done exactly what Nick did in the video.

I decided to download the project files and change the code locally. I previewed it and it worked like it should. I guess this ensures the code is right, so I then copied all the code from the local version and pasted it in Workspaces and again, I am seeing no changes.

Do you think it's a problem with Workspaces?

Thanks :)

Alessandra Vaughn
Alessandra Vaughn
13,915 Points
Alessandra Vaughn
Alessandra Vaughn
13,915 Points

The order of the links do matter. This may not fix your problem, but you definitely want to keep this in mind.

The normalize.css should always be listed first. Then the main.css will overwrite the normalize.css file, instead of the other way around.

Ryan Curran
Ryan Curran
561 Points
Ryan Curran
Ryan Curran
561 Points

I too am having an issue with the CSS, file/ coding, not linking to my html. None of the styling is converting over. I have my main.css filed under the CSS folder. I have been unable to get any of the CSS coding to link. I even moved on to the next video and tired it out too, but nothing is linking. I would like to use the CSS to do this tutorial and not have to add it into my html file.

I have tried and cleared my cache, and I tried a different browser.

Here is what my HTML coding looks like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>BOSS | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>

and here is the CSS coding:

body {
  text-decoration: orange;
}

I just cannot see where I went wrong, any suggestions?

Ryan Curran
Ryan Curran
561 Points
Ryan Curran
Ryan Curran
561 Points

by the way my css folder is correctly in lowercase, just like in my html coding.

Karl Lloyd
Karl Lloyd
5,462 Points
Karl Lloyd
Karl Lloyd
5,462 Points

try using <div id = "wrapper"> rather than <div> in the index file. I had the same problem and this sorted it.