如何在页面中呈现电子邮件模板？

Question

I have an email template which I wants to render in a page. email template have their own CSS like :

<style>
body{
   font-size : 20px;
}
</style>

, when I am trying to render email template on my web page their CSS is overriding my page CSS. How to resolve this overriding issue ? , I want to render template like gmail.

Note : Dont want to render inside iframe.

Answer 1

The error you are getting is logical, because the webpage and email template both having same style tag name such "body" tag is in both aspects.

You have 2 ways 1) do all in-line styling for email template (This is hard to do). or 2)Change the style tag names of the email template both in html and CSS. (This is easy way to complete your task just add "email" before each style tag of your email template's html and css pages).

Then create a div tag in you web page with appropriate height and width as your email template and put your template into that.

Answer 2

Option 1 When doing email styling, keep the styles inline. While CSS is supported by many email clients today, the best way to prevent them from interfering with the rest of the page is to restrict the styles to the individual cells.

In essence, you're gonna have a lot of:

<td style="font-size:20px">
    content here
</td>

Option 2 If you cannot change the email HTML for some reason, the other way is to adapt your page CSS to be stricter, and more targeted to specific elements on the page.

Assuming your page has a header, a main content and a footer, and the email is appearing inside a section of your main-content, you should give each of these blocks an id. Then, your page CSS could look like this:

/***
 * Header
 ***/
#header {
    font-size:16px;
}
#header-nav {
    font-size:15px;
}
#header-nav > a { /* affects all links inside header-nav */
    font-size:14px;
}

/***
 * Main Content
 ***/
#main {
    font-size:18px;
}
#email-section {
    /* we expect font-size of the email to be declared within itself.
       And we are not worried that its style would overwrite any other
     */
}
#some-other-section {
    font-size:14px;
}
#some-other-section > p { /* all paragraphs in this section */
    font-size:16px;
}

/***
 * Footer
 ***/
#footer {
    font-size: 16px
}

If you follow this discipline of targeting your elements very specifically with your CSS, you usually have little to worry about when you import external stylesheets into your page.

Often, you see people using too loose selector rules that apply to too many things. It's important that CSS developers understand the cascading and specificity well enough.