This question is a continuation
Bootstrap NavBar in Lightning for Communities
Problem : How to suppress/ make the external CSS property override app.css styling?
Official docs suggest using namespace when loading the external bootstrap css in s1, this would make the scope of css specific to the component, but in this case the standard app.css is affecting my lightning component.
Getting rid of app.css was an approach I thought might work and this question exactly guided me along that path
Lightning Design System is overridden by styles from app.css
I tried the approach but did not work for me in communities, I used inspect element and removed the app.css and the external CSS is applied and things work as expected, but removing app.css is not the solution since it messes up the entire community styling.
So coming back to the original question is there a way to make certain tags more important than app.css ( I do not want to inspect every detail and mark tags important, if there is an easy approach it would make life simpler) or can I alter the order in which the app.css and bootstrap.css is loaded ( I am not an expert when it comes to CSS but read somewhere the order in which the file loads matters, I could be wrong)
CSS Namespacing:
> Many 3rd party CSS libraries like Twitter Bootstrap changes styles for the entire application. This can cause problems when running your component in S1 Mobile app or inside Lightning App Builder. We strongly recommend CSS-namespacing them before using them. This namespace is not the same as your org’s namespace but a simple CSS class name to avoid your CSS bleeding into other components. This could be any unique classname name for a container (div) that wraps your component.
!important
to your css work? E.g..myStyle { background-color: #eee !important; }