How to use CSS styles

When you start coding HTML emails, you must remember that email software display them differently and thus you have to learn how to use CSS styles. They create the overall look of an email ensuring you that it will be displayed properly in any type of software. If you look at the head area of the HTML code, you can notice that there are no references to CSS style sheet. This is due to the fact that HTML emails do not use style sheets either inside the email or outside as a reference, the way that web pages do. The reason for that is quite simple: an HTML email software gets rid of styles sheets or ignores them in overwrite styles sheets. Instead, you have to use your CSS styles within each of your HTML tags within the body of your email. As you probably remember, the first thing that you should do is to turn your email design into a set of HTML tables, but you also have to create specific code for some of the most popular email software.

However, you virtually have to split the entire design into various boxes so you have a larger box for the main column, one that contains the background image , one for news content, one for the footer links and so on.

For instance, when you style the news part of your design, there is content that also needs to be styled. This is how the section should like:

For the content inside your news HTML table you mainly have

<h1 style=”color”:#dfd58d; font-family:Arial,Halvetica,sans-serif; font-size:14px; font-weigth:bold; line-height:18px; margin-left:0; margin-right:0; padding-left:0; padding-right:0; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:10px;”>content</h1>

Although it seems very complex, the process is in fact very simple given that you just have to set the proper value for each element of the style. Furthermore, you have the same approach for all the other tags in your content area. You define the whole set of styles, starting with the color, the font family, size, height, etc. when you style the foot table, you follow the same strategy.

As long as you plan the overall design before writing the HTML code, everything will run smoothly and easily. No matter how complex is the design, if you split the process in small and logical steps, you will be able to create appealing HTML email without any hassles.