How to Style All H3s in a Container?

Design help General
1

I would like to apply style to all H3s in a container, but can not find a way to do it. I can apply style the H3 tag or the container class, but the selector wouldn’t be specific enough. I could create a special class for these H3s, but then I would have to remember to apply the class to each H3.

When writing CSS directly, I would do something like this:

.container h3 {
  property: value;
  line-height: 30px;
}

I found this forum post 2013 that suggests that what I want to do is not supported.

Is there a way to achieve this or is there a better practice?

Thank you!

2

@ColleenBrady add that code to the custom code section in the project settings :slight_smile:

3

@sarahfrison Thank you. I had not considered that approach. In a way, that would fit into the workflow that I am used to already. For example, I’ll sit down and sketch out things like

<div class="container">
    <div class="box box-1">1</div>
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
    <div class="box box-4">4</div>
</div>

and create the initial CSS file to support what I’m thinking of building.

It’s a bit of a transition to adjust past workflow into Webflow and ensuring that I’m best using all that Webflow has to offer.

1 Like
4

Actually Webflow offers you a better way to style all H3s.
I don’t know if by that time when this post was created this feature was already available, but I will just write here anyway for future knowledge.

Solution:
When you select a H3 element, go to Style Selector on the left side properties and click on that textbox. There you will see a list of available classes and on the top in pink, you can see a base selector called “All H3 Headings”. Select that one and then style your heading as you want. Every styling you do there will apply to all H3 in your website.

Screenshot 2024-04-04 at 11.49.12

5

Just FYI, this has been around for ages.
OP was wanting to style H3’s within a specific container element, so custom CSS is the right approach for this requirement.

1 Like