I feel stupid - styling html elements within a class

Ask us anything How do I?
1

Ok so I’m fresh to weweb but have been writing html/css since when we were still using tables instead of divs… And I’ve been using web flow for a couple years. Hence I feel stupid for not figuring this out by myself…

Let’s say I create a div, and I give it a class of ‘intro’.
I then put text elements in there, and also text elements that are within other elements, etc.
I should be able to style all text elements within ‘intro’ without having to manually select each text element and bind a class to them. Basically doing either this:
.intro {
color: red;
}
Or this
.intro p {
color: red;
}
In webflow, I just select the div, and on the right side go to the text styling and off you go. But in weweb if I select the div I don’t get any text styling options. If I select the child text element I do get text styling options, but they only apply to that single text element.

I’m truly at a loss here, this should be dead simple basics, why is this either so hard, or not supported?

Hope someone can explain the logic here and proper way of doing this? Thanks!!

2

Not sure, why there are no text styling options for a div. But you can achieve the desired effect with custom CSS applied to the div. This also works with classes.

Bildschirmfoto 2024-07-21 um 08.20.11

1 Like
3

Hmm sure, that would work but I was trying to figure out how weweb would want/expect me to do it? Seems like too simple of a thing to revert to custom css?

I dragged in the top navbar element and simply want to style the links all at once, how would you do it? Create a class on one of them and add that class to each link? I mean it seams very unintuitive but if that’s the best practice for weweb I’ll adapt to it :sweat_smile:

4

Hey @nealzie :wave:

I used Webflow a lot so I totally get where that’s coming from :smiley:

Few options, depending on how you structured your project, to make editing faster:

  • Use classes like you described
  • Create Link components
  • Multi-select elements and batch edit their properties or batch apply class
1 Like
5

Thanks! Good to know I’m doing things the right way now…

I have another one though:

  • I have an element, and give it a class
  • I go to state > hover, and style the hover state
  • I can’t seem to ‘save’ the class settings while in hover state. Also the hover state styling doesn’t get applied to other elements with the same class?
6

You’ll need to create a new class for the hover state.
So your element will have a class for its default state, and another one applied for the hover state.
You can organize your classes with folders so that it’s easier to look for them :slight_smile:
Having said that, the way that it works might change for a more standarized behavior! Will let you know when it’s more defined on our end!