Re why your approach works in Compose mode, but not once you publish:
Remember that the Blogger Post-editor is just another WYSIWYG editor that gives you point-and-click tools, and generates the HTML for the features and content that you have chosen.
Luckily, they give us HTML mode too, so we can fix up the code behind posts when it's been mangled by the sometimes-buggy Compose mode features.
And when you switch from HTML-mode to Compose mode, it's clever enough to take whatever HTML you have entered, and draw it in the Compose mode window.
But if you then hit Publish from Compose mode, the post-editor takes the content you currently have in the Compose windown, and re-generates the HTML based on the cut-down set of HTML features that it supports. So any extras that you added via HTML that is perfectly valid, but not supported (yet!) by the post-editor are lost.
The solution is to hit Publish when you are in HTML mode, because this seemily doesn't cause the HTML to be re-generated with the cut-down features.
(NB I haven't tried this on the particular problem you are mention. But it has worked for me in a number of other areas where certain HTML elements, eg paragraph tags, have been stripped out when I publish from Compose.)
Of course the in-line styles answer mentioned works too: If you define the style in the post as suggested, then it will be applied when you view the post in Compose mode. But if you add it as a rule to your template, then it won't be applied in Compose mode, but will be applied for people who view your blog using a web-browser.