overriding css styles with @import not working

That isn't working because any import rule declared inside of a stylesheet must come before everything else - otherwise, ...well, it doesn't work ;) .

So, what you should have in your style.css stylesheet is:

@import url('style-override.css');  
body {color: red;}

@import rules must be at the top. This is what the CSS spec. says about it:

Any @import rules must precede all other at-rules and style rules in a style sheet (besides @charset, which must be the first thing in the style sheet if it exists), or else the @import rule is invalid.