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

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

Bee Priola
Bee Priola
3,922 Points
Posted by Bee Priola
Bee Priola
3,922 Points

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

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

For 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. :arrow_heading_down:

5 Answers

Jack Blankenship
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jack Blankenship
Full Stack JavaScript Techdegree Graduate 39,036 Points
Jack Blankenship
.a{fill-rule:evenodd;}techdegree seal-36
Jack Blankenship
Full Stack JavaScript Techdegree Graduate 39,036 Points

Could 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
Bee Priola
3,922 Points
Bee Priola
Bee Priola
3,922 Points

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

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

That's a direct URL to your workspace, it's temporary and only exists while you are using it.
:information_source: But you can use the snapshot function in the workspace and provide the link to that.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

:point_right: 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
Bee Priola
3,922 Points
Bee Priola
Bee Priola
3,922 Points

OMG !!!! 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
Eric Ogawa
599 Points
Eric Ogawa
Eric Ogawa
599 Points

CASE SENSITIVE file system! Thanks. I had the same problem.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Your 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
Bee Priola
3,922 Points
Bee Priola
Bee Priola
3,922 Points

Thank 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