Suppose we have a CSS file called style.css, now create a separate CSS file, let's call it style-rtl.css for example, the first file contains all of our CSS properties, the other one will only contains the flipped CSS rules.

For example, if we are styling links in style.css as:

a{color:red; margin-left:10px;}

in the styles-rtl.css stylesheet we'll only include the flipped rule:

a{margin-right:10px;}

And then we link both:

<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="styles-rtl.css"/>

Make sure you include the overriding stylesheet after the original one to ensure the rules are overridden.

But notice that the link in RTL now has a margin-left of 10px AND a margin-right of 10px which is not what we want. We want the margin-left to be a margin-right. In that case we "reset" the margin-left like below:

a {margin-left:0; margin-right:10px;}