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

HTML

Posted by Simon Owerien
Simon Owerien
991 Points

Question: Order of css-files loading into the html-file

Hello, why does Chrome prioritize a css-rule in my "normalize.css"-file over a rule in my "main.css"-file? If I´m using the chrome developer tool I can see how the font size of the "normalize.css"-file is used instead of the rule in "main.css".

The html-file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Simon Owerien | Home</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>

[...]

<div id="contact">
        <div id="contact-info">
            <h2>Informationen<h2>
            <p>Dies ist ein Informationstext. . </p>
            <p>Dies ist ein Informationstext. </p>
        </div>
        <div id="contact-links">
                <ul>
            <li><a href="..." target="_blank">Mein Facebook-Profil</a></li>
            <li><a href="..." target="_blank">Mein LinkedIn-Profil</a></li>
            </ul>
        </div>
        </div>
[...]

The main.css-file:

[...]
#contact {
    font-size: 1.32em;
}
[...]

The normalize.css-file:

[...]
h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}
[...]

Thanks for any help

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

It might be because H2 is being picked up as a more specific selector.

Since the H2 in your document has many parents it may be overriding the ID selector. I know that #contact is by definition a more specific selector it seems to be a container element.

I'm not 100% sure on that but it's the only thing I can think of that the normalize css being prioritised.

Simon Owerien
Simon Owerien
991 Points

Thanks for the answer. It seems you are right. Instead of using :

#contact {
    font-size: 1.5em;
}

I´m now using:

#contact a, h2, p {
    font-size: 1.5em;
}

And it´s working just fine. But im still confused about it because I thought that css is working "cascading", so it should override the font-size in "normalize.css", should´nt it?!?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

It should do I agree,

But when I find these conflicts I usually just add a matching Selector so the files will definitely override.

It might be defaulting to the normalize H2 if you don't have a matcing H2 in your main CSS file. :-)

Neil Anuskiewicz
Neil Anuskiewicz
11,007 Points
Neil Anuskiewicz
Neil Anuskiewicz
11,007 Points

It is confusion actually. I don't have anything useful to add other than I did some searches to see if I could try to really understand how it works. I found a few things that I've added to my reading list: