How can a custom class inherit the CSS styling from a Webflow heading tag?

Publishing help Editor
1

If I have a custom class called e.g. “.heading-h1”, how can I make this class always use/inherit the styling properties of the Webflow H1 heading tag, including all breakpoint adjustments?

It would be very useful to re-use the CSS styles from the H1 heading tag on a different text or heading that is not actually a H1 heading, without having to duplicating lots of styling properties on all the different heading breakpoint breakpoints.

2

The solution is to give the same class to H1 and your other text element. I know that’s not the way you’re looking for, but that’s the CSS answer.

3

Hi @vincent

Thanks for your reply. Hm… the “problem” is that I have to style the global heading tags anyway because these are used by the headings in the rich text element. So, back to start, where I will have two separate stylings for the same thing :frowning:

4

Ok so 2 things:

H1 in RTs can be styled by the class of each RTs. Say my RT has a class .blog-post-body. Click the H1 inside of it, then the selector field, click All H1 then under it click on the blue class badge .blog-post-body to limit the effect of the styling to only h1 inside of RTs with the .blog-post-body class.

CleanShot 2022-03-07 at 14.58.02@2x

Now you can also style using custom code. I put the breakpoints declarations in there too:

h1, .heading-h1 {color:black}
@media screen and (max-width: 991px) { h1, .heading-h1 {color:black} }
@media screen and (max-width: 767px) { h1, .heading-h1 {color:black} }
@media screen and (max-width: 479px) { h1, .heading-h1 {color:black} }

Note that if the custom code is placed in an Embed component, inside of the Navbar symbol for example so it’s on all pages) the effects of the css code will be seen right in the Designer.

There’s also the question of why you’re naming a text element .heading-h1 but it’s not a h1…

1 Like
5

Hi Vincent

Thanks, custom code looks like a great workaround! I have used the heading-h1 class on headings that I want to look like a H1, but is actually not a H1, ref that a page should only have one H1 for good SEO. As I understand it Google is picking up the H1 tag not a class named e.g. .h1

1 Like
6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.