CSS definitions separated in page

Question

People use a wysiwyg to create a message.

I do not have any control over the string produced at this stage. I simply 'get' the string including all formatting through a web service, which returns a single string.

So for example I will get back:

<p>here is the <a href='http://www.example.com'>link</a>

Unfortunately I also get back font definitions and other styled attributes in the same string. For example

<!--
/* Font Definitions */
@font-face
    {font-family:"Cambria Math";
    panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
    {font-family:Tahoma;
    panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
    {font-family:Corbel;
    panose-1:2 11 5 3 2 2 4 2 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin:0cm;
    margin-bottom:.0001pt;
    font-size:11.0pt;
    font-family:"Calibri",sans-serif;
    mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
    {mso-style-priority:99;
    color:#0563C1;
    text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
    {mso-style-priority:99;
    color:#954F72;
    text-decoration:underline;}
span.EmailStyle17
    {mso-style-type:personal-compose;
    font-family:"Calibri",sans-serif;
    color:windowtext;}
.MsoChpDefault
    {mso-style-type:export-only;
    font-family:"Calibri",sans-serif;
    mso-fareast-language:EN-US;}
@page WordSection1
    {size:612.0pt 792.0pt;
    margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
    {page:WordSection1;}
-->

obviously this then changes the formatting of the entire page, rather than just the message created using the wysiwyg since it defines HTML tags rather than using an actual class or id.

Is it possible to somehow separate the page so that any CSS definition inside that only applies to that HTML block? Or am I going to have to put it into a div block with an ID and somehow go through the returned string (that contains the style elements) and update any definition to be a child of that ID? i.e. Instead of a:visited I would need to render it as #exampleID a:visited

If I would need to do the latter, anyone have any ideas on the best way to go about this?

Thanks all. This is only my second question and still learning the correct way to post these questions. So please ask any information you feel I have missed and will update the post.

Answer 1

Is it possible to somehow separate the page so that any CSS definition inside that only applies to that HTML block?

Render it in an iframe. As unfortunately the proper alternative has no support whatsoever in current browsers.