CSS in style tags in visual editor email content or wrappers (but not layouts or drag and drop editor email) will be automatically inlined when the email is sent, assuring your styles can be read across the widest variety of email clients.
For speed purposes, the inlining process runs before personalization clips are interpreted and applies to your custom email wrapper and email body only, not the outer wrapper we add around your content. See here for more details.
While the inlining process is clever enough to deal with inheritance, it cannot deal with styles that are selectively applied, such as those in media queries or pseudo classes like :hover. The inliner will apply these styles to every tag that matches instead.
For example, let's take this CSS:
<style type="text/css">
h1 { color: red; }
a:hover { color: purple; }
</style>
The inliner will apply the color purple to every a tag, not just the ones that are hovered.
However, you can tell the inliner to skip these styles if you want by putting them in their own style tag block and adding "data-roadie-ignore" to it.
Taking the example above, I'd change my style tags to this:
<style type="text/css">
h1 { color: red; }
</style>
<style type="text/css" data-roadie-ignore>
a:hover { color: purple; }
</style>
The first style tag will be inlined as expected, and the second will be ignored by the inliner.
Also note that when using CSS in email wrappers, you must put your style tags within other tags in your email wrapper. So instead of this:
<style type="text/css">
h1 { color: red; }
</style>
<center>My header code!</center>You'd put this:
<center>
<style type="text/css">
h1 { color: red; }
</style>
My header code!
</center>This is not necessary in email content, though it can't hurt if you do it.