Isolate CSS in element from rest of page

Question

I am displaying HTML emails in a page and often those come with general style information that I need to isolate from the main page. For instance, if the email looks something like this:

<style type="text/css">
body { background-color:#000; }
</style>
<div>
  email's content here
<div>

I end up with a black background on the whole page.

I've tried iframes, but I need the content's height to be dynamic (I don't how big each email is until it is rendered), which it seems one can only do with javascript. That is an option, but it seems rather hacky. Is there a standard, clean way of doing this?

Answer 1

Put a unique class or ID on the containing div and use that as a selector for all the styles:

<style type="text/css">
    div#emailcontent { ... }
</style>

<div id="emailcontent">
   ...
</div>

It's a bit of a pain, but that's the only way to restrict styles to only part of a page.

Answer 2

For HTML email, I would suggest to use inline CSS. Sometime, unique class or ID doesn't work on others emails clients. And don't use java script in emails too, using javascript is not acceptable in email marketing. Please hard code for every tags with inline code to compatible with cross email clients.

p tag should convert in to span tag; in cross browser, p tag give some padding and margin. p tag is good for whole section of paragraph if you would like to use. Make sure you define inline code in each tags like :

< span class="headlines" style="font-family: Arial, Helvetica, sans-serif;font-size: 13px; font-weight: normal; color: #03588c; line-height: 18px;">foo< /span>

Margin and Padding shouldn't use in css coding for HTML. That doesn't work in cross email clients.

Answer 3

If your constraints permit it, you could display each email in its own iframe.