This article provides tips for implementing consistent styles and background colors in Code-Your-Own campaigns.

Since HTML is rendered differently in 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.

⚠	Warning
	Custom HTML campaigns should only be used by those who are proficient in HTML. Emma Support cannot provide troubleshooting or guidance for custom code, so use of this tool is at your own risk. We do have a talented Design Team that can handle creating the custom HTML coding for you for an additional fee.

Inline CSS

Adding on to the line styles explored in our padding and margins article, 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

✎	Note
	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.