why h1 is overwriting a class
Hi! I came across with a weird behaviour and wanted to know if I'm missing something.
So, in HTML it looks like this:
<div class="content-quote">
<h1>Good Software, like wine, takes time.</h1>
</div>
And then in CSS we have the following:
.content-quote {
font-size 10px;
}
At this point the font-size doesn't look like 10px, more like 30px.
And then when I add
h1 {
font-size: 10px;
}
it overwrites the class and the font looks like 10px. And it doesn't matter which of them comes first.
There are no relative units in the project and I feel very confused by this behaviour.8 Replies
the
<h1> has a default style that you aren't overriding
these are the browser's default styles on chrome
I thought about this, but when there is no styling applied, its size is let's say 40px. Then when we add font-size 10px to its div, it's 25px. And then when we add 10px to h1, it is 10px. Does it have to do with the default styling?
yes
font-size: 2em makes the <h1> have 2x the font size
with the standard line height, it should be about 25px tall
but you may also have something else overriding it (like a css reset or something like that)hm, ok, I'll try to understand this. I never had this problem before. Thank you!
you're welcome
In your css reset you could add this, it would fix the issue. As previously said you’re not overwriting the default styling for the h1, the wildcard selector targets every element, so it’s telling every element to inherit it’s font size from it’s parent, so your h1 will inherit the 10px from the
.content-quote class. You could even add this directly on the h1 element styles if you wish. Additionally I don’t recommend setting your font sizes in px, it fixes the size and when users change their default browser font size it won’t work on your site, I’d use rem instead.
@natalia9Thank you! Yes, I don't use px for fonts, I was just reviewing a code of a developer that just started to code and was caught off guard with this behaviour 🙂
No worries, ah gotcha