CSS Styling in HTML Email

Adding CSS to HTML Email has come a long way since every last style declaration needed to be inserted inline with your tables in order for email clients to recognize the style. With that being said, some of the older clients still require inline styling and Microsoft Outlook requires styling inside of conditional statements.  With nearly 80% of the market share, the Apple iPhone, Apple Mail, and Gmail now rendering CSS added to the of the document with internal styling.

What’s the Difference Between Inline CSS Styling & Internal CSS Styling?

In website design we link to CSS Style Sheets in a .CSS document separate from the HTML document but in Email we need to include our CSS with our HTML in order for it to all load at once in email clients.

With Inline CSS Styling, which is still the safe and preferred method as of 2021, the CSS style declarations are included inside of your HTML tags using the “style” attribute.

<p style="color: #556CD6;">Purple Text</p>

Internal CSS Styling is included in the <head> section of the document using the <style> tag along with media queries for responsive-specific CSS and Dark Mode.

<style type="text/css">
p {
    color: #556CD6;
  }
</style>

For a complete guide to which CSS styles are supported in email clients, check out Campaign Monitor’s Guide to CSS.

..continue to the next lesson: HTML Email Media Queries.

HTML Email Mastery Course