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
Bee Priola
3,922 Pointsmy background-color won't show up on my web page.
I'm starting a new project because my original project I was started since the beginning of 'make a website' and this is my early problem I'm having. I checked my html validator checker is correct. How come my css won't work wit my html?
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>Bee Priola | Chef/Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>
<body>
<header>
<a href="index.html">
<h1>Bee Priola</h1>
<h2>Chef/Web 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/IMG_3118.jpg">
<img src="img/IMG_3118.jpg" alt="">
<p>Organic Raw Recipes.</p>
</a>
</li>
<li>
<a href="img/IMG_1755.jpg">
<img src="img/IMG_1755.jpg" alt="">
<p>Organic Main Course Recipes.</p>
</a>
</li>
<li>
<a href="img/IMG_1408a.jpg">
<img src="img/IMG_1408a.jpg" alt="">
<p>Organic Raw Dessert Recipes.</p>
</a>
</li>
<li>
<a href="img/IMG_0860.jpg">
<img src="img/IMG_0860.jpg" alt="">
<p>Organic Sweet Recipes.</p>
</a>
</li>
<li>
<a href="img/IMG_1466.jpg">
<img src="img/IMG_1466.jpg" alt="">
<p>Homemade Bread Recipes.</p>
</a>
</li>
</ul>
</section>
</body>
<footer>
<a href="http://twitter.com/saszybee"><img src="img/twitter-wrap.png" alt="Twitter logo"></a>
<a href="http://facebook.com/phannawadeepriola"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
<a href="http://instagram.com/sazybee"><img src="img/instagram.png" alt="Instagram logo"></a>
<p>Ā© 2017 Bee Priola.</p>
</footer>
</html>
5 Answers
Jack Blankenship
Full Stack JavaScript Techdegree Graduate 39,036 PointsCould you post your css also?
In the meantime, make sure your css is in the correct directory. Did you select a class instead of ID or the other way around in your css? Did you select a non existent or misspell a tag in your css?
Google Chrome is really helpful if you are having issues. Other browsers also have a development tool process to let you inspect your page and see which css is being used.
Bee Priola
3,922 Pointsmy CSS. only 1 line code,
body{ background-color: green; }
and I checked my html.
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>Bee Priola | Chef and Web Designer</title> <link rel="stylesheet"href="css/normalize.css"> <link rel="stylesheet"href="css/main.css">
</head>
Thank you.
Bee Priola
3,922 Pointsthis is my link. https://teamtreehouse.com/workspaces/24012782#
Steven Parker
231,236 PointsThat's a direct URL to your workspace, it's temporary and only exists while you are using it.
Steven Parker
231,236 Points
Your CSS files are not being loaded.
Apparently, the workspace file system is case-sensitive. So a folder named "CSS" cannot be referred to as "css".
My recommendation is to rename your "CSS" folder to "css". But you could also change your HTML link tags so the href property refers to the CSS folder.
BTW, there's a whole lot more than one line of code in those CSS files!
Bee Priola
3,922 PointsOMG !!!! Steven, you just making a big smile on my face !!! yes right after I changed folder from 'CSS ' to 'css' my web page is working !!! Thank you !!!!!
Eric Ogawa
599 PointsCASE SENSITIVE file system! Thanks. I had the same problem.
Steven Parker
231,236 PointsYour footer element seems to be placed after the body.
It should be inside the body instead. There should be nothing after the body.
On my browser, the background is shown with the color anyway; but it could be that this error might prevent it from working on a different browser.
Bee Priola
3,922 PointsThank you for your replies, Steven. I was finished make a website course last night and all my codes are correct but my web page still doesn't work. it looks like my CSS link won't be able to link to my HTML. I kept starting new projects and all have the same problem. How can I fix this problem? I'm using Macbook Pro OS X El Captain version 10.11.6.
Thank you for your help, Steven.
and this from my snap short. https://w.trhou.se/t2qczqhnr2
Steven Parker
231,236 PointsSteven Parker
231,236 PointsFor issues involving multiple files, it might be better to make a snapshot of your workspace and post the link to it here.
If you post code like this inline, be sure to use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area.