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 trialcudalsuycg
5,118 PointsHierarchy 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
4,122 PointsIt'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
Courses Plus Student 94,610 PointsHi 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.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Dan,
The
a
andbody
tags should both have the same specificity. They are both type selectors.