How to use the CSS important trick?

Sometimes you need to manually override the theme’s CSS declarations to make your edits “win” and show on your website after saving.

What does CSS Hero generate?

For those Hero users who don’t know, a CSS !important rule looks like this:

.site-description {
 font-size: 36px !important;
 color: #ff1919 !important; }

The Site Description class (typically the website tagline) will be shown with a red color and with a font-size of 36px. The !important rule overrides other clashing style rules.

!Important override

The CSS !Important override button

button !important

The CSS !important button (red color)

Please watch this How to Video that shows how to achieve with CSS Hero the CSS important action:

Cons: Even though this is a quick solution, it is likely to be difficult for other people to work in the future with your code on your website , so please, don’t use this !important tool unless you have no other option! Generally, it can be better to use the quick configurator tool to add a specific ID or CLASS for the element you want to style.

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.


Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero