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 trialSusan Ortega
1,103 PointsBackground 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>© 2015 Susan Ortega.</p>
</footer>
</body>
</html>
This is what I have for my main.css file -
body { background-color: orange; }
9 Answers
rydavim
18,814 PointsThis 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!
Susan Ortega
1,103 Pointshow can i paste a picture on this thread, I wanted to copy/paste a picture of my workspace?
rydavim
18,814 Pointswww.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
1,103 Pointsthis 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
18,814 PointsEverything 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
Courses Plus Student 16,352 PointsI'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
Courses Plus Student 16,352 PointsAlso, 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
1,103 PointsThank 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
8,384 PointsThat'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
1,103 PointsTravis 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
6,071 Pointsweird. 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
6,071 Pointsi also didnt see anything in the normalize.css file
Susan Ortega
1,103 PointsI'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
6,071 Pointsyou 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
Courses Plus Student 16,352 PointsHi 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
1,103 Pointsbody { background-color: orange; }
Susan Ortega
1,103 PointsI have saved my files using cmd S, & using File>Save. I'm not sure what's going on.
Susan Ortega
1,103 PointsCan 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
6,071 Pointsalso 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
Courses Plus Student 16,352 PointsTry 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
1,103 PointsHi 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
6,071 Pointshmm....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>© 2015 Susan Ortega.</p>
</footer>
</body>```
carine todmia
6,071 Pointssorry did it show up now?
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>© 2015 Susan Ortega.</p>
</footer>
</body>
</html>
Susan Ortega
1,103 PointsIs 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
6,071 Pointshmm...can i you also post your css
Susan Ortega
1,103 Pointsbody {
background-color: orange;
}
carine todmia
6,071 Pointsalso 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
1,103 PointsFor 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
18,814 PointsDoes 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
1,103 PointsI took out the spaces & refreshed that doesn't seem to work either. :(
rydavim
18,814 PointsOkay - can you link to your preview page?
rydavim
18,814 Pointsrydavim
18,814 PointsWe'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.