Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website CSS: Cascading Style Sheets Use ID Selectors

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,780 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,780 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

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

rydavim
rydavim
18,780 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.

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,780 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. :(

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.

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!

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

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.

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

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

i also didnt see anything in the normalize.css file

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

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

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?

body { background-color: orange; }

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

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

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

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).

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

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

sorry did it show up now?

<!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>

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

hmm...can i you also post your css

body {
  background-color: orange;
}
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

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,780 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">

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

rydavim
rydavim
18,780 Points

Okay - can you link to your preview page?