Since HTML will be rendered a bit differently in the various email and web environments, consistency of its styling is key. Here we’ll take a closer look at the best ways to implement consistent styles, background colors, and more.
Due to the nuances of HTML, it’s crucial that any person copying, adjusting, or writing HTML code is formidably experienced with HTML coding. We do not offer direct support for customer-created code.
Inline CSS
Adding on to the line styles explored in this article on padding and margins, let’s go into detail on the flexibility that inline CSS offers. Inline styles are CSS styles that are applied to one element using the style attribute; it is also the most rock-solid way to style for email.
To ensure your styles carry through when viewed in different inboxes, write your inline CSS within the <div> or <td> tags. Here are a couple of examples:
<div style="font-family: verdana, arial, sans-serif; font-size: 12px; color: #000080; line-height:18px;">sample text</div>
<td style="font-family: verdana, arial, sans-serif; font-size: 12px; color: #000080; line-height:18px;">sample text</td>
A cascading style sheet (CSS) is a way to describe the look and formatting of an online design. It’s commonly used to style webpages written in HTML and XHTML, and is displayed in list form at the top of a designer’s code, driving the behavior of fonts, colors, and formatting throughout the page. Style sheets can be used in most email scenarios; however, they are stripped from Gmail. For this reason, we recommend using inline styles instead.
Font tags
The <font> tag specifies the font face, font size, and font color of your text. Here’s an example:
<font face="Verdana, Geneva, sans-serif" size="1" color="#333333">text can go here</font>
In order for it to render across all browsers and email clients, be sure to select one of the common websafe fonts.
- Andale Mono
- Arial
- Arial Black
- Arial Narrow
- Book Antigua
- Century Gothic
- Comic Sans MS
- Courier New
- Georgia
- Helvetica
- Impact
- Lucida Grande*
- Palatino
- Tahoma
- Times New Roman
- Trebuchet
- Verdana
*Lucida Grande is considered nearly websafe, meaning that in many (but not all) environments it will be pre-installed for the end recipient.
Font sizing
We recommend sizing your font attributes in pixels (px) as opposed to a percentage (%), numerical size, or point size. This is because px values are explicit, they are not as open to size interpretation as the other alternatives are.
Font colors
Always use hexadecimal values (hex codes) when defining the color of backgrounds, borders, and fonts in your content. Include the pound sign (#) before the value to ensure it displays consistently across all email clients (for example: #3R3T3N). If you’re starting with RGB or PMS values, here is a handy site to convert them to hex values.
Background colors
The most universally accepted way to code a background color to your content is by adding:
bgcolor="#<add your hex color value here>"
Here are a couple of examples:
<div style="background-color:#cccccc;">sample text here</div>
<td style="background-color:#cccccc;">sample text here</td>
Background images
There are a number of ways to write the code for background images; however, email clients render background images differently. Currently, there is not a universally accepted piece of code that renders consistently across all email clients, and because of the lack of consistency, we recommend avoiding them.
Alignment
Setting your content’s alignment will ensure you retain control of how that content appears in the inboxes of the various email clients. We recommend two ways to align your content:
align="(center or right or left)"
style="text-align:(center or right or left);"
These methods, supported by all email clients, can be used in <div>, <td>, or <table> tags. You may see some coders use a float style attribute (style="float:(left or right);"). We recommend avoiding the use of float style attributes, as they are not universally supported.