Why doesnt my css work>?

Why is there a line in between my selected css code? And the css in between is faded? I really don't understand, the css file works for everything except for this custom widget.
3 answers

Hi Simon, 


There are multiple ways to overwrite it.

  1. !important, putting this behind a css-property ‘usually’ overrules any of the same-property, unless it is already declared as !important somewhere else that has higher priority.
  2. Making a ‘higher-ordered’ css file. CSS stands for Cascading Style Sheets, which means it'll take whatever it gets fed last as the highest priority, Mendix handles this with UI-modules (more info here)
  3. Specificity – Sometimes, you can fix certain issues with specificity. So if, for example,  you add a container with a custom-class around a widget you can target it like a tree branch. (e.g. .Custom-widget → .container → .element → .yourtarget)

However, looking at your image, it's done with “style”, so it's not targetable by css because it's done through in-line styling, which leaves only the !important option afaik!




Hi Roy,
This is what it looks like at the top. How can I stop it from overruling?




Just like Roy states:

The CSS you are using is overruled by other styling.

You can try to add !important to the end of the line to overrule it.

OR you can read make the css more specific:
Specificity of CSS is explained here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity