How could I use CSS to make a H1 look like body text? CSS Specificity?

[Jackv94]

Hey all, I've got a question which is the complete opposite of my first one.

How could I use CSS to make a H1 look like body text? Basically the persons site has a certain aesthetic that would be ruined by making this phrase big and bold like your typical H1.

Would it literally be this?

<div class="h1-body"> <h1> H1 I want to look like body text </h1> </div>

.h1-body {
font-size: 12px;
font-weight: normal;
margin-top: 0px;
margin-bottom: 0px;
}

 

[Jackv94]

I managed to make that work ^ it took some messing around due to the theme CSS over ruling but now I have this issue:

I'm getting multiple H1s from this part of code but I can't find it. From what I understand it's essentially the theme making the title the H1.

“<header class="site-header" itemscope itemtype="https://schema.org/WPHeader"><div class="wrap"><div class="title-area"><h1 class="site-title" itemprop="headline”>”

anyone know how to change this so it doesn’t do that?

 

[Steve]

What platform are you using? If wordpress, what theme? If its a free open source theme, post a link. If not, then as a start look into header.php, or just do a global find for '<h1 class="site-title"' in your chosen IDE

 

[Ryuzaki]

Would it literally be this?

What you did works, but is not what I'd suggest. You've nested your H1 into a useless div just for the sake of over-riding the CSS. What you're really looking for is a way to override it with CSS Specificity.

So you either create new h1 CSS styling and add it to the bottom of the CSS file (lower = override), you inject it into the header using a theme option for custom CSS (inline = override), or you use a more specific nomenclature (specificity = override).

An example of the 'more specific nomenclature,' based on your 2nd post, would be something like:

header.site-header .wrap .title-area h1.site-title {}
​

That's absolute overkill but shows how specific you can get.

So what you'd do is set the h1 element to look the exact same as your body or paragraph tags (you'll have to determine which is telling the text to look a certain way, can be a combination of several elements) but you also need to un-set the ones you won't be using. So if the original h1 features a bold font-weight, you'll need to say font-weight: none; or it will still be bold.

Because it's not actually override, it's "override and keep whatever we didn't address in the override."

I'm getting multiple H1s from this part of code but I can't find it.

That code is fine. So you might have some custom php code after that wrapping the title in an additional h1 or something. If the title isn't being pulled using <?php the_title(); ?> then that confirms it and you can hunt around to find this function the theme developers created.

Also, any of this theme work you do needs to be done in a child theme or you'll lose the work when you update the theme. For the CSS, if it's not in a child-theme CSS file, in the database thanks to a theme options panel, or in a separate CSS file you re-add or added in a child-theme template, you'll lose that too.