Browse by...
Home Resources Blog

When importing a HTML email campaign (and by default for all client templates), we give you the option of automatically moving all your CSS inline. Given just how crappy some email clients are at rendering HTML email without inline CSS (grrrr, Gmail), this is something we recommend doing for all of your campaigns.

Checkbox to move CSS inline

Until recently, we didn’t do the best job inline @media queries or shorthand CSS.

Better @media support

If you recall a few months back, we showed you how handy @media queries can be when optimizing your emails for mobile devices. At the time, we recommended moving your CSS inline manually if you went down the @media path. That was pretty lame advice, as moving your CSS inline manually is a fairly painful experience.

We recently updated how Campaign Monitor handle inline CSS so that we only move certain types of @media queries inline. Specifically, we only move the following types inline:

.codeblock {
background: #ededed;


All other media types, such as handheld, tv or those that specify a max-device-width will no longer be moved inline and work as intended.

Smarter default values for shorthand CSS

Shorthand CSS is a handy way to simplify your CSS by combining multiple properties, such as padding: 0 8px 3px 7px sets the top padding as 0 pixels, the right padding at 8 pixels,bottom at 3 and left at 7. If you’re not familiar with them, here’s a more complete rundown.

The problem is, shorthand CSS also implies a set of default values for that property if they are not explicitly set in your code. Because some email clients do a bad job of handling CSS shorthand, we expand these into longhand format when we move them inline.

Let’s say you’re using a condensed single font: declaration for a h3 like so:

h3 { font: 24px 'Helvetica Neue Light', sans-serif; }

If a value is not specified in single declaration shorthand, a default value is used (again, this is nicely covered here). For example, we’re not specifying a font-weight above, so it should just default to normal.

The problem is, if this code is moved inline and a font-weight value isn’t set, the font will be bolded (because it’s inside a h3). In our latest update, we now include the default values for all of the properties for any given element if they are not specifically set in your shorthand. So, using the example above, the inline CSS would look something like:

<h3 style="font-size:24px;font-family:'Helvetica Neue Light', sans-serif;font-weight:normal;font-style:normal;font-variant:normal;line-height:normal;">This is a heading</h3>

Sure, a bug like this is not the end of the world. But for those of you who sweat the details, it’s small tweaks like this that can make an already challenging process a little more pain-free. A big thanks must go to Cabel Sasser from Panic Software for helping spot these issues and give lots of constructive advice on the solution. The man knows his stuff.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free