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 trialJared Syrenne
948 PointsUnable to apply CSS
Unable to get background color to change
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Jared Syrenne | Designer</title>
<link rel="stylesheet" href"css/normalize.css">
<link rel="stylesheet" href"css/main.css">
</head>
<body>
<header>
<a href="index.html">
<h1>Jared Syrenne</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>
<nav>
<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 a Glow</p>
</a>
</li>
<li>
<a href= "Img/numbers-09.jpg">
<img src= "Img/numbers-09.jpg" alt="">
<p>Photoshop Brushes</p>
</a>
</li>
<li>
<a href= "Img/numbers-12.jpg">
<img src= "Img/numbers-12.jpg" alt="">
<p>Blending</p>
</a>
</li>
</ul>
</nav>
</section>
<footer>
<a href="https://twitter.com/jsyrenne"><img src="Img/twitter-wrap.png" alt"Twitter Logo"></a>
<a href="https://www.facebook.com/jared.syrenne"><img src="Img/facebook-wrap.png" alt"Facebook Logo"></a>
<p>©2015 Jared Syrenne</p>
</footer>
</body>
</html>
and
body {
background-color: orange;
}
Jason Anello
Courses Plus Student 94,610 PointsI've fixed the code formatting so the head
section can be seen now.
7 Answers
Greg Kaleka
39,021 PointsEdit
OK, now that I can see your head
section, it seems you did link to a stylesheet! That's good :).
I copied and pasted your code directly into a codepen, and it's working just fine. The problem is likely that your folder structure is such that your link isn't pointing to your stylesheet. Try adding a slash in front of your href attributes:
<link rel="stylesheet" href"/css/normalize.css">
<link rel="stylesheet" href"/css/main.css">
This makes the links "root-relative urls," meaning their location is relative to the root of your project/homepage.
Let us know if this works!
Hi Jared,
The problem is that you aren't actually linking to any CSS file. In your html, you need to tell the browser where to find your CSS stylesheet. That's typically done in the head
element:
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
Note the "/css/main.css" might need to be slightly different, depending on where the file is in your folder structure.
There should be other stuff in your head
, so I would go back and look at earlier videos to make sure you're following along with everything!
Ariel Aronica
6,646 PointsLol Greg, I totally overlooked that thinking it just wasn't posted. Thumbs up!
Ariel Aronica
6,646 PointsA few things... make sure your spacing in your HTML is correct. In your list items, make sure there is no space after a href =, there should not be a space. Second, in your hrefs at the bottom, there needs to be an = sign after "alt". Lastly... do you have a body tag? I don't see one in the screenshot. If you are trying to apply CSS to the body but don't have one, that would be a BIG reason.
Ariel Aronica
6,646 PointsAlso, < ! DOCTYPE html >should be all caps
Jason Anello
Courses Plus Student 94,610 PointsHi Ariel,
You've caught the problem with the missing equal signs. There's 2 more missing equal signs in the head section for the href attributes. I know you couldn't see that section but I think you would have caught it.
Also, I wanted to mention that spaces are allowed around equal signs although it's preferable not to have the spaces because it needlessly adds to the size of your html file.
And doctype
is ok in lowercase. I'm not sure which one you would more commonly see.
Heather B.
4,180 PointsI've just been having this problem too - the CSS from both normlize and main weren't applying.
The problem was that the folder I'd created containing both of those files called "CSS" was capitalised, and the code referring to that folder in index.html was not. Easy fix, rename the folder "css".
Hopefully that's helpful for someone out there!
Melissa Brown
1,101 PointsThank you, Heather, for posting this response.
Your tip was helpful to me, because I made the same mistake you did. But I didn't even think to look outside the coding for my error until I read your tip.
Sheila Coliflores
288 PointsThank you. This fixed my problem. :)
Ariel Aronica
6,646 PointsLook at img src. Still have an extra space after the = signs :)
Jared Syrenne
948 PointsThanks :) I corrected those line but am still unable to get the css to apply :(
Jared Syrenne
948 Points[<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Jared Syrenne | Designer</title>
<link rel="stylesheet" href"css/normalize.css">
<link rel="stylesheet" href"css/main.css">
</head>
<body>
<header>
<a href="index.html">
<h1>Jared Syrenne</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>
<nav>
<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 a Glow</p>
</a>
</li>
<li>
<a href= "Img/numbers-09.jpg">
<img src= "Img/numbers-09.jpg" alt="">
<p>Photoshop Brushes</p>
</a>
</li>
<li>
<a href="Img/numbers-12.jpg">
<img src="Img/numbers-12.jpg" alt="">
<p>Blending</p>
</a>
</li>
</ul>
</nav>
</section>
<footer>
<a href="https://twitter.com/jsyrenne"><img src="Img/twitter-wrap.png" alt"Twitter Logo"></a>
<a href="https://www.facebook.com/jared.syrenne"><img src="Img/facebook-wrap.png" alt"Facebook Logo"></a>
<p>©2015 Jared Syrenne</p>
</footer>
</body>
</html>
]
I believe I made the corrections @[Ariel Aronica](https://teamtreehouse.com/arielaronica)
Jared Syrenne
948 Pointshmmm I cant get the first part of my html to post :( <link rel="stylesheet" href"css/normalize.css"> <link rel="stylesheet" href"css/main.css">
Ariel Aronica
6,646 PointsHere are some edits. I still do not see a < body > tag in your HTML though
''' html <!DOCTYPE html>
Jared Syrenne | Designer
<a href="index.html">
<h1>Jared Syrenne</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>
<nav>
<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 a Glow</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Photoshop Brushes</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Blending</p>
</a>
</li>
</ul>
</nav>
<a href="https://twitter.com/jsyrenne"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="https://www.facebook.com/jared.syrenne"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>©2015 Jared Syrenne</p>
'''
Greg Kaleka
39,021 PointsGreg Kaleka
39,021 PointsCan you edit your post and surround your code with tags like this:
```html
[your html here]
```
```css
[your css here]
```