Email clients are famous for mangling CSS in a variety of creative ways.
Using CSS for layout. CSS just doesn’t work for email layouts. Most email clients do not support CSS layout or will break your CSS layout—each in its own unique way. HTML tables may be old school, but they produce emails that look good across devices, and they are really the only way to go for email layouts.
Using external style sheets. External style sheets are standard for websites, but they cause major problems with email. An external style sheet tells the email client to go to the internet, find a file, and load it. To the email client, that sounds like spam—so the link will most likely be blocked. That means you’ll be stuck with the client’s default formatting.
Using embedded styles in the <head> section. The advantage of CSS is that you can set your styles in one place, rather than styling each piece separately. Unfortunately, many email clients don’t support embedded styles and will strip the information out of the <head> section. Again, you’ll be stuck with those default fonts and colors.
Failing to account for variations in CSS support across email clients. There’s no single way to do CSS for email because CSS support varies widely among email clients. That means you’ll need to know what clients your customers use and what CSS support those clients offer.
While we don’t recommend using external style sheets and embedded styles, using inline CSS styles can give you excellent styling control. You’ll want to use an inliner, which converts the CSS styles from the <head> section of your email code to inline CSS.
Here’s what embedded CSS looks like:
<html>
<head>
<style>
h1{ color: blue; }
</style>
</head>
<body>
<h1>A Blue Heading</h1>
</body>
</html>