Issue with css placement in rails (using bootstrap) -

Issue with css placement in rails (using bootstrap) -

suppose have next in stylesheets/myfilename.css.scss:

... .carousel-control.left, .carousel-control.right { background-image: none; } ...

this not perform intended unless modify to:

... .carousel-control.left, .carousel-control.right { background-image: none !important; } ...

however, if instead of having css in stylesheets folder, set straight myfile.html.erb, don't need !important. how resolve issue?

i assume has ordering/combination of css stylesheets, i'm not certain. if shed light, great.

this because css has cascading hierarchy follows. in case:

inline styles internal stylesheet external stylesheet

internal stylesheet prioritized more external stylesheets, if declare straight in html, won't need !important anymore override other external stylesheets cause conflict.

further reading on css hierarchy , specifity:

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ http://www.w3schools.com/css/css_howto.asp

if need !important in external stylesheet, means have css conflict somewhere else. beingness more specific in selector improve using !important, can so:

/*use id in html*/ #my_id .carousel-control.left, #my_id .carousel-control.right { background-image: none; }

css ruby-on-rails twitter-bootstrap