Including CSS in the HTML email

Hi,

I’m trying to create an auto-respond HTML email using “Mail (2)” function.

Is there any particular way to include CSS rules in my HTML email? I’ve put <style>(my styles here)</style> before the <table> starts. However, if someone checks the email with Outlook, they see the all CSS rules that are inside a media query outputted as text.

So for example, such parts of CSS get outputted as text in my email:
@media only screen and (min-width:768px) { .templateContainer { width: 600px !important; } }

Do you know how to fix this?

This is obviously a CSS rule that shouldn’t be visible as a text.

All the CSS rules that aren’t inside a media query don’t get output as a text.

Thank you.