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

Kevin Murphy
Kevin Murphy
24,380 Points
Posted by Kevin Murphy
Kevin Murphy
24,380 Points

Question about styling specificity - Why does applying color declaration to body element not change color of all elements contained in body?

Stumbled across some unexpected behavior while experimenting. Noted that despite a number of paragraph elements being nested within the body element that the only paragraph element that changed text color was a paragraph in the footer.

The <p> elements that did NOT change color were part of an unordered list element. The "bullets" of the <ul> element did in fact change color however. 

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

This seems strange to me. If the only CSS color styling applied is the rule --- body {color: yellow;} --- Why would the paragraph elements within the ul NOT change color as well when that rule is applied?

3 Answers

nik
nik
8,925 Points

links don't inherit body styling or color. They would default to the standard of the browser settings if no styling is set in general.

Kevin Murphy
Kevin Murphy
24,380 Points
Kevin Murphy
Kevin Murphy
24,380 Points

Ahh inheritance! That makes sense as well... otherwise you'd be constantly re-styling your links a lot more than would ever want to. Thanks for the clarification Nik. ...Time to take a break :)

nik
nik
8,925 Points

no prob take care !

Jennifer Rai
PLUS
Jennifer Rai
Courses Plus Student 13,164 Points
Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

Hi Kevin,

Is there any style applied to links in the CSS? The paragraph you have there is inside of an "a" tag, so if you have a style defined for links that would take precedence over the style for the body tag.

Even without a color defined in your CSS for links, your browser's default style will most likely take over because it is a link.

Kevin Murphy
Kevin Murphy
24,380 Points
Kevin Murphy
Kevin Murphy
24,380 Points

Hi Jennifer,

Thanks for the reply. (Didn't see it prior to my follow up post). Your point about the browser applying default styling b/c it's a link is dead on.

What I'm not clear on now, is why? Seems like I may be missing something foundational regarding links and how they fit into the html hierarchy...

Kevin Murphy
Kevin Murphy
24,380 Points
Kevin Murphy
Kevin Murphy
24,380 Points

Further experimentation indicates that it is due to the paragraph element being wrapped in an anchor tag. 

 <ul>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
              <p>This text does not change colors (nor does the text directly above</p>
            </a>
            <p>This text does change colors</p>
          </li>

Hmm any thoughts as to what am I missing regarding where anchor elements fit within the DOM particular to styling?