How can I add !important to a CSS selector in Webflow?

Published on
September 22, 2023

To add !important to a CSS selector in Webflow, follow these steps:

  1. Select the element you want to apply the style to in the Webflow Designer.
  2. Open the Style panel by clicking on the paintbrush icon on the right-hand side.
  3. Find the property you want to add !important to and click on the "Add Style" button next to it.
  4. In the Style panel, click on the property value field (e.g., the field where you enter the font size or background color).
  5. Type the desired value for the property and add !important after it, with no spaces. For example, if you want to make the font size 18 pixels and apply it with !important, you would enter "18px!important".
  6. Press Enter or click outside the field to apply the style.

Once you add the !important declaration to a style in Webflow, it will override any conflicting styles, ensuring that the specified value is always applied.

Note: It's generally recommended to use !important sparingly, as it can make your styles harder to manage and maintain. Whenever possible, try to use more specific selectors or adhere to the CSS specificity hierarchy to achieve the desired styling.

Additional questions:

  1. How do I override a style in Webflow?
  2. What is CSS specificity and how does it work in Webflow?
  3. Is it possible to add custom code to Webflow?