Apply your own CSS to a landing page

  • Updated

If you want to apply your own CSS in a landing page, you can do so in the Custom Code panel of the Landing Page Composer. This is where you can add custom styling rules - including the !important attribute. This article explains what !important does, how to use it effectively, and when to avoid it.

Quick Reference (Advanced Users) – Click to Expand
  • !important forces a CSS rule to override other conflicting rules.
  • Use sparingly - it bypasses normal styling hierarchy.
  • Best for one-off fixes in landing page design where styles are otherwise overridden.
  • Overuse makes your CSS harder to manage and debug.
Try it like this:

If you want your landing page text to always use the Google font Poppins, you could add: 

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {
  font-family: 'Poppins', sans-serif !important;
}

Note: Be sure the font is properly imported from Google Fonts (or another provider) before applying the override, otherwise the style will fall back to a default font.

Where to Find It in the Composer

You can access CSS styling options inside the Custom Code panel of the Landing Page Composer. This is where you’ll see the option to add custom CSS, including the ability to apply !important.

Landing Page Composer Custom Code panel with !important option highlighted
Apply your CSS here in the Custom Code panel. This is where !important can be used to override default styles.
Warning: Only use !important here if other styling methods (like adjusting specificity) don’t solve the problem. Overuse can make future edits harder to manage.

What !important Does

Normally, CSS follows a cascade - rules with higher specificity (like inline styles) or those appearing later take priority.
Adding !important overrides this order, making the rule dominant even when another rule would normally apply.

When It Helps

  • Fixing style conflicts with themes or templates in the composer.
  • Ensuring a critical brand style (such as a font choice) is not overwritten.
  • Overriding default Act-On styles when embedding custom CSS.

Risks of Overuse

While powerful, relying too heavily on !important can cause problems:

  • Harder to debug: You may forget why a style won’t change later.
  • Future conflicts: Other team members may need to use !important too, leading to a “style war.”
  • Poor maintainability: Overrides stack up and make designs fragile.

Best Practices

  • Use !important only as a last resort when other methods (like increasing specificity) don’t work.
  • Keep overrides scoped - apply them to a single class or element rather than broad selectors.
  • Document why you added it, so others know it was intentional.

Related Resources

Was this article helpful?

Have more questions? Submit a request