Specific which external CSS files overrides which

Question

I'm working on a web project that uses SOY templates and SASS. For reasons, I'm not able to get SASS preprocessor to continue working it with SASS but all the CSS and SCSS files are present and I can look at them just not modify.

I currently have a custom CSS file that I'm working on, however some things are getting override by the CSS file the SASS created. For example, !important and generally just making it harder to add my own CSS when some things are getting override.

So my question is, is there a way to specific which CSS file gets called last so that one can overrides all the previous CSS?

Answer 1

I'd suggest you put your CSS file after other CSS files. And furthermore, you need to read about the precedence rule: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

1. There can be different precedence rules that might override your CSS.
2. Inspect the element in the browser developer tools and you can see if your CSS selector is preceded by another stronger rule e.g. .parent > .child .element{ color: #000} and then you can copy that CSS selector and use it in your css file to avoid !important