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

Posted by samsam232
samsam232
3,372 Points

CSS order priority confusion

Course: How to make a website (by Nick Petit) Section: Customizing Colors and Fonts Video: Use Classes in CSS

So in the main.css, Nick sets the text color of links to green.

a {
  color: #6ab47b;
}

Then, after this line, on the bottom of the css page, he sets the text color of body text to light gray.

/* site body */
body{
  background-color: #fff;
  color: #999;
}

My question is: why doesn't the color property (#999) of body selector override the one from anchor (#6ab47b)? The text on links still appear green; why isn't it gray?

1 Answer

Jon Benson
Jon Benson
12,168 Points
Jon Benson
Jon Benson
12,168 Points

Hi Bassam,

Nick is styling two different elements, the<a> and then the<body> .The styles only override if they are called upon to style the same element at a later time. Hope that helps. Jon

samsam232
samsam232
3,372 Points

Thanks for your answer. I also just figured out that setting a value to a more specific selector such as the 'anchor' in my case will not be overwritten by a wider selector such as 'body' , no matter the order in the css file. (Nick said it in the video "Resize Text")