h1 tag not changing its font size-CodePudding

I'm facing problem in changing the font size of h1 tag with CSS.
I have set the size to 4rem, but it doesn't change.

Originally in the dev-tools h1 is showing- dev-tools_img_1

And the h1 tag looks like this- h1_(1)

But i want the h1 tag to be like this- h1_(2)

It works perfectly when i edit in the dev-tools- dev-tools_img_2

Code for CSS-

#title {
    background-color: #ff4c68;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem;
    Line-height: 1.5;
}

.container-fluid {
    padding: 3% 15%;
}

CodePudding user response：

Above ans is right. Just adding explanation. You might be having a css file in your html file which is overriding your internal css. To override that one, You need to put !important to your properties.

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem !important;
    Line-height: 1.5;
}

CodePudding user response：

Try to use !important:

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem !important;
    Line-height: 1.5;
}

CodePudding user response：

Seems like you have an external library Reboot that is taking over the styling. You need to increase the specificity of your tag.

<h1 >Meet your friends</h1>

h1.title {
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem;
    Line-height: 1.5;
}

You can also use !important but it is not considered a good practice, at least in simple use cases like this one where adding a class will suffice.

CodePudding user response：

h1.hadeline {
        font-family: 'Montserrat', sans-serif;
        font-size: 4rem !important;
        Line-height: 1.5;
    }

<h1 >Meet your new and ....</h1>