My service being provided requires an activation before the account can be used. In the activation email that I send, we would like to add CSS to style it. That we did, and we created a template. However, when the email is sent, all of the CSS seems to be removed, as the template does not appear in the actual email - just the HTML.
My CSS is within the tag, and some of the elements cannot be converted to inline CSS.
We are using PHPMailer. How can this be resolved?
Email clients support only a very limited subset of CSS properties. An excellent overview of CSS support in various clients is provided in this page: http://www.campaignmonitor.com/css/
In general, your best bet is to use inline CSS wherever possible. I'd probably start by looking into tools that convert stylesheets into inline CSS, and if this is not enough, then additionally write some styles by hand.
I must stress that creating CSS that works flawlessly across all email clients is an art on its own - and with my limited experience - nearly impossible. Like heck with the browser you can do some really hacky stuff and use things like polyfills, but with email clients you are pretty out of luck on this front. If you think you can just simply reuse your normal CSS then boy you are going to end up having trouble.
Detailed responses to some specific questions you have raised:
@font-face doesn't work across commonly used email clients so it is impossible to guarantee that the font looks the same everywhere. My best bet would be to avoid custom fonts as much as possible, and if you really need to use font-face then at least use some similar looking font via font-family as a fallback, and if in real pain then maybe prerender text as images (generally bad idea though).:focus doesn't work at all in Gmail or email client from Outlook family, so you would generally want to avoid any styles that depend on it.:hover works poorly as well
