I made a single customized css file rtl.css to change the layout direction of my store from Left-to-Right to Right-to-Left.and have it loaded into my local.xml to override all style sheets in my store. But the this file itself is being overridden by the bootstrap.css ?
I noticed by using firebug that the attributes I modified are being inherited
How can I prevent bootstrap.css from doing this?
This is because of cascading nature of style sheets. The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence.
To find the value for an element/property combination, user agents must apply the following sorting order:
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence: user agent declarations user normal declarations author normal declarations author important declarations user important declarations Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
See more details here
By changing css declaration order from local.xml file, you can override bootstrap.css declaration, or give high priority to your style changes.
