Temail - CSS Styling Tips

contents

A little understanding of CSS styling can go a long way in designing your templates to make the most of your branding and messaging. Below are some helpful tips and common ways to style your templates.

Email Clients – they are not all are the same!!
Not all email clients (Outlook, Gmail, Apple Mail, Yahoo, etc.) will present your email the way you expect. When styling your templates, the goal is to make them look good in ANY email client. The best advice we can offer is to "keep it simple!". Transactional email is not supposed to be too flashy - it should provide the messaging needed to complete the transaction with your customer.

CSS Style Syntax

In general, there are three ways to apply styles to HTML documents. Temail only uses Inline CSS:

• Inline CSS - Used by Temail - Styling is applied in-line with the content
• External CSS - not used by Temail
• Internal CSS - not used by Temail

With Inline CSS, styles are applied using the following syntax:

<p style="color:red; font-weight:bold">This paragraph uses Inline CSS</p>

In this example, notice the style tag, style=" ", is applied to a paragraph tag, <p>, and the style attributes are contained within quotes. Two style attributes are specified; color and font-weight, separated by a semi-colon.

Styles entered in Navigator Nodes and Component Parameters

These styles are entered without the style=" " tag (note the semi-colon separating the attributes):

color:red; font-weight:bold

Styles entered directly in your content

When using styles within the content body of your template, you will use the fully qualified style syntax with the style=" " tag:

<p style="color:red; font-weight:bold">This paragraph uses a style tag</p>

There are other style tags that can be applied Inline such as:

This sentence has <b>bolded</b> and <i>italicized</i> words in it.

Which looks like this when rendered by an email client:

This sentence has bolded and italicized words in it.

The above example uses style tags <b></b>, and <i></i> to bold and italicize the text between tags. There are many tags (too many to list here) you can use to apply common styling to your templates.

Styling Attributes and Tags

HTML Styling is a rather large subject and exceeds the scope of this document, however, there are many resources that can be found on the internet that will help you to find style tags you can use. Below is a list of common styles you will come across. While this is by no means a complete list, it will help to get you started.

Common Style Attributes

Add a border:	border: 1px solid black
Rounded corners on borders and buttons:	border-radius: 5px
Change the font:	font-family: Helvetica, Arial, sans-serif
Change font size:	font-size: 24
Change text color:	color: red
Change background color:	background-color: yellow
Center a paragraph:	text-align: center
Add content margins:	margin: 30px
Add content padding:	padding: 30px

Common Style Tags

Add a line break:	<br>
Add a Horizontal line:	<hr>
Heading (values: h1..h6):	<h1>Heading 1</h1>
Add a paragraph:	<p>paragraph text</p>
Bolded text:	<b>bolded text</b>
Italicized text:	<i>Italicized text</i>

Resources on the Web

Here are a couple of resources you may find useful if you are just starting out with HTML and CSS Styling. Of course, there are MANY other sites on these subjects, but these should help get you started.

Inline CSS Guide - How to style an html tag directly
HTML Cheat Sheet