Access path properties of svg via css - html

Question

I have saved my svg image with illustrator and the content looks like this:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="10.3 126 503.7 272" style="enable-background:new 10.3 126 503.7 272;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B7B7B7;}
.st1{fill:#33BFC1;}
.st2{fill:#B23939;}
</style>
<path fill="#B7B7B7" class="st0" d="M20.4,126h113c4.3,0,8"/>
<path class="st1" d="M504,126H390c-4.3,0-8,2.7-9.4,6"/>
<path class="st2" d="M420.9,384.6l-92.2-252"/>
</svg>
In my html I have :
<a><img class="logo" src="logo.svg"></a>
Since there are 3 path within svg, I want to be able to style each using css. I know I can edit directly svg file, but the idea is to change it via css.
I have tried something like
.st0 {
fill:#fff
}
.st0 path {
fill:#fff
}
but none of it works

Answer 1

This should work, only if it placed after the previous .st0 declaration.
.st0 {
fill:#fff
}
This is the proper way to declare the second example.
path.st0 {
fill:#fff
}
But both of these have to be AFTER the svg code block.
What I think is happening is that you have the SVG in your body, and you are declaring the css in the head. So your fill:#fff is getting overwritten by the CSS inside the SVG element.