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

Sean Flanagan
Sean Flanagan
33,235 Points

Are my colours interfering with each other?

Hi. I typed in the following the CSS:

a { color: magenta; }

For the body of the web page I typed:

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

According to Nick Pettit, the code for the body text is supposed to change to grey, but it's still magenta.

Where have I gone wrong?

Thanks in advance

Sean :-)

Marcus H
Marcus H
4,267 Points

Hi Sean, how's the studying at OU going?

Sean Flanagan
Sean Flanagan
33,235 Points

The OU? I didn't mention this on my profile. Marcus H? From Leicester? I was in touch with an OU student by the name of Marcus Handa. Is that you?

Marcus H
Marcus H
4,267 Points

yeah, small world lol

Sean Flanagan
Sean Flanagan
33,235 Points

Hey! How are you doing? I suppose my photo gave me away. I've pulled out of TU100 because of stress. 5 consecutive nights of bad sleep. I was afraid I'd crash my car. I've deferred the module until October. I'll have to start again, but I keep the scores from assignments passed and I needn't pay another penny. I just have to register. How go your OU studies?

Marcus H
Marcus H
4,267 Points

That's not good, I hope you feel better soon.

I quit the degree last xmas and have been learning web design/dev since February, I found the TU100 too boring and didn't think computer science was be a good fit for me. I'm really enjoying learning this stuff and hoping I can make a career out of it at some point.

Sean Flanagan
Sean Flanagan
33,235 Points

Since I dropped out, the stress has eased considerably. A friend told me about this site. I've been here less than a week and already I'm enjoying learning about how to create a website. How did you find out about Treehouse?

Marcus H
Marcus H
4,267 Points

I'd done a tiny bit of HTML in the past and thought I might like to try and learn it properly this time so looked at some reviews for good place's to learn and treehouse kept getting mentioned so I started the trial and haven't looked back since. I've been learning at other places as well so that's why my score hasn't gone up much lately.

I don't have you on skype any more, not sure what happened there.

Sean Flanagan
Sean Flanagan
33,235 Points

You've more points than me. How long have you been a member of Treehouse?

Marcus H
Marcus H
4,267 Points

Since the beginning of Feb, what's your skype address again?

4 Answers

Rasmus Willemoes Paulsen
Rasmus Willemoes Paulsen
12,436 Points

In the code you typed only links will be magenta. But regular body copy will be gray. Try have a look at this example I just made.

Sean Flanagan
Sean Flanagan
33,235 Points

Hi Rasmus. Hi Dino. I've just looked my workspace over and worked out what happened. The caption under each picture is a link and the links are magenta. As it stands, I've not yet typed any normal text in the body of the page. I'm confident that'll change later on. Thanks guys. :-)

Sean

Sean Flanagan
Sean Flanagan
33,235 Points

I've removed the hyperlink references under the pictures, as they're not really needed, they just bounce you up to the pictures themselves. Then I refreshed the page and the colour of the body text is now grey. So Rasmus, Dino, thank you both very much. I've only been with Treehouse for 4 days and already everyone has been so supportive. :-)

I need to remember to refresh the page before answering.

It may not cause you any problems later on but I would change it back so both the image and caption is one big link. This way you can learn the fix for the problems rather than changing the html to make the problem go away.

It's possible you haven't gotten to this yet but there is a css rule which changes the color of these captions.

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}

So any text that is inside of a link will need a rule to override that magenta color because text inside of a link will inherit that magenta color.

The h1 and h2 which make up the logo on this project are inside of a link and so they also need their own rule to override that magenta color.

h1, h2 {
  color: #fff;
}

If that is all of your CSS, then the color of the body text should be grey and only links should appear in magenta, as is visible in this example.

Without being able to see the rest of the css and the html my only guess would be that this body text you're expecting to be grey is inside of a link. This would make it magenta if you do not have any other css to make it a different color.

Sean Flanagan
Sean Flanagan
33,235 Points

Hi Jason. I've restored the links. Thanks. :)

Sean

Sean Flanagan
Sean Flanagan
33,235 Points

Hi Jason. Here's my html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sean Flanagan | Medical Records Clerk</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>Sean Flanagan</h1>
        <h2>Medical Records Clerk</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>
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentation with colour and texture.</p> 
          </li>
          <li>
            <img src="img/numbers-02.jpg" alt="">
            <p>Playing with blending modes in Photoshop.</p>
          </li>
          <li>
            <img src="img/numbers-06.jpg" alt="">
            <p>Trying to create an 80's style of glows.</p> 
          </li>
          <li>
            <img src="img/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p> 
          </li>
          <li>
            <img src="img/numbers-12.jpg" alt="">
            <p>Creating shapes using repetition.</p>
          </li>        
        </ul>
      </section>
      <footer>
        <a href="img src="img/Sean.jpg" alt="">
        <p>&copy; 2014 Sean Flanagan.</p>
      </footer>
      </div>    
    </body>  
  </html>

And next is my css:

a {
  text-decoration: none;
}

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

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

a {
  color: magenta;
}

header {
  background: blue;
  border: 3px solid teal;
}

h1, h2 {
  color: #fff;
}

nav {
  background: red;
}

nav a, nav a:visited {
  color: white;
}

nav a.selected, nav a:hover {
  color: #0000ff;
}

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

I hope this helps. Thanks. :-)

Sean

Hi Sean,

It looks like you've removed the links completely. I thought from your earlier comment that you only removed the captions from the links.

You should put the links back in as you see in the project. The point of doing this is so that each gallery item will link to the full size image. You either click the image or its caption and the browser loads the full size image.

Also, it looks like you don't yet have the css I posted which changes that caption color. I would just wait until you get to that part and not worry about the magenta color. It will eventually change once you get to the css I posted.

It looks like you do have the css which changes the logo text to white.