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 PointsMy CSS code isn't showing up, I change CSS code to say make the background colour orange and its not orange.
main.css is in the css folder on workspaces. I have the css code in this order: <link rel="stylesheet" href="css/normalize.css> <link rel="stylesheet" href="css/main.css">
on the main css tab I have entered the code a { text-decoration: none; }
Yet nothing is happening. Thanks very much for your help. I think its obvious I'm a newbie to coding so please be kind! :) Kazira
10 Answers
tuukka uosukainen
22,107 PointsWhen ever your code does something it should not, a good way to start investigating is to use html validator.
https://validator.w3.org/#validate_by_upload
Great fast way to find errors.
Afrid Mondal
6,255 PointsGenerally we use { text-decoration: none; } for the anchor to remove the underline of it. And if you are trying to color the background of the anchor then just use this......
a {
background-color: orange;
}
This will change all the background color of anchor on the page.
Afrid Mondal
6,255 Pointsfirst of all if you want to paste a code in here enter space 4 times and then paste your code. it will be more readable to us. For help, if you want to change the color of footer text and background just do the same thing as before instead of using a write footer and everything will be fine.
footer {
background-color:
color:
}
color will change your text color and background-color change the background of it.
tuukka uosukainen
22,107 Points<!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/main.css"> <style> footer { color: green; background color: pink; } </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> <p>© 2015 MiaowMail, a student of Nick Pettit.</p> </a> </footer> </div> </body> </html>
Three backticks worked but it seems that your html is on one line so it is a bit hard to read :)
Afrid Mondal
6,255 PointsKazira von miaow , the text on footer is wrapped inside paragraph tag. So. it's more specific to browser. Now all you have to do is write down that......
footer p {
color: green;
}
It should solve your problem.
Kazira von miaow
355 PointsThank you! I am trying to make the text of the footer green but the background pink. It isn't working, this is my code: (thanks!)
<!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/main.css">
<style>
footer {
color: green;
background color: pink;
}
</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>
<p>© 2015 MiaowMail, a student of Nick Pettit.</p>
</a>
</footer>
</div>
</body>
</html>
tuukka uosukainen
22,107 PointsKazira,
Please consider using Markdown Cheatsheet at the bottom of this page to make your code more readable.
EDIT: I see that Afrid already posted the same advice. Thanks Afrid!
Kazira von miaow
355 PointsHey Afrid and Tuukka, Thank you for your message! I read the markdown cheatsheet, it just seemed to say use three backticks before and after which I did. What have I done wrong?
Sorry Afrid but I have done that in my code and it still isn't working as you can see the line of code I am using is:
<style> footer { color: green; background color: pink; } </style>
Thank you for your help and patience guys.
tuukka uosukainen
22,107 PointsIt should be background-color: pink; Instead of background color: pink;
Hope this helps?
Kazira von miaow
355 PointsThank you Tuukka! That was it for background, the background colour is now pink. But the text colour hasn't changed.
Also my copywrite bit is linking to my facebook profile when I click on it, I can't figure out why it is doing that (sorry for all the questions!)
tuukka uosukainen
22,107 PointsI suggest you try selecting paragraph inside footer with:
footer p {color: green;}
Also it seems that you have one extra closing link tag after your copyright info which may be causing the copy link to go to your facebook:
<p>© 2015 MiaowMail, a student of Nick Pettit.</p> </a>
Remove the closing link tag?
Kazira von miaow
355 PointsBefore I had that tag in there that line of text was linking to my facebook profile, so I added the anchor in. Thanks for your help! This is a lot harder than I imagined it would be!