Prioritize your Styles

In order to modify the Knack styles you’ll need to assign a priority to your own styles that become more important than the default Knack styles. Styles will cascade (the first “c” in CSS) by priority, so you need to make sure your styles take higher priority than the Knack styles.

There are two ways to do this.

• Specificity: The first is to make the style selector more specific. For example, for an app menu with a selector of #kn-app-menu ul, you could add another parent selector before your CSS to prioritize it

• !important: The second way is to add the ”!important" attribute at the end of the style, which will tell the web browsers that this CSS code takes precedence over any others that may exist.

/* Specificity */
.kn-content #kn-app-menu ul {
  background: #DDD;
}

/* !important */
#kn-app-menu ul {
  background: #DDD !important;
}

❗️

WARNING: !important should be used carefully, as it can sometimes override other aspects of your styling. This style is now more specific and will be prioritized over the Knack style.