Inline CSS

Webflow's HTML Embeds are a very handy tool. When they contain a CSS style block, that CSS is recognized by Webflow's designer and applied at design-time.

Use cases

• Apply any CSS styling that isn't natively supported in the designer, e.g. complex nth-item setups
• Vary font selection by locale
• Add behavior, like scroll-top adjustments
• Temporarily hide obstructing elements like megamenus, sidebars, pop-up modals and cookie-consent dialogs so that you can work in the designer, unobstructed.

Tips

• When you are storing <style> content in an HTML embed, make it the only element in that Embed. If you have other content such as a _<script> block, the designer may ignore that embed entirely.
• For styling you want site-wide, place it inside of a site-wide component, such as your Nav or Footer components.
• The Visibility: hidden setting can be used to suppress that style block arbitrarily, which makes it an excellent tool for hiding a cookie consent dialog or popup temporarily while you're working in the designer.

‍