Not able to change properties of an h1 element-CodePudding

So I'm trying to change the font size of an h1 element and it is not changing. I used developer tools to see what is happening and this is what I found.

@media (min-width: 1200px)
.h1, h1 {
    font-size: 2.5rem;
}

It said that the above was active and thus my h1 style in my css file was not kicking in. Does anyone know what this is?

The same happens when I try to change my font weight. Something like this is active and it is not allowing me to change the font weight.

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color); 
}

Can anyone please help me here?

CodePudding user response：

You can use !important to apply your changes. Just like this:

font-size: 3rem !important;

So, it gives priority to your styling and you will be able to change your font-size.

CodePudding user response：

You have 2 Options :

Load your CSS/CSS files before these properties so that your element get the required properties.
You can use !important but it can cause issues in the future if you want to change the properties of these HTML tags again.