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

Posted by Kelley Grayson
Kelley Grayson
500 Points

Why does the text color set in the body not change the text color for the picture captions?

We added the following code which changed the caption text from blue to green.

a { color: #6ab47b; }

Then in the last step for this section we changed the text in the body to grey, but it only affected the text in the footer.

Based on someone else's question and the response given, I assumed that the the text remained green because the anchor code is at a higher level than the body code so it took precedence. Going with that theory, I deleted the anchor code, saved and refreshed. I expected to see the captions turn grey since there didn't appear to be any other code that would compete with the CSS body code now, but the captions remained blue.

Why is that? Especially since all of the code is in the body? I thought maybe because the captions are part of the section selector, but the text that did change color is defined in the footer selector so that couldn't be the explanation.

I hope I'm explaining this well enough.

Thanks, Kelley

jaredcowan
jaredcowan
11,808 Points

Can you paste some of your code so we can help you.

P.S. Links are blue by default in the browser. Is that what you're talking about?

3 Answers

David Roberts
David Roberts
6,191 Points

Let me see if I understand your question:

When you add a { color: #6ab47b; } to your css all your links turn green, but when you remove it they turn blue, even though you have changed the body font color to #999. Is this correct?

If this is your question, then things are working as they should. The default a (used for links) is blue. The body color doesn't affect them. It would only affect the p, h1, h2, h3, h4, h5, h6 elements. Using the body tag this way just sets all the text in your document. It sounds counter intuitive, but the link elements aren't seen as "text" which is why they are ignored by the body declarations.

If this isn't your question, please try to clarify.

Kelley Grayson
Kelley Grayson
500 Points

Thanks David. That was my question. As soon as you said that the link elements are really seen as text it clicked for me.

Kelley

David Roberts
David Roberts
6,191 Points
David Roberts
David Roberts
6,191 Points

Can you please post the code? I would probably guess that the picture caption links have specificity that needs to be accounted for. There most likely needs another selector in the css to be able to "grab" those links.

Hard to guess without seeing it.

Kelley Grayson
Kelley Grayson
500 Points
Kelley Grayson
Kelley Grayson
500 Points

Hi Jared and David,

I've included the code from my index file. Specifically I'm referring to the paragraphs in the section portion of the code. By default they are blue, but as soon as I add this anchor code

a { color: #6ab47b; }

in my CSS file it changes it to green. That's working as expected. When I add this code at the end of my CSS file

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

my footer turns grey. Again, working as expected. I was just wondering why the paragraphs in the section do not turn grey if I removed the anchor code listed above from my CSS file. They default back to blue.

Thanks, Kelley

<body> <header> <a href="index.html" id="logo"> <h1>Kelley Grayson</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/kelleygrayson"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/kelley.gryson.1"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>Ā© 2014 Kelley Grayson.</p> </footer> </div> </body> </html>