Ask coding questions

← Back to all posts
CSS h1 Selector doesn't change style?
OldWizard209 (1526)

So I am making a website, if you can call it that , using Bootstrap 4. And if you see in the styles.css file, I have specified the h1 to change like:

h1 {
    font-family: 'Montserrat-Black', sans-serif;
    font-size: 3rem;
    line-height: 1.5;
}

But if you run the website, nothing changes. Why is that so?

Answered by Coder100 (18118) [earned 5 cycles]
View Answer
Comments
hotnewtop
Coder100 (18118)

because bootstrap overrode it. You have to place !important

h1 {
    font-family: 'Montserrat-Black', sans-serif!important;
    font-size: 3rem!important;
    line-height: 1.5!important;
}

to show css this is more important than the dumb ones bootstrap gives

OldWizard209 (1526)

Lol, I got the same exact answer on SO, at the same time. @Coder100

But thanks anyway :)

And it stays the same still....

Coder100 (18118)

@OldWizard209

make sure the font works and is loaded, because in the css it works.

OldWizard209 (1526)

DW, I got it fixed. Thanks anyways. @Coder100

Coder100 (18118)

nice
what was the solution? @OldWizard209

OldWizard209 (1526)

So rather than overwriting the h1's css, I just changed the font-size and line-height of the h1 tag and created another class , "Montserrat" and changed the font from there and it works. And also my dumb dumb brain forgot to import the google fonts thingy on top so yeah, I am stoopid. @Coder100