Add CSS to an element in editor!

Community resources General
1

Is there really no way to type in a quick css rule for an element inside the editor?

Do I have to type out the class and add it into the page settings code?

So often I want to add just a simple css line for settings which arent availible.

Please help

2

Webflow follows a common, clear paradigm- design is the domain of designers, content is the role of content-creators. The editor is designed for content creators, so it does not permit any mucking around with the designer’s CSS.

That said, there are a handful of situations where this might make sense in specific, controlled situation, such as inside of a blog article or press release where you may want to break all the design rules with a big red notice or some such thing.

The tool best suited for that is Refokus Rich Text enhancer, which allows you to insert a kind of CSS markup in your rich text content.

If you’re looking for more complex control over a chunk of content, there’s always the HTML Embed sub-element in rich text elements, where you can create whatever you want.

3

Oh Sorry my bad, I meant inside of the designer!
Using custom code is doable, just quite disorganized.

But for example in the designer, you can even add attributes to an element.
I meant why not have the same tiny ui section for typing in a css rule?

4

Ah you mean control over the style attributes directly?
Well there are a few reason I can think of why Webflow has avoided that-

  • Confusion. People already get confused easily between <style> content in the their site-wide head, vs. page head, vs HTML embeds… for the average person, details like CSS specificity are not well understood.
  • It would break Interactions. Interactions relies on the style attributes to impose its visual effects.
  • It would probably break dropdown menus, tabs, sliders, the login/logout button- anything else where webflow.js needs to manipulate or hide/show anything on your site.

The approach most people go with instead is to use HTML Embeds and have a global styles block stored in the Nav. This avoids breaking any of those mechanics, and yet the visual impacts of that CSS is visible immediately in the designer.

5

a styles block in the Nav?
does that make changes visible in the preview?
dont get why it would break things wheter you type a css rule directly in the designer or you target that elements class before the end of the body in the custom code section…
anyway probably going to deep now, html embeds seems to be what i have to get comforable with…
thanks for clarifing

1 Like
6

Correct on both.

Who wins? Does your style take precedence over interactions and webflow.js element interactivity? It’s like trying to park 2 cars in the same parking spot.

You’ll almost certain find them easier to work with as well. Full CSS syntax rather than just a style element, plus you can find all of your styles in one place if you organize them well.

7

I meant why not add isles and sections (classes) to our big parking lot (custom code field), so you can always park a custom car right in the isle closest to the shop you want, and not at the far end of the parking lot :slight_smile:

8

There are a few reasons, but mostly it’s about maintainability.

At the far end of the lot, it’s very easy to find your car. When you park up close, there’s far more traffic and it can be difficult to find your car, and you do, it might be be penned in.

I use all 3 strategies- site level, page level, and embed level, depending on the situation.