Let's talk about adding style to your own HTML mailings, the ones that you build from scratch using your own code. (If you're not coding from start to finish, you'll want to use the drag & drop editor. It allows you to add background colors and more with just a few clicks.)
Since your HTML will be rendered a bit differently in the various email and web environments, the 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.
We touched on line styles in the how-to on padding and margins, but 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. This is the most rock solid way to style for email.
To ensure your styles carry through when viewed in someone's inbox, write inline CSS within the <div> or <td> tags. Here are a couple of examples:
A cascading style sheet (CSS) is a way to describe the 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.
Here's an example of a style sheet, for reference:
The <font> tag specifies the font face, font size and font color of text. Here's an example:
<font face="Verdana, Geneva, sans-serif" size="1" color="#333333">text can go here</font>
Select one of the several common websafe fonts, which will render across all browsers and email clients: Andale Mono, Arial, Arial Black, Arial Narrow, Book Antigua, Century Gothic, Comic Sans MS, Courier New, Georgia, Helvetica, Impact, Palatino, Tahoma, Times New Roman, Trebuchet or Verdana.
Note: Lucida Grande is considered nearly websafe, meaning that in many (but not all) environments, it will be pre-installed for the end recipient.
We recommend sizing your font attributes in pixels (px) as opposed to %, numerical size or point size. Because px values are explicit, they are not as open to size interpretation as the other alternatives are.
Use hexadecimal values 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: #333333). If you're starting with RGB or PMS values, here is a handy site to convert them to hex values.
The most universally accepted way to code a background color to your content is by adding bgcolor="#<add your hex color value here>". This can be applied in the <td> tag. Here's an example:
You can also apply this within a <div style> tag like this:
<div style="background-color:#cccccc;">sample text here</div>
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.
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:
These methods, supported by all email clients, can be used in a <div> or <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.