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

CSS

CSS Classes Exercise: My text at footer is Not gray like Nicks?

Trying to figure out my code discrepancy. My text is not the same as Nicks in the video. In the video Nicks text... "copyright symbol 2014 Nick Pettit" is now in GRAY. ....mine is still in GREEN?

Here is my CSS code:

body { 
  background-color:#fff;
  color: #999;
}

Hi Bob,

Could you post the HTML as well? And any more CSS if it exists.

All the best,

Ede

Do you have a green colour style set on the footer element? This would override the body styling. Without seeing all the html/css it's difficult to give further advice but hope this might help.

7 Answers

No probs. Glad to help. Embedded css will always override external css and inline css will always overide embedded AND external css. Unless you start adding !important but you can read up on that later. Good tips to remember. Don't forget to select my answer as correct to help others. Happy coding! ;o)

Sure Here is my full CSS. I'll get the HTML for ya next.....

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

#logo {
  text-align:center;
  margin: 0;
}

a{
  color: #6ab47b; 
}

  header {
    background:  #6ab47b;
    border-color: #599a68;
}

h1, h2 {
  color: #fff;
}

nav {
  background: #599a68;
  }

nav a, nav a:visited {
  color:#fff;
}

nav a.selected, nav a:hover {
  color: #32673f;
}

body { 
  background-color:#fff;
  color: #999;
}

Here is the HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bob Beaumont | Designer</title>
  <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  <style>
    footer {
      color: green;
    }
    </style>
  </head>
  <body>
    <header>
      <a href="index.html" id=logo>
        <h1>Bob Beaumont</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contat.html">Contact</a></li>        
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul>
          <li>
            <a href="img/numbers-01.jpg"<a>
                <img src="img/numbers-01.jpg" alt=""> 
                <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg"<a>
                <img src="img/numbers-02.jpg" alt=""> 
                <p>Playing with blending modes in photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg"<a>
                <img src="img/numbers-06.jpg" alt=""> 
                <p>Trying to create and 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg"<a>
                <img src="img/numbers-09.jpg" alt=""> 
                <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg"<a>
                <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="Tiwtter Logo"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebok Logo"></a> 
        <p>&copy; 2015 Bob Beaumont.</p>
      </footer>
    </div>
  </body>
</html>

You have an embedded style in your header. Remove the footer { color: green; } from in between the style tags and the body color will kick in. Sorry need to read up on how to add code to posts!!

<style> footer { color: green; } </style>

Thanks! So I don't remember Nick removing that on the video. If I missed it, I guess I assumed what we were now doing in CSS was overriding what had been done in HTML. ........

I'm brand new here, so I'm just getting the hang of it.
Thanks for the amazing quick reply and talented Eye for seeing things I don't yet see! Bob.

Yes. Thanks for the tips. It's a bit confusing to me at this point, but I understand from what you are saying there is a rule hierarchy. I'll remember you when this comes up again. Thanks Damian! (Best Answer checked!)