Stop embedded CSS to act on html page and not to override the external CSS properties

Question

I am extracting the HTML content dynamically to display notes in my page of the site. The problem is the HTML content that I am importing has embedded CSS under style tag so its basically disturbing my page styling. Is there any way around to work out in which I can stop the incoming styling to act over my page?

ex: I have a CSS fine applying to page xyz.css and dynamically I am extracting HTML content from server that has embedded CSS having property ....h2{...} so this basically the overrides the external style sheet. And also where all will it be effecting is not obvious.

Sample HTML Content

<style type="text/css"><!--
 /* 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:Verdana;
    panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
    {font-family:"Century Schoolbook";
    panose-1:2 4 6 4 5 5 5 2 3 4;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin-top:0cm;
    margin-right:0cm;
    margin-bottom:10.0pt;
    margin-left:0cm;
    line-height:115%;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";}
h1
    {mso-style-link:"Heading 1 Char";
    margin-top:30.0pt;
    margin-right:0cm;
    margin-bottom:0cm;
    margin-left:36.0pt;
    margin-bottom:.0001pt;
    text-align:justify;
    text-indent:-36.0pt;
    line-height:150%;
    font-size:16.0pt;
    font-family:"Cambria","serif";
    font-style:italic;}
h2
    {mso-style-link:"Heading 2 Char";
    margin-top:30.0pt;
    margin-right:0cm;
    margin-bottom:0cm;
    margin-left:54.0pt;
    margin-bottom:.0001pt;
    text-align:justify;
    text-indent:-54.0pt;
    line-height:150%;
    font-size:14.0pt;
    font-family:"Cambria","serif";
    font-style:italic;}
h4
    {mso-style-link:"Heading 4 Char";
    margin-top:14.0pt;
    margin-right:0cm;
    margin-bottom:0cm;
    margin-left:0cm;
    margin-bottom:.0001pt;
    line-height:150%;
    font-size:12.0pt;
    font-family:"Cambria","serif";
    font-style:italic;}
p.MsoTitle, li.MsoTitle, div.MsoTitle
    {mso-style-link:"Title Char";
    margin-top:0cm;
    margin-right:0cm;
    margin-bottom:12.0pt;
    margin-left:25.5pt;
    text-align:justify;
    text-indent:-25.5pt;
    font-size:30.0pt;
    font-family:"Cambria","serif";
    letter-spacing:.5pt;
    font-weight:bold;
    font-style:italic;}
p.MsoNoSpacing, li.MsoNoSpacing, div.MsoNoSpacing
    {margin:0cm;
    margin-bottom:.0001pt;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";}
span.Heading1Char
    {mso-style-name:"Heading 1 Char";
    mso-style-link:"Heading 1";
    font-family:"Cambria","serif";
    font-weight:bold;
    font-style:italic;}
span.Heading2Char
    {mso-style-name:"Heading 2 Char";
    mso-style-link:"Heading 2";
    font-family:"Cambria","serif";
    font-weight:bold;
    font-style:italic;}
span.Heading4Char
    {mso-style-name:"Heading 4 Char";
    mso-style-link:"Heading 4";
    font-family:"Cambria","serif";
    font-weight:bold;
    font-style:italic;}
span.TitleChar
    {mso-style-name:"Title Char";
    mso-style-link:Title;
    font-family:"Cambria","serif";
    letter-spacing:.5pt;
    font-weight:bold;
    font-style:italic;}
.MsoPapDefault
    {margin-bottom:10.0pt;
    line-height:115%;}
@page Section1
    {size:612.0pt 792.0pt;
    margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.Section1
    {page:Section1;}
 /* List Definitions */
 ol
    {margin-bottom:0cm;}
ul
    {margin-bottom:0cm;}
-->
</style>

The HTML:

</p>

<div class="Section1">
<h1 align="left" style="margin-left:0cm;text-align:left;text-indent:0cm"><b style="font-size: 13px;"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">Read the passage given below and sum up in one sentence what you think is the central idea of the passage.</span></b></h1>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">What constitutes obscenity is hazy — by religion, nation, culture or statute. Bertrand Russell goes a step further, arguing that “Obscenity is not a term capable of exact legal definition; in the practice of the Courts, it means ‘anything that shocks the magistrate.’ ” </span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">In the England in which Russell lived, magistrates showed various levels of shock. The British Parliament had passed the Obscene Publications Act in 1857 a few decades before Russell was born, to control obscene literature which was there, “for the single purpose of corrupting the morals of youth and of a nature calculated to shock the common feelings of decency in any well-regulated mind.” Such a broad generalization obviously allowed the moral police to do as they pleased, sometimes absurdly so. For instance, Annie Besant and co-author Charles Bradlaugh were once sentenced to six months in jail for publishing a pamphlet on birth control!</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;"> </span></p>

<p class="MsoNoSpacing" style="line-height:150%"><strong><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">Write out the central idea below:</span></strong></p>

<p class="MsoNoSpacing" style="line-height:150%"><b><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">Central idea:</span></b><span style="font-size:14.0pt;line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;"> ____________________________</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">_____________________________________________________________</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><b><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">How to attempt:</span></b><span style="font-size:14.0pt;line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;"> <i>Read the passage after asking yourself: what is the author saying? Approach the passage armed with a pencil. Each line should be read asking yourself whether it constitutes an idea or is it a supporting example. </i></span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">If we underline the recurring words in the passage we can easily see that it is about morality. The temptation is to think that the first line gives away the central idea, but that would ignore what is written later. </span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">Let us sum up the ideas that are contained in the passage:</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">        (<i>i</i>)    Definition of obscenity is hazy</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">        (<i>ii</i>)    Definition according to British law of 1857</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">        (<i>iii</i>)   It was used by moral police sometimes to absurd lengths</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">        (<i>iv</i>)   Example of two people being jailed for talking about birth control</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">To get to the central idea, we can knock out (ii) and (iv) from the above because these statements do not constitute the idea.</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">In the second paragraph, we see some names and an example. We can see that (ii) is supporting (i) and (iv) is supporting (iii). So the central idea must combine statements (i) and (iii). Combining both of them, we can see that the central idea must be something like this: <i>Obscenity is a vague concept that is used by people to control ideas, sometimes to absurd lengths.</i></span></p>

<p class="MsoNoSpacing" style="line-height:150%"><b><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">What we have learnt:</span></b><span style="font-size:14.0pt;line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;"> <i>Spotting the central idea requires ignoring details. The central idea should encompass most of the ideas contained in the passage.</i></span></p>

<p class="MsoNormal" style="line-height:150%"> </p>

Thank you

@MrLister I want the HTML content to have its style as well as the page style shouldn't be getting disturbed — scorpionmanace
– scorpionmanace, Commented Jul 29, 2013 at 9:40
Still not clear. You want some of the styles to be kept, but not all of them? Can you give some examples of this incoming HTML, and which of the styles you can't use? — Mr Lister
– Mr Lister, Commented Jul 29, 2013 at 9:43

Tikolu · Accepted Answer · 2022-01-29 14:56:50Z

2

I was dealing with that exact same problem, and I managed to solve it by using the embed element instead of a normal div.

The only complication is that you cannot simply set the innerHTML of an embed element, you need to set the src instead. This can be accomplished through the use of blobs.

This was my original code:

let embedContent = "<html> ...";
let embedContainer = document.createElement("div");
embedContainer.innerHTML = embedContent;

And I changed it to this:

let embedContent = "<html> ...";
let embedBlob = new Blob([embedContent], {type: "text/html"});
let embedContainer = document.createElement("embed");
embedContainer.src = URL.createObjectURL(embedBlob);

The new method stops any internal styles from affecting the outside document.

answered Jan 29, 2022 at 14:56

Tikolu

4695 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Allen Over a year ago

I am not so confident this would have worked in all browsers 8 years ago when this questions was first asked, but hats off for the creative solution.

robooneus · Accepted Answer · 2013-07-29 09:35:47Z

1

You can override inline styles with CSS like so (from CSS-Tricks):

For:

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

Use:

div[style] {
   background: yellow !important;
}

OR

Just remove the inline CSS when you pull the HTML and don't output it at all -- keeps your CSS clean.

answered Jul 29, 2013 at 9:35

robooneus

1,3448 silver badges10 bronze badges

1 Comment

Mr Lister Over a year ago

If I read the OP correctly, there is a <style> element in the HTML file which he needs to remove, not style= attributes in the body. Edit: or not.

Ganesh Jadhav · Accepted Answer · 2013-07-29 09:39:18Z

0

You can add !important to the external CSS properties. The property won't get overridden by any other property.
For example:
height: 100px !important;

OR

You can use 'reset CSS', like this

answered Jul 29, 2013 at 9:39

Ganesh Jadhav

2,8481 gold badge22 silver badges34 bronze badges

2 Comments

scorpionmanace Over a year ago

I stated there its not certain what all tags will be getting effected because of this. for example I have many tags like h2,h3,h4,<span> on my site page on which this inbuilt css aplies and changes the styling. making a single or multiple things !important isn't a solution since (again) the html content is getting dynamically imported from the server wherein each content type has its own styling scheme.

Ganesh Jadhav Over a year ago

As @Pete suggested, you can remove those 'style' elements which comes with the html element when you import it, using RegEx. If you have to add your own styling to this content, you can add after removing the earlier ones.

Collectives™ on Stack Overflow

Stop embedded CSS to act on html page and not to override the external CSS properties

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related