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
Kazira von miaow
355 PointsUse ID Selectors. I can't get the background colour of the website to change! Thank you for help
I've cleared the cache Saved & refreshed the page Checked css is in lower case and is in the right place
Please note- I added in <footer a> and </a> because previously the "©" bit of code was linking to my facebook profile. Putting in these tags stopped the copyright linking to my facebook. Others have commented but even without these the background colour didn't change. Thank you for your help!
My html
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main2.css">
<style>
footer a {
color: pink;
}
</a>
</style>
</head>
<body>
<header>
<a href="index.html">
<h1>Nick Pettit</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>
<div id="wrapper">
<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="https://twitter.com/mariposa4444"><img src="img/twitter.png" alt="Twitter Logo"></a>
<a href="https://www.facebook.com/monifa.alfayed"><img src="img/facebook.png" alt="Facebook Logo"</a>
</footer>
<a><p>© 2015 MiaowMail, a student of Nick Pettit.</p></a>
</div>
</body>
</html>
and the css:
<head>
<style>
body{ background-color: green; }
</style>
</head>
7 Answers
Mike West
9,163 PointsKazira-
There's a few ways to do this:
In your html you're linking to a main2.css file. Is that the name of your css file on the sidebar in workspaces? In the video he titled his "main.css" Make sure whatever file you're linking to in the html matches what you have a css or js file name. Also for your css you used styling elements which I don't believe work when you use and external style sheet. Style works for inline styling. I linked to an external style sheet and you can get your background green two ways depending on what you're looking to achieve:
whole body of page green:
body {
background-color: green;
}
all of your content wrapped in the div wrapper
#wrapper {
background-color: green;
}
Hope this helps
Kazira von miaow
355 PointsHi Mike!
Hallelujah! It worked!!!
What is inline styling? The main.css is an external style sheet?
So I'm using wrong code ? Basically I had been stuck on this task for a day and added in code on the suggestion of the helpful people here. I gave up yesterday and started again today. Thank you!
Konrad Pilch
2,435 PointsShoudnt you do it like
#wrapper {
background-color: green;
}
It tells you to use ID selector. Not a body tag. Try that.
Kazira von miaow
355 PointsThank you! Unfortunately it didn't work! I've been stuck on this for a day now... are there problems elsewhere in my code? Thank you for your help
Konrad Pilch
2,435 PointsCould you link me to that challenge please?
Kazira von miaow
355 PointsIts not a challenge per se, I'm trying to follow along the video USE ID SELECTORS. This is the video: https://teamtreehouse.com/library/how-to-make-a-website/css-cascading-style-sheets/use-id-selectors
Thank you!
Konrad Pilch
2,435 PointsTry this:
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
background: orange;
}
<div id="wrapper">
<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 80's 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/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
Also check out if you are connecting to the right styles. if it works.
Kazira von miaow
355 PointsWhat do you mean by connecting to the right styles?
Frustratingly, it didn't work! Thank you for your help and patience though.
Konrad Pilch
2,435 PointsChange this
<link rel="stylesheet" href="css/main2.css">
To
<link rel="stylesheet" href="css/main.css">
Tell me if it worked.
Kazira von miaow
355 PointsIt worked! Thank you!
Mike West
9,163 PointsHi Kazira-
Don't ever give up on this stuff! I ask a lot of questions on here. You will often get stuck, but most of the people here have been very supportive and your question will almost always get answered. Very awesome community. I don't remember if they go over it in the first module, but check this out:
Three types of CSS, as you progress through the modules you will focus on external style sheets. External means the styling of the content is being pulled from an external source (a different file than your html). In this instance that file is main.css Internal and inline are both methods of styling the content of your html by doing so within the html
Kazira von miaow
355 PointsThank you! I will :)
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsOne thing, are you new to this? Do you want to join a slack group where we help each other and work on projects? Well anyone can join.