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
G.S. Walker
853 PointsBackground won't change to orange in my main.css file.
Here are my codes in index.html:
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
Here are my codes in main.css:
body {
background-color: orange;
}
I've deleted my main.css file and started over. I've also tried coding in Google Chrome and Firefox.
This is the first time I've had a problem. Appreciate any help!!!
12 Answers
Christian Andersson
8,712 PointsYou are applying a style to your body, but you haven't added a body in your HTML. Try adding it:
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
</body>
G.S. Walker
853 PointsHey guys I figured it out...my css FOLDER was capitalized LOL!!! I kept running across previous postings from other people but most of their issues involved them correcting the files and not the folder. Its amazing how something so small can make a lot go wrong. :-)
Thanks everyone!
Christian Andersson
8,712 Pointsah there you go. :) Your body wasnt in your code, and so I thought you forgot it. Weird that it doesn't show up.
Anyway, glad you got it sorted.
Salman Akram
Courses Plus Student 40,065 PointsChristian Andersson correctly said there is something missing in body, we didn't see body tag in the HTML which should be organizing and clear after testing.
Example below:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-g">
<title>Gloria Walker | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html">
<h1>Gloria Walker</h1>
<h2>Designer</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 80s 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 repetition.</p></a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/gloluvslife"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<p>© 2014 Gloria Walker</p>
</footer>
</body>
</html>
Hope it will work for you.
Salman Akram
Courses Plus Student 40,065 PointsPlease show us your whole HTML and CSS if you have.
Don't worry, we will take a look.
{HTML paste code here}
{CSS paste code here}
G.S. Walker
853 PointsSorry:
<!DOCTYPE html> <html> <head> <meta charset="utf-g"> <title>Gloria Walker | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html">
<h1>Gloria Walker</h1>
<h2>Designer</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 80s 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 repetition.</p></a>
</li>
</ul>
</section>
<footer> <a href="http://twitter.com/gloluvslife"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <p>© 2014 Gloria Walker</p> </footer> </body> </html>
G.S. Walker
853 Pointsmain.css:
body { background-color: orange; }
Salman Akram
Courses Plus Student 40,065 PointsHave you create separate file called main.css in CSS folder, not HTML file (index.html)?
Christian Andersson
8,712 PointsHis problem is that he is trying to style his body in the CSS, but there is no body tag in his HTML.
G.S. Walker
853 PointsYes. I created the main.css file then placed it inside the CSS folder.
That body style in in my main.css file...
G.S. Walker
853 PointsI don't know why the body tag didn't show yesterday. This is what my html looks like:
<!DOCTYPE html> <html> <head> <meta charset="utf-g"> <title>Gloria Walker | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html">
<h1>Gloria Walker</h1>
<h2>Designer</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 80s 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 repetition.</p></a>
</li>
</ul>
</section>
<footer> <a href="http://twitter.com/gloluvslife"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <p>© 2014 Gloria Walker</p> </footer> </body> </html>
G.S. Walker
853 PointsMy body tag is positioned right above the header tag...
G.S. Walker
853 Points<body>
<header>
<a href="index.html">
<h1>Gloria Walker</h1>
<h2>Designer</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 80s 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 repetition.</p></a>
</li>
</ul>
</section>
<footer> <a href="http://twitter.com/gloluvslife"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <p>© 2014 Gloria Walker</p> </footer> </body> </html>
G.S. Walker
853 PointsMy body tag isn't showing up here in the forum, but its showing up in my Workspace!
Christian Andersson
8,712 PointsChristian Andersson
8,712 PointsEdited for markdown.