Create Stunning HTML Email That Just Works! by Mathew Patterson

Author:Mathew Patterson [Patterson, Mathew]
Language: eng
Format: epub, mobi, pdf
ISBN: 9780980576863
Publisher: SitePoint Pty. Ltd.
Published: 2010-08-16T04:00:00+00:00

Use Inline CSS

This is where the C for Cascading in CSS comes in handy. Applying a style inline gives it priority over styles further away (such as webmail client styles), and also works around the email clients that strip out CSS from the head or external CSS files.

Here’s a quick refresher in case you’ve not used inline CSS for a while (or ever, if you started web design after 2000).

A style applied to p elements in a separate style sheet or in the head of your HTML page might look like this:

p { line-height: 1.5em; margin: 0px 0px 10px 0px; }

These styles will apply to all paragraphs in your page, but if the style is stripped out (as Gmail will do), the paragraphs will be styled according to whatever default the email client uses, or the webmail client’s own style sheet.

Applying the style inline means styling each individual p element throughout your content:

<p style="line-height:1.5em;margin:0px 0px 10px 0px;">Lorem … </p>

You’ll achieve more consistent results if you apply styles in this way for all the relevant elements in your HTML email.

When you start doing this, you’ll quickly realize that it’s tiresome work repeating the same styles over and over in your HTML (a lot like <font> tags used to be). Lucky for us, there are a few ways to save time:

Don’t inline your styles until you’ve finished the coding—develop it all using a <style> tag in your head, and only once you’ve made all the changes do you apply them inline. This saves having to go back and edit 20 instances of the same style.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.