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 trialChristopher Beasley
1,493 PointsBackground color is not changing.
My background color is not changing to orange. I have looked the code and even changed the color but it does not work. here is the code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chris Beasley | Programmer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>
Here is the code to the main.css:
body{ background-color: orange; }
4 Answers
Elena Torrey
9,156 PointsDo you have a body element in your html code? Css selectors and html elements have to match. You could use body instead of section
Kelvin Simon
6,209 PointsYou need to post your css as well so we can see the code
Kelvin Simon
6,209 PointsJust looking at your html I see no body element to select in your css
Christopher Beasley
1,493 PointsHere is the code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chris Beasley | Programmer</title> <link rel="stylesheet" href="css/normalize.css">
<style>
nav a {
background-color: orange;
color: white;
}
</style>
</head> <body> <header> <a href="index.html"> <h1>Chris Beasley</h1> <h2>Programmer</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> 80s</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p> Idk</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p> who cares</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/smartguyhere"><img src="img/twitter-wrap.png" alt="Twitter Logo"> </a>
<a href="http://facebook.com/chris.beasley.14"> <img src="img/facebook-wrap.png" alt="Facebook Logo"> </a>
<p> © 2016 Chris Beasley. </p>
</footer>
</body>
</html>
Christopher Beasley
1,493 PointsHere is the code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chris Beasley | Programmer</title> <link rel="stylesheet" href="css/normalize.css">
<style>
nav a {
background-color: orange;
color: white;
}
</style>
</head> <body> <header> <a href="index.html"> <h1>Chris Beasley</h1> <h2>Programmer</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> 80s</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p> Idk</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p> who cares</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/smartguyhere"><img src="img/twitter-wrap.png" alt="Twitter Logo"> </a>
<a href="http://facebook.com/chris.beasley.14"> <img src="img/facebook-wrap.png" alt="Facebook Logo"> </a>
<p> © 2016 Chris Beasley. </p>
</footer>
</body>
</html>
Kelvin Simon
6,209 PointsOK so you need to assign the body element to you html, it shold start before the hearder with the opening body tag and close after the footer with the closing /body tag. like this
<body>
<header>
<a href="index.html">
<h1>Chris Beasley</h1>
<h2>Programmer</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> 80s</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p> Idk</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p> who cares</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/smartguyhere"><img src="img/twitter-wrap.png" alt="Twitter Logo"> </a>
<a href="http://facebook.com/chris.beasley.14"> <img src="img/facebook-wrap.png" alt="Facebook Logo"> </a>
<p> © 2016 Chris Beasley. </p>
</footer>
</body>
Christopher Beasley
1,493 PointsKelvin,
I think I copied the code wrong but here is the code that I had. I do have a
<body> </body>
. I refreshed and still no background color of orange.
<body>
<header>
<a href="index.html">
<h1>Chris Beasley</h1>
<h2>Programmer</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> 80s</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p> Idk</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p> who cares</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/smartguyhere"><img src="img/twitter-wrap.png" alt="Twitter Logo"> </a>
<a href="http://facebook.com/chris.beasley.14"> <img src="img/facebook-wrap.png" alt="Facebook Logo"> </a>
<p> © 2016 Chris Beasley. </p>
</footer>
</body>
Kelvin Simon
6,209 PointsYou still need to add the body element to your html if that's what you are selecting in you css
Christopher Beasley
1,493 Pointsthe crazy part is that if I hit edit, the <body></body> tabs are there. However, when I hit save, it does not show up. hmmmmm
Christopher Beasley
1,493 PointsI figured it out. my folder name was CSS and I was putting css in the link path. Thanks Kelvin!
jcorum
71,830 Pointsjcorum
71,830 PointsChristopher, is that all of your html? If so, you don't have a <body> element and there's nothing for the body selector in your css to select.