CSS font-size understanding

Question

So I've made a basic WordPress design and I've got this CSS problem which I can't understand. I am using 2 CSS classes for the title but in order for the title to change size I need to change both of them. Am I doing something wrong or am I missing something?

The code is something like this:

<header>
    <h1 class="entry-title" align="center">Title goes here</h1>
</header>

CSS:

.entry-title {
    font-size: 25px;
    font-style: italic;
}

h1 {
    font-size: 30px;
}

I was trying to change the title size when people are viewing it from a mobile device. I tried changing h1 all together, didn't make a difference, then changed entry-title, didn't make a difference and then I changed both of them and worked :/

Can you please let me know what am I doing wrong?

Thanks!

Answer 1

.entry-title and h1 both match the element.

A class selector is more specific than a type selector.

Any properties set in the ruleset with the class selector will override any set in the ruleset with the type selector.