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 trialJanos Antal
1,451 Pointsh1 {...} 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
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
1,451 PointsCool 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
22,986 PointsAwesome!
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 :-)