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 Customizing Colors and Fonts Use Classes in CSS

Anastasios Ioannou
Anastasios Ioannou
3,616 Points
Posted by Anastasios Ioannou
Anastasios Ioannou
3,616 Points

the color I have set for the body text in .css does not appear on the website

Hello ,

I have been following the whole course and I am building a mockup website for learning purposes parallel to the course examples. I am fairly new to this.

In the end of the video the tutor says that in the .css file we write:

body { color: #999 }

and then he shows the footer text (@ Nick Pettit) which has taken the color grey (#999)...

For some reason this doesn't work in my code and I cannot find out why....I am looking between the html and the css and I cannot trace why this is not happening with my file. The bullets next to the photos are changing to grey as they should be but not the text in the footer which is in the body.

Could you please tell me what am I missing here?

I could also send you my code for the html and the .css if want to have a look. I am sure an experienced developer could spot the mistake very fast.

Thank you very much and looking forward for your answer.

Best Tasos

the html code:

```<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tasos Ioannou | PhD</title> <link rel="stylesheet" href="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\CSS\normalize.css"> <link rel="stylesheet" href="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\CSS\main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Tasos Ioannou</h1> <h2>PhD</h2> </a> <nav> <ul> <li> <a href="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\Front Web Development example code.html" class="selected">Publications</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="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\my Pictures\fremen.jpg">
                <img src="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\my Pictures\fremen.jpg" atl="">
                <p>We are generalists. You can't draw neat lines around planet-wide problems. Planetology is a cut-and-fit science.</p>
            </a>
          </li>
          <li>
            <a href="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\my Pictures\Nafpaktos.jpg">
                <img src="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\my Pictures\Nafpaktos.jpg" atl="">
                <p>Nafpaktos</p>
            </a>
          </li>
          <li>
            <a href="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\my Pictures\Hong Kong Harbor.jpg">
                <img src="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\my Pictures\Hong Kong Harbor.jpg" atl="">
                <p>View of Hong Kong Harbor.</p>
            </a>
          </li>
          <li>
            <a href="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\my Pictures\Hong Kong pigeon.jpg">
                <img src="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\my Pictures\Hong Kong pigeon.jpg" atl="">
                <p>Asian Pigeon in the Hong Kong Zoo.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://www.linkedin.com/in/tasos-ioannou-5759115?trk=nav_responsive_tab_profile"><img src="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\my Pictures\linkedin.png"></a>
        <a href="https://www.researchgate.net/profile/Anastasios_Ioannou"><img src="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\my Pictures\researchgate.png"><a/>
        <p>&copy; 2016 Tasos Ioannou.</p>
      </footer>
  </div>
</body>

</html>```

AND THE .CSS code:

```a { text-decoration: none; }

wrapper {

max-width: 940px;
margin: 0 auto; 
padding: 0 10%;

}

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; }```

7 Answers

Craig Garner
Craig Garner
25,732 Points

Can you email me at c5r7a9i9g3c7g9a6r7n7e8r@gmail.com Send the files if you want. Just take all the numbers out for my email.

Craig Garner
Craig Garner
25,732 Points
Craig Garner
Craig Garner
25,732 Points

I believe the most significant wins. Add css to the footer like the header.

Anastasios Ioannou
Anastasios Ioannou
3,616 Points
Anastasios Ioannou
Anastasios Ioannou
3,616 Points

Hello Graig,

Thank you for your reply and your time on this,

but i add, let's say, this in the .css:

footer { color: #fff; }

then I guess this part:

<p>© 2016 Tasos Ioannou.</p>

that you can see in the footer in the html that I have posted above should appear in white (#fff=white), no? but it doesn't... Is it possible that the .css code is wrong? I mean is fairly easy and straight forward, when I add background-color: red; for example for the footer then the background becomes red indeed, but the text doesn't change color...maybe the mistake is in the html?

Craig Garner
Craig Garner
25,732 Points

background-color ?

Craig Garner
Craig Garner
25,732 Points

as you have it, you have white text and a white background

Anastasios Ioannou
Anastasios Ioannou
3,616 Points
Anastasios Ioannou
Anastasios Ioannou
3,616 Points

Hey Graig,

what I meant is that now I have the .css like this: body { background-color: #fff; color: #999; }

the back ground appears white as it should be but the letters appear green while #999 is grey...

when I experimented a bit to see if something else is wrong I found out that the back-ground color changes when I change its value but the text color always stays the same (green) no matter what value i use for color:

looking forward for your answer and thank you very much for this...

best Tasos

Craig Garner
Craig Garner
25,732 Points
Craig Garner
Craig Garner
25,732 Points

Add a footer css entry like you did for the header. It is green because that is what is in your body :)

Anastasios Ioannou
Anastasios Ioannou
3,616 Points
Anastasios Ioannou
Anastasios Ioannou
3,616 Points

Hey Graig,

so i left the body as it was and i added a new css entry for the footer. Now it looks like this:

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

But still the footer letters are green! If I change the background-color of the footer, it works properly. If I change the color for the text of the footer it doesn't respond to any value!

This weird right? Since the footer is after the body it should be overriding the commands of the body, no? If you copy my html and you make a css file this few line I posted here you can see for yourself...unless I am going crazy because this really seems dead simple...

the thing is that above there is this rule: a { color: #6ab47b; } which colors green the <a>...</a> connected elements but shouldn't the last rule about the footer overrule this a { color: #6ab47b; } rule?

Thank you again for the answers you have given me already...

best tasos

Morten Larsen
Morten Larsen
12,275 Points
Morten Larsen
Morten Larsen
12,275 Points

<a href="https://www.researchgate.net/profile/Anastasios_Ioannou"><img src="C:\Users\Tasos\Desktop\Tasos\Work\Rockboost\Own website\my Pictures\researchgate.png"><a/>

The reason is you have made the end anchor tag wrong.

you have it <a/> it should be </a>

Try edit that, then it should work.