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
Kayelan Nyako
Courses Plus Student 2,849 PointsAdding CSS to my html doc
I tried to add my css/main.css to my index doc, and I tried to test it with a background-color, but it's not showing. Any ideas?
<head> <meta charset="utf-8"> <title>Kayelanilani | MHT</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>
body { background-color: green; }
15 Answers
Nick Pettit
Treehouse TeacherHi Kayelan,
Sorry you're having trouble! Can you create a snapshot of your Workspace and post the link to it here? That would be the fastest way for myself or someone else to help you figure this out.
Nick Pettit
Treehouse TeacherThanks, Kayelan!
Your css folder is named "CSS" but your paths say "css". The web is generally case-sensitive, so you'll either need to rename your folder to lowercase letters "css" or change all your paths to uppercase "CSS".
I did this and it worked fine for me. I hope that helps!
Lindsay Sauer
12,029 PointsCheck to make sure the background-color property isn't being overridden. Enter the developer console by pressing F12 and examine the <body> tag. If you see a strike through background-color:green, it'll tell you where it's being overwritten and in what file (which in this case should be main.css).
Jennifer's correct, though unless there's css that's setting the height of your body to, say, 1px, you should see a green background. If main.css is in the css folder then it's possible it is a cache issue and a hard refresh (Ctrl+F5) may resolve it.
Jennifer Nordell
Treehouse TeacherHave you put anything in the body yet? If you haven't it might not be showing the background because the body has no size yet. Other than that, check to make sure the path and file names are correct and have the same capitalization. And, of course, refresh your page.
Kayelan Nyako
Courses Plus Student 2,849 PointsI'm on the Making A Website track and I'm following his direction. He didnt say anything about body px or anything of that nature. I have the same setup as him. It seems like my style sheet isn't connected but it's typed in properly and its in the css folder with the normalized. Does that ring a bell for anyone?
Jennifer Nordell
Treehouse TeacherWhat you have yet to answer is this: is there anything in the html that puts anything inside the body element? If it's empty it won't show up and default to the default browser color. Try putting any old paragraph in there just for testing. Again if your body element doesn't contain anything the browser may think it has a width and height of 0px which means that you won't see anything when changing the background color.
Kayelan Nyako
Courses Plus Student 2,849 PointsOh, yea. I'm sorry. There are graphics in the body with a little bit of text.
Lindsay Sauer
12,029 PointsThe body doesn't need anything in it to display a background color, nor is it collapsed by default. http://codepen.io/anon/pen/bpqGYw
Check to ensure the background-color property isn't being overwritten in main.css. If you look at the CSS you should see that the body already has been given a background-color of white (line 100 of main.css). So if you put your background-color styling before that, it'll be overwritten due to the cascading nature of CSS. Press F12 and inspect the body tag to see if this is the case.
Kayelan Nyako
Courses Plus Student 2,849 PointsI think the issue is my .css sheet is not attached to the doc, but I don't understand that... it's written properly and it's on the downloads What the heck..
Lindsay Sauer
12,029 PointsDid you try opening the developer console? Did you see any css from main.css being used?
Kayelan Nyako
Courses Plus Student 2,849 PointsYes.. the only css i wrote was the background to see if it even worked... but it isn't working.
Lindsay Sauer
12,029 PointsOkay, the reason I ask is because the workspace for the video you've linked to has a file named main.css in the css folder already, and it already contains css. So we need to know more information about what you've done to try to help you.
Is the html you posted above the only html you have in your html document?
Did you launch the workspace, or are you working on this code using a different website, such as your own?
If you launched the workspace, did you delete everything in all of the included files and try to start anew? Did you delete any files and try to recreate them? Can you snapshot your workspace and share with us?
Kayelan Nyako
Courses Plus Student 2,849 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Kayelanilani | MHT</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Kayelanilani</h1> <h2>MHT</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/ocean.jpg"> <img src="img/ocean.jpg" alt=""> <p>The beautiful ocean!</p> </a> </li> <li> <a href="img/ocean.jpg"> <img src="img/ocean.jpg" alt=""> <p>The beautiful ocean!</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/laniinthesky"> <img src="img/th.jpg" alt="twitter logo" class="social icon"> </a> <a href="http://facebook.com/kayelan.micha"><img src="img/fb.jpg" alt="facebook logo" class="social icon"> </a> <p>© 2016 Kayelanilani</p> </footer> </div> </body> </html>
Nick Pettit
Treehouse TeacherHi Kayelan,
This doesn't help because I can't see the directory structure of your project. Can you post a link to a Workspaces Snapshot?
Kayelan Nyako
Courses Plus Student 2,849 PointsI knew it was something small. I appreciate everyone's help.
I do have another question, though, Nick Pettit. I followed along with the lesson's because I figured I could write in code and fix the css connection when it's figured out, but now that it's working, it has a ton of glitches. I thought I followed along well, but I guess not. I'm working to fix it on my own, but I cant seem to figure out how to get the header text, the #logo, to be center. It's a different style than yours, but I figured I could play around while I try to debugg it.
Where could I change the "Kayelanilani | MHT" text to be center on the page regardless of the size screen? My code may look messy, I tried a lot of places..
Another thing, I can't get my fb logo to appear and my twitter logo isn't adjusting to the sizing. Do I need a different graphic with a different size or can I change up the code to adjust the size and make the fb logo reappear in the footer?
Nick Pettit
Treehouse TeacherHi Kayelan,
If you're still on the "ID Selectors" video then I would encourage you to keep going. A large portion of the course is styling the site with CSS and many things get addressed later on.
If that's not the case and you're already done, then you should download the code associated with the videos and compare it to your version of the project. Computer code is not always forgiving - most languages are case sensitive, and you can't include extra characters, like spaces. The reason I mention this is that your class names for the footer are "social icon" (with a space) but in the CSS you've named them "socialicon" (which is correct, with no space). These terms need to match, otherwise the styling won't be applied correctly.
You're doing great debugging these issues - so keep going! :)
Kayelan Nyako
Courses Plus Student 2,849 PointsNick Pettit I went through and checked my css main and responsive sheets, but they look good and my page isnt responsive. Any ideas where to look?
Nick Pettit
Treehouse TeacherHi Kayelan Nyako,
Your page looks responsive to me, except for the icons in the footer. Those icons are large because the class names in the HTML are incorrect. You have a space between "social icon" when in fact there should be a dash instead of a space (just like in your CSS). Here's your current code...
<footer>
<a href="http://twitter.com/laniinthesky"> <img src="img/th.jpg" alt="twitter logo" class="social icon"> </a>
<a href="http://facebook.com/kayelan.micha"><img src="img/fb.jpg" alt="facebook logo" class="social icon"> </a>
<p>© 2016 Kayelanilani</p>
</footer>
And here's the corrected code
<footer>
<a href="http://twitter.com/laniinthesky"> <img src="img/th.jpg" alt="twitter logo" class="social-icon"> </a>
<a href="http://facebook.com/kayelan.micha"><img src="img/fb.jpg" alt="facebook logo" class="social-icon"> </a>
<p>© 2016 Kayelanilani</p>
</footer>
Kayelan Nyako
Courses Plus Student 2,849 PointsNick Pettit I don't see it as responsive because the gallery on the portfolio are larger as the screen size gets smaller (the 480px).
My responsive sheet is the same, and I dont have another "Css vs css" issue. I checked to see if I spelled everything properly. I cant understand why my gallery isn't matching the screen size when it get's smaller as if it were a phone screen...
Nick Pettit
Treehouse TeacherHi Kayelan,
On line #9 of your main.css file, you're using the width property on your #wrapper selector when it should instead be max-width. So your entire #wrapper declaration in main.css should look like this:
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
I tried this and it fixed the issue you were describing.
Kayelan Nyako
Courses Plus Student 2,849 PointsOh. and everytime I try to add more images to my file, it says my workspace isnt connected. What's up with that?
Nick Pettit
Treehouse TeacherHi Kayelan,
I'm not sure. If you're having connectivity issues with Treehouse or any other account-related issues you should contact our official dedicated support staff by emailing help@teamtreehouse.com
Kayelan Nyako
Courses Plus Student 2,849 PointsNick Pettit The code that you helped us create in "How to make a website" something we can use with our wordpress website? If not, where would I be able to use my design live?
Nick Pettit
Treehouse TeacherYou might be able to integrate it into a WordPress site, although you would need to make your own theme that uses it.
The end of the course How to Make a Website shows you how to purchase a domain name and hosting, and then, how to upload the site to the host server.
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherI'm not the OP, Nick :) But hey! Great to see you on here!
Nick Pettit
Treehouse TeacherNick Pettit
Treehouse TeacherYep, realized after I hit submit and then updated. Ooops!
Kayelan Nyako
Courses Plus Student 2,849 PointsKayelan Nyako
Courses Plus Student 2,849 PointsI did to the help email, but it's not letting me do it on the forum. Is there a way or can i email to you
Nick Pettit
Treehouse TeacherNick Pettit
Treehouse TeacherHi Kayelan,
I was forwarded at least one email you sent and it only included a link to this forum post. A link to a Workspace snapshot is going to be the fastest way for me or anyone else to help you. Here's how to do it:
Here's a screenshot of what the Snapshot menu looks like in Workspaces. Again, it's in the upper right corner.