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 Responsive Web Design and Testing Adjust the Profile Page and Header

Janos Antal
Janos Antal
1,451 Points
Posted by Janos Antal
Janos Antal
1,451 Points

h1 {...} do not work for me only #logo h1 {...}. Why?

Hello,

I could only apply the font-size: 2.5em; to h1 if I used #logo h1 declaration, I did not work with simple h1 {font-size: 2.5em}. Same with h2.

Why is that?

2 Answers

thomascawthorn
thomascawthorn
22,986 Points 
#logo h1 {

}

is a more specific selector that h1 alone. The more specific your declaration, the more 'importan't it comes i.e. to over ride that rule, you're going to have to use a selector as specific or more specific than the previous delcaration.

E.g. if you had an H1 with the id of logo:

h1 {
    color: red;
}

The h1 will be red

h1#logo{
    color: red;
}

h1 {
    color: blue;
}

the The H1 with an id of logo will remain red, even though you've tried to overwrite the rule below it.

Can you show some of your css?

Janos Antal
Janos Antal
1,451 Points
Janos Antal
Janos Antal
1,451 Points

Cool I got the point thx! I can show to you if you are interested :)

These are the h1 parts in main.css

h1,h2 {
    color:#ffffff;
}


header h1 {
    font-family:'Changa One', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height:0.8em;
}

and this is the responsive.css (without #logo)

h1 {
        font-size: 2.5em;
    }

I guess then header h1 is more specific then h1 based on your explanation. But actually in the index.html the responsive.css declaration is after the main.css, so it should be "more important", or not? <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css">

thomascawthorn
thomascawthorn
22,986 Points

Awesome!

Yeah, because you've declared a previous style with a more specific selector (main.css), then less specific declarations in responsive.css will take a lower precedence than previous rules.

Check out the final badge (Fundamental Concepts) on the css basics course - Specificity and Source Order might be what you're looking for to help explain further :-)