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

Publishing help Editor
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