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!

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 Center the Wrapper

Kazira von miaow
Kazira von miaow
355 Points

My 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

When 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
Afrid Mondal
6,255 Points

Generally 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
Afrid Mondal
6,255 Points

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

<!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>&copy; 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
Afrid Mondal
6,255 Points

Kazira 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
Kazira von miaow
355 Points

Thank 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>&copy; 2015 MiaowMail, a student of Nick Pettit.</p> </a> </footer> </div> </body> </html>

Kazira,

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
Kazira von miaow
355 Points

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

It should be background-color: pink; Instead of background color: pink;

Hope this helps?

Kazira von miaow
Kazira von miaow
355 Points

Thank 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!)

I 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>&copy; 2015 MiaowMail, a student of Nick Pettit.</p> </a> 

Remove the closing link tag?

Kazira von miaow
Kazira von miaow
355 Points

Before 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!