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

HTML How to Make a Website CSS: Cascading Style Sheets What is CSS?

For some reason my footer will not change to color green.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chris Anzures | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <style> footer { color: green; } </style> </head> <body> <header> <a href="index.html"> <h1>Chris Anzures</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> <ul> <li> <img src="img/numbers-01.jpg" alt=""> </li> <li> <img src="img/numbers-02.jpg" alt=""> </li> <li> <img src="img/numbers-06.jpg" alt="">

  </ul>
</section>

<footer>

    <a href = "http://facebook.com">Visit Our Facebook Page
    <img src="img/facebook-wrap.png" alt="facebook"/></a>

    <a href = "http://twitter.com">Visit My Twitter Page
    <img src="img/twitter-wrap.png" alt="twitter"/></a>

  <p>&copy; 2016 Chris Anzures.</p>
</footer>

</body> </html>

7 Answers

James Romanowski
James Romanowski
6,163 Points

If you're trying to change the background of the footer you should be using background-color: green or background: green

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chris Anzures | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <style> footer { color: green; } footer { color: orange; } </style> </head> <body> <header> <a href="index.html"> <h1>Chris Anzures</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> <ul> <li> <img src="img/numbers-01.jpg" alt=""> </li> <li> <img src="img/numbers-02.jpg" alt=""> </li> <li> <img src="img/numbers-06.jpg" alt="">

  </ul>
</section>

<footer>

    <a href = "http://facebook.com">Visit Our Facebook Page
    <img src="img/facebook-wrap.png" alt="facebook"/></a>

    <a href = "http://twitter.com">Visit My Twitter Page
    <img src="img/twitter-wrap.png" alt="twitter"/></a>

  <p>&copy; 2016 Chris Anzures.</p>
</footer>

</body> </html

I apologize, it looks like it did not paste everything. I have posted the updated html. I believe I closed the final list item?

James Romanowski
James Romanowski
6,163 Points
<meta charset="utf-8">
<title>Chris Anzures | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<style>
  footer {
   background-color: green; 
  }
  footer {
   color: orange;
  }
</style>


<header>
  <a href="index.html">
    <h1>Chris Anzures</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>
  <ul>
    <li>
      <img src="img/numbers-01.jpg" alt="">
    </li>
    <li>
      <img src="img/numbers-02.jpg" alt="">
    </li>
    <li>
      <img src="img/numbers-06.jpg" alt="">
    </li>
  </ul>
</section>

<footer>

    <a href = "http://facebook.com">Visit Our Facebook Page
    <img src="img/facebook-wrap.png" alt="facebook"/></a>

    <a href = "http://twitter.com">Visit My Twitter Page
    <img src="img/twitter-wrap.png" alt="twitter"/></a>

  <p>&copy; 2016 Chris Anzures.</p>
</footer>

It should like something like this.

James Romanowski
James Romanowski
6,163 Points

So as of right now the text in the footer should be showing up as green, correct?

Yessir it should be showing green.

alastair cooper
alastair cooper
30,617 Points

It is still not closed. The last list item in the <section>

Ty for everyone's help! For some reason it wont copy and past everything. I apologize about that. I'll copy and paste the last few lines to below:

<footer>

    <a href = "http://facebook.com">Visit Our Facebook Page
    <img src="img/facebook-wrap.png" alt="facebook"/></a>

    <a href = "http://twitter.com">Visit My Twitter Page
    <img src="img/twitter-wrap.png" alt="twitter"/></a>

  <p>&copy; 2016 Chris Anzures.</p>
</footer>

</body> </html>

Austin Whipple
Austin Whipple
29,725 Points

The color declaration changes the text within an element to that color. If you want to change the background color, you'll need to set background or background-color.

In addition, the color property can be overridden by color declarations on child elements. If you have an anchor tag within your footer, there's a good chance those links will be blue instead of green. You'll need to set the color on footer a in order to override the default anchor text color.

alastair cooper
alastair cooper
30,617 Points

It does not recognise it because you have not closed the final list item.

Your browser thinks the footer is part of that list element.