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

Posted by Susan Ortega
Susan Ortega
1,103 Points

Background won't change to Orange

Hello All! I've been refreshing my page, I have added the main. css exactly how the video says, and the background still won't change to orange. I have rechecked my code numerous times & I don't seem to understand why it's not working. Can someone please help me with this. Below is my code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Susan Ortega | Portfolio</title> <link rel = "stylesheet" href= "css/normalize.css"> <link rel = "stylesheet" href= "css/main.css">

</head> <body> <header> <a href="index.html"> <h1>Susan Ortega</h1> <h2>Developer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li>

  <li>
      <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Playing with blending modes in Photoshop.</p>
      </a>
  </li>

  <li>
      <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="">
        <p>Trying to create an 80's style of glows.</p>
      </a>
  </li>

  <li>
      <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p>Drips created using Photoshop brushes.</p>
      </a>
  </li>
  <li>
      <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p>Creating shapes using repitition.</p>
      </a>
  </li>

  </ul>
</section>
<footer>
  <a href="http://twitter.com/fangbanger3"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
  <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
  <p>&copy; 2015 Susan Ortega.</p>
</footer>

</body>

</html>

This is what I have for my main.css file -

body { background-color: orange; }

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

We're losing some of your code - before and after your html try putting three backticks ( ``` ) on their own line. That will help format it properly. Back ticks are typically located on the tilda ( ~ ) key.

9 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

This is what your file structure should look like in the sidebar. Something is going wrong with the linking to your CSS files. Sorry it's causing you so much trouble!

Imgur

Susan Ortega
Susan Ortega
1,103 Points

how can i paste a picture on this thread, I wanted to copy/paste a picture of my workspace?

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

www.imgur.com has really easy image hosting that you don't need an account for, if you would like to link to a picture.

Susan Ortega
Susan Ortega
1,103 Points

this is what i currently have for my workspace. http://imgur.com/t1utzXj

I've also copy/paste my code to sublime text & it seems to work fine there. the background is orange. I'm using google chrome btw.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Everything looks fine in that screenshot and in your code. I have no idea what it's not working for you. I'm sorry workspace is giving you such a hard time. :(

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

I'm able to use your index.html and main.css within workspaces and get an orange background. My first suggestion is to try creating a new workspace and copy your code over. If that still does not work, consider reaching out to help@teamtreehouse.com. They've always been awesome for me, and I'm confident they can help troubleshoot this further.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Also, Susan, if you contact Treehouse, add a link to this page so they can see what all we've tried.

Thanks so much rydavim and carine for your time and effort on this. It is much appreciated and the community is better for it!

Susan Ortega
Susan Ortega
1,103 Points

Thank you all for your help. I truly appreciate it. This issue was driving me crazy, lol. Robert, I went ahead & tried what you suggested, & did a whole new workspace & used the code & somehow it worked. I see the orange background. I guess that other workspace could've been corrupted somehow. Idk. Thank you again! :)

Travis G
Travis G
8,384 Points
Travis G
Travis G
8,384 Points

That's the exact problem I've been having. It seems that the pages aren't linking together. I looked it over as well, but I wonder if I missed something or if there is a problem with workspaces.

Susan Ortega
Susan Ortega
1,103 Points

Travis Grieshiemer Hello. What worked out for me, was copy/pasting all the code into a blank new workspace & that seemed to help the issue for me. Something was wrong with the workspace from the actual lesson for me. Hope that helps. :)

carine todmia
carine todmia
6,071 Points
carine todmia
carine todmia
6,071 Points

weird. when i checked the source elements for you main.css file there was nothing in there. are you sure you save specifically the main.css file

carine todmia
carine todmia
6,071 Points
carine todmia
carine todmia
6,071 Points

i also didnt see anything in the normalize.css file

Susan Ortega
Susan Ortega
1,103 Points

I'm not sure if this is helpful but when I do "inspect element" on the preview page, these errors keep coming up -

http://port-80-k75knocm11.treehouse-app.com/css/normalize.css Failed to load resource: the server responded with a status of 404 (Not Found)

2http://port-80-k75knocm11.treehouse-app.com/css/main.css Failed to load resource: the server responded with a status of 404 (Not Found)

http://port-80-k75knocm11.treehouse-app.com/css/normalize.css Failed to load resource: the server responded with a status of 404 (Not Found)

carine todmia
carine todmia
6,071 Points
carine todmia
carine todmia
6,071 Points

you thats kinda what me and robert see as the main issue as well . check if the files are in the correct folder. they should be in the css folder

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Susan,

When I look at the source code through the dev console - on the page you linked, it doesn't show any CSS code in main.css. Did you save your changes? Can you post your entire main.css file please?

Susan Ortega
Susan Ortega
1,103 Points

body { background-color: orange; }

Susan Ortega
Susan Ortega
1,103 Points

I have saved my files using cmd S, & using File>Save. I'm not sure what's going on.

Susan Ortega
Susan Ortega
1,103 Points

Can I post a picture in here? I wanted to screenshot what I see on my workspace. I don't know if you would be able to see it - https://teamtreehouse.com/workspaces/938512#

carine todmia
carine todmia
6,071 Points
carine todmia
carine todmia
6,071 Points

also be sure you are saving everything in the proper folders. both css files should be in a css folder and yoru index.html should not be in a folder at all

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Try closing your browser, then come back and re-launch workspaces and see if that helps (sometimes I have to do this for unrelated problems).

Susan Ortega
Susan Ortega
1,103 Points

Hi Robert,

I closed the browser, signed back on, refreshed page & still nothing. I'm going to copy/paste my code on sublime text to see if it works on there.

carine todmia
carine todmia
6,071 Points
carine todmia
carine todmia
6,071 Points

hmm....i dont see the beginning of your body tag anywhere. i also dont see a head tags 

<head>
<meta charset="utf-8">
<title>Susan Ortega | Portfolio</title>
<link rel = "stylesheet" href= "css/normalize.css">
<link rel = "stylesheet" href= "css/main.css">
</head>


<body>
<header>
  <a href="index.html">
<h1>Susan Ortega</h1>
<h2>Developer</h2>
  </a>
  <nav>
    <ul>
      <li><a href="index.html">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
<section>
  <ul>
  <li>
      <a href="img/numbers-01.jpg">
        <img src="img/numbers-01.jpg" alt="">
        <p>Experimentation with color and texture.</p>
      </a>
  </li>

  <li>
      <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Playing with blending modes in Photoshop.</p>
      </a>
  </li>

  <li>
      <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="">
        <p>Trying to create an 80's style of glows.</p>
      </a>
  </li>

  <li>
      <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p>Drips created using Photoshop brushes.</p>
      </a>
  </li>
  <li>
      <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p>Creating shapes using repitition.</p>
      </a>
  </li>

  </ul>
</section>
<footer>
  <a href="http://twitter.com/fangbanger3"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
  <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
  <p>&copy; 2015 Susan Ortega.</p>
</footer>

</body>```
carine todmia
carine todmia
6,071 Points
carine todmia
carine todmia
6,071 Points

sorry did it show up now?

Susan Ortega
Susan Ortega
1,103 Points
Susan Ortega
Susan Ortega
1,103 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Susan Ortega | Portfolio</title>
    <link rel = "stylesheet" href= "css/normalize.css">
    <link rel = "stylesheet" href= "css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html">
    <h1>Susan Ortega</h1>
    <h2>Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <ul>
      <li>
          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentation with color and texture.</p>
          </a>
      </li>

      <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Playing with blending modes in Photoshop.</p>
          </a>
      </li>

      <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>Trying to create an 80's style of glows.</p>
          </a>
      </li>

      <li>
          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p>
          </a>
      </li>
      <li>
          <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>Creating shapes using repitition.</p>
          </a>
      </li>

      </ul>
    </section>
    <footer>
      <a href="http://twitter.com/fangbanger3"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2015 Susan Ortega.</p>
    </footer>

    </body>
</html>
Susan Ortega
Susan Ortega
1,103 Points

Is this better? I tried putting the backticks to help post all my code. Thank you both for looking into this for me. It's driving me crazy, lol

carine todmia
carine todmia
6,071 Points
carine todmia
carine todmia
6,071 Points

hmm...can i you also post your css

Susan Ortega
Susan Ortega
1,103 Points 
body {
  background-color: orange;
}
carine todmia
carine todmia
6,071 Points
carine todmia
carine todmia
6,071 Points

also for clarification everything else is working fine except for the color background right... and dont worry i had the same exact problem when i was working on that part of the course and it was due to such a silly mistake

Susan Ortega
Susan Ortega
1,103 Points

For the most part everything was working fine. I'm trying to see if I copy/paste my code on sublime text to see if it works there.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Does it work if you remove the spaces from your link rel and href attributes?

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
Susan Ortega
Susan Ortega
1,103 Points

I took out the spaces & refreshed that doesn't seem to work either. :(

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Okay - can you link to your preview page?

Susan Ortega
Susan Ortega
1,103 Points

http://port-80-k75knocm11.treehouse-app.com/