{"id":15588,"date":"2014-01-21T14:40:00","date_gmt":"2014-01-21T14:40:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=15588"},"modified":"2025-11-05T13:39:11","modified_gmt":"2025-11-05T18:39:11","slug":"understanding-gmail-and-css-part-1","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/understanding-gmail-and-css-part-1","title":{"rendered":"Understanding Gmail and CSS"},"content":{"rendered":"
\n

Update (09\/2016)<\/strong>
\nThings have changed since we wrote this post. Gmail rolled out support for responsive design, improved font styling, and CSS for accessibility. Now, Gmail supports embedded CSS, which removes the need for inline CSS in Gmail.<\/p>\n

Learn more \u2192<\/a><\/p>\n<\/div>\n

Google\u2019s free Gmail service is one of the most popular email services in the world. Marketers and designers frequently find their campaigns breaking in this popular email client, and struggle with how to make their campaigns render consistently. While 80% of Gmail users opt to access their accounts via mobile and desktop email clients, the remaining 20% open emails in the webmail interface, which offers less than stellar support for CSS (Cascading Style Sheets).<\/p>\n

Let\u2019s take a look at an overview of CSS support in Gmail and options for styling emails with CSS.<\/p>\n

Styling Email<\/h2>\n

CSS, or Cascading Style Sheets, are used to add styles and formatting to HTML pages\u2014yes, and emails, too! There are three ways to include styles within an email: using external stylesheets, embedded styles, or inline styles.<\/p>\n

External Stylesheets<\/h3>\n

Web designers will be familiar with external stylesheets, which use a link to load a stylesheet from a server.\u00a0They\u2019re particularly useful for multi-page sites, where headlines, body copy, link colors, and other formatting options can be controlled by changing a single file rather than individual styles on each page:<\/p>\n

<link rel=\"stylesheet\" rel=\"noopener\" target=\"_blank\" href=\"\/path\/to\/style.css\" \/><\/code><\/pre>\n
Since most webmail clients block links to external stylesheets and Javascript, it is rare to see this method employed in an email.<\/p>\n
Embedded Styles<\/h3>\n
Embedded styles are a bit similar to external styles in that broad categories of formatting options for the entire page (or email) are controlled in a single place. CSS rules that are embedded are declared in a <style><\/em> block in an HTML document, normally in the <head><\/em> section:<\/p>\n
<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text\/css\">\n .ReadMsgBody {width: 100%;}\n .ExternalClass {width: 100%;}\n <\/style>\n <\/head>\n<\/html><\/code><\/pre>\n
Embedded styles are useful when you frequently re-use the same style in an email: for example, they can help you avoid declaring the same font color for links over and over. However, embedded styles are not always supported in email\u2014leading to rendering inconsistencies between email clients.<\/p>\n
That said, using embedded styles in email has become more popular\u2014and a more accepted practice\u2014due to the rise of mobile and associated popularity of responsive design techniques<\/a>.<\/p>\n
Inline Styles<\/h3>\n
Inline styles are applied directly to HTML elements in each line of HTML (hence the clever name, in line<\/em>), like so:<\/p>\n
<span style=\"font-size: 22px; font-family: Arial, sans-serif; color: #222222;\" >Hello!<\/span><\/code><\/pre>\n
Inline styles are generally the safest way to ensure rendering compatibility across various email clients, programs and devices, but can be time-consuming to write and a bit challenging to manage.<\/p>\n
When should I use each type of CSS?<\/h3>\n
Most email designers use a mix of inline and embedded styles when building email campaigns, as they can serve different purposes. The main structure and styling of your email should be kept inline, as that is the most reliable way to get your email rendering across clients. Embedded styles are normally used when utilizing a CSS \u201creset<\/a>\u201d or for CSS rules used in responsive emails.<\/p>\n
Understanding the structure of an HTML document, how CSS is used by email designers, and how Gmail handles both is the key to understanding rendering issues in Gmail.<\/p>\n
Gmail’s Rocky Relationship with CSS<\/h2>\n
As a webmail client, Gmail has to take some precautions when displaying an email. Like most webmail clients, Gmail uses a preprocessor to strip any code from an email that could be a security threat or interfere with the rendering of the client interface itself.<\/p>\n
Commonly stripped elements include JavaScript, object and embed tags, and Flash. Gmail goes one step further and strips out both the head and body tags, as well as any style tags in an email.<\/p>\n
Once an email is run through the preprocessor, it is passed to the app and rendered by the browser. While different browsers can have their own rendering quirks, most issues that designers run into stem from styles that were stripped by Google\u2019s preprocessing.<\/p>\n
Solid Styling for Gmail<\/h2>\n
The quickest way to insure your email campaign renders properly in Gmail is to place your most important styles inline.<\/p>\n
A lot of designers, especially those coming from a web-heavy background, prefer to develop emails with CSS in the head of the email. The development process can definitely be quicker using this method, but care should be taken to move styles inline before deploying an email.<\/p>\n
\u201cInlining\u201d styles moves the CSS and associated formatting instructions from the style block in the <head><\/em> of your email into the body of the HTML. An inlining tool will look at the styles, classes and ids declared for each element, find those elements in the body, and move the styles accordingly:<\/p>\n
td[class=\"copy\"] { \n font-size: 18px;\n font-family: Arial, sans-serif;\n color: #222222;\n}<\/code><\/pre>\n
The end result is something like this:<\/p>\n
<td style=\"font-size: 18px; font-family: Arial, sans-serif; color: #222222;\" >Bonjour!<\/td><\/code><\/pre>\n
There are a variety of tools for inlining CSS, including our very own free CSS inliner<\/a>. If your emails are generated in the back end of an application, solutions exist for most server side languages and frameworks. Popular options include inliners for PHP<\/a>, Ruby<\/a>, Node.js<\/a>, and C#<\/a>.<\/p>\n
What about responsive styles?<\/h2>\n
Inlining CSS<\/a> is great for the general look and feel of an email. But what about handling responsive emails that rely on CSS media queries<\/a>?<\/p>\n
The answer is to keep those styles within the head of your email. Yes, Gmail will strip them out when it runs your email through a preprocessor, but that\u2019s OK. Ideally, all of the structure and styling in an email is inline. Anything in a media query is an enhancement on top of that styling. Even if it is stripped in webmail clients\u2014it doesn\u2019t matter<\/em>. The styles in the media query aren\u2019t intended to be viewed in a webmail interface\u2014they\u2019re intended for a smartphone or tablet.<\/p>\n
In most cases, mobile clients that rely on those media queries and responsive styles will still see and render them properly, but if they are missing in webmail clients, your email will hold up and look great since you took the time to inline your most important styles.<\/p>\n
Always Test Campaigns<\/h2>\n
Gmail can be a tricky client for designers. Understanding how Gmail processes your HTML before and after it hits the inbox is the key to building robust campaigns that display properly. While it\u2019s usually the least, Gmail is still a popular client that needs to be addressed.<\/p>\n
Fortunately, Litmus makes testing in Gmail<\/a> a breeze. Sign up free today!<\/p>\n
Start testing \u2192<\/a><\/p>\n
Know of any other tips for dealing with Gmail? Let us know!<\/p>\n
Additional Resources<\/h2>\n