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 cudalsuycg
cudalsuycg
5,118 Points

Hierarchy of tags in CSS

In this video, we initially wrote a rule for the <a> tags to set the color to green as in a { color:#6ab47b; }

Later we add a rule-set for the body tag as in.. ( which means set the color of ALL the elements of body tag to grey.. Am i right with this?!) body{ background-color:#fff; color:#999; }

After these rules are applied the links in the body tag continue to be green ( #6ab47b), Shouldn't the rule set for body overrides the previously written rule set for <a> and make the color of links in the body grey, and not green?.. does the order in which the rules appear in the .css file not matter in this case.. I have a slight confusion with that..

2 Answers

Dan Gamble
Dan Gamble
4,122 Points
Dan Gamble
Dan Gamble
4,122 Points

It's to do with specificity. The a tag is more specific than a body tag. A body tag is one of the least specific tags and is generally used to lay out a base principle of the CSS (Font, Font Size, Text Color etc.).

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Dan,

The a and body tags should both have the same specificity. They are both type selectors.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Prutha,

It has to do with inheritance. I think you'll find that even if you do not set the links to green beforehand, they still will not turn grey like you might expect. This is because browsers have a default color that they apply to links. Usually this is blue, and I think they usually turn purple after having visited them. The reason the grey color can't be inherited from the parent is because the color has already been set to something. Either by the browser (blue) or by you (green).

This table should help you out:
http://www.w3.org/TR/CSS2/propidx.html

If you take a look at the row for color, you'll see that color is an inherited property but it's initial value depends on the user agent

If you try something like this:

a {
    color:#6ab47b;
}

a {
    color: inherit;
}

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

I think you'll find that the color of the links do become grey. Setting the color back to inherit states that the link should inherit the color from its parent.