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

Ruthran Chandrasekar
Ruthran Chandrasekar
967 Points
Posted by Ruthran Chandrasekar
Ruthran Chandrasekar
967 Points

The cascading nature of CSS

In this video where the CSS file is being organized with comments, the anchor <a> element is put below the logo text (h1, h2). So why are the headers still white when all the links get changed to green?? The cascading nature should have overwritten the code for making the headers white as both the h1 and h2 headers are links (anchored) right?? Shouldn't they too be green?

video: https://teamtreehouse.com/library/how-to-make-a-website/customizing-colors-and-fonts/organize-css-with-comments

nik
nik
8,925 Points

Which video?

3 Answers

Nick Field
Nick Field
17,091 Points
Nick Field
Nick Field
17,091 Points

This has rattled my brain! I believe the answer is as follows but please correct me if I'm wrong...

In the HTML file, the heading (H1) exists inside the anchor element (<a>)...

     <a href="index.html" id="logo">
      <h1> Heading Example </h1>
    </a>

So the H1 has a higher specificity than the anchor element, which means that regardless of the order of rules in the CSS file, certain H1 rules (like color) applied will override the same rules defined by its parent anchor element, because of H1's specificity.

try placing the anchor element inside the H1 instead, as follows;

     <h1> <a href="index.html" id="logo"> Heading Example </a></h1>

and see what happens when you style the heading in the CSS file this way.

For more info on specificity check out this link

P.S. this is my first post! I've just completed the CSS basics course so am referring to the info at the end of the course, please correct me if I'm wrong :)

akshaythakur
akshaythakur
33,838 Points
akshaythakur
akshaythakur
33,838 Points

Best way to identify and debug css related problem is to use "Developer Tools".So go ahead and open Developer tools (F12 for chrome)and check which css rules are applying to webpage.

nik
nik
8,925 Points
nik
nik
8,925 Points

Ah I see what you're saying. The header (h1 & h2) text still remain white because there is no css specified to change it's color. The only instance this would matter is if you placed the same rule in the same file. The second rule would take effect because it overrides the first.

h1, h2 {
  color: #fff;
}
h1, h2 {
  color: #000;
}

Or you create another file, link it in the html file below the main.css and repeated the rule with a different color value.

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/example2.css">

(lol sorry for the multiple edits)