Multiple CSS rules on one element

Design help General
1

I am wondering about a couple of things. (I’m new to Webflow, just switched from custom code sites)

If I want a page with many sections, which each have the same class, eg. ‘section’ with settings that apply to all and each has their own unique id, eg. ‘section-a’ with independent settings, I’d do it like this with CSS:

.section {
 display: xyz;
 padding: 20px;
}

#section-a {
 color: white;
}

How would this work on Webflow?
And if I wanted to make a rule for all h1, h2, h3 & p elements to have the same font, but each should have different colors or sizes, how can I do this?

h1, h2, h3, p {
 font-family: xyz;
}

h2 {
 font-size: 55px;

#h2-small {
 font-size: 40px;
}
}

How would this be done?

Thanks.

2

Hey @Milo I think it’s currently not possible to style ID’s without using custom code.
However, in most cases this is not necessary. You can use combo classes for this. First create a global class “Section” like this:

Screenshot 2023-10-18 at 13.35.24

Now add your styles to the class.
If you now want to change the color only for one section, add another class (In Webflow this is called a Combo Class) to this element like this:

Screenshot 2023-10-18 at 13.36.57

Now you can add your custom stylings for “Section A” that will only appear on Elements that have the classes “Section” AND “Section A”.

If you want to style all Headings or Paragraphs (doesn’t matter, it works with all elements the same), just add the element to your page. Click now on “Select class or tag” located in the top right corner:

Screenshot 2023-10-18 at 13.41.46

This menu should open now:

Screenshot 2023-10-18 at 13.43.00

Click on “All H2 Headings” and now add your styles. If you want to override those styles only for one element, add a class again.

Read more about classes in Webflow here:

1 Like
3

Thanks. I’ll look into this.

1 Like