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 How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Joana Querido
Joana Querido
1,778 Points
Posted by Joana Querido
Joana Querido
1,778 Points

Background Color of the Body

In the last bit of video, when we write the code body{ } and we specify background-color as white and color as gray, why is it only affecting the footer? I thought Body would include header, section and footer.

7 Answers

Joe Dayvie
Joe Dayvie
11,956 Points
Joe Dayvie
Joe Dayvie
11,956 Points

Joana,

If you could include your code, that would be really helpful =)

Joana Querido
Joana Querido
1,778 Points
Joana Querido
Joana Querido
1,778 Points

Sure, sorry about that.

The code is

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

What I didn't understand was why this code only affected the footer and not the all Body (header, section, footer) and it I think it should be.

Thanks

Joe Dayvie
Joe Dayvie
11,956 Points
Joe Dayvie
Joe Dayvie
11,956 Points

Joana,

Could you post your entire code here? That way we can see where you have the other tags placed :)

Joe

Joana Querido
Joana Querido
1,778 Points
Joana Querido
Joana Querido
1,778 Points

Don't know if this helps, but my question came in the sequence of the Module "Customizing Colors and Fonts" and the video is "Use Color in CSS".

The code in the CSS.file of the video is:

a { text-decoration: none; }

wrapper {

max-width: 940px; margin: 0 auto; }

logo {

text-align: center; margin: 0; }

a { color: #6ab47b; }

header{ background-color: #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; }

Joe Dayvie
Joe Dayvie
11,956 Points
Joe Dayvie
Joe Dayvie
11,956 Points

Joana,

The code you posted looks fine but I was curious about your HTML code. Make sure that your header, section & footer tags are included in your body. Double check the tags, make sure that they are all closed, etc. I hope that this helps?

Joe

Joana Querido
Joana Querido
1,778 Points
Joana Querido
Joana Querido
1,778 Points

Thanks again for your help Joe. What you're saying makes perfectly sense to me but as I said this code is a copy of the videos, so I assume it is correct. I will finish the course first and then in the end I'll come back with more consistent questions (hopefully) :)

Thanks and we'll speak soon

Joana

Andria Barratt
Andria Barratt
2,639 Points
Andria Barratt
Andria Barratt
2,639 Points

Sorry to piggyback but I was wondering about this as well. If you look at the example in Nick's video, after we apply the changes in main.css to the body, only the background and text color of the footer are changed. The text color of #wrapper is green (in this case, I'm specifically referring to the captions underneath the image gallery photos).

I think what Joana and I are both trying to ask is, why is the font green when no font color is defined for #wrapper in main.css? Where in main.css or index.html is a font color defined for the P element in #wrapper?

This may be explained in a later lesson, my apologies if so. I'm attaching index.html as it should be on this step in the lesson.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Andria Barratt | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Andria Barratt</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="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 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/myusername"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/myusername"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2015 Andria Barratt.</p>
      </footer>
    </div>
   </body>
</html>
Andria Barratt
Andria Barratt
2,639 Points
Andria Barratt
Andria Barratt
2,639 Points

Okay, as suspected, the answer was in a later video, Styling Web Pages and Navigation --> Style the Portfolio.

The text in question is linked text, which explains why it was already styled. Both the IMG and P elements are nested in an A element:

          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>

The relevant line in main.css:

a  {
  color: #6ab47b;
}

Hope that helps. Sorry if my syntax is off.

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points
Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

I don't understand why the header is still green after a rule is established where the declaration sets the body background color to white? Isn't the white background suppose to cascade over the green? After all 'header' and 'nav' are nested in the 'body'.