Integrate widget in existing html without css conflict
<p>I have to integrate widget html file in a existing html page but i am getting many css issue after this. Is there any way that i can restrict css files of main html not to apply on widget html file.</p>

<pre><code>**Sample html :**
&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" class="csstransforms" lang="ru" &gt;
&lt;head&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
  &lt;link href="abc.css" media="screen" rel="stylesheet" type="text/css"/&gt;
  &lt;script src="abc.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;


&lt;!-- WIDGET CODE--&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en" ng-app="adidas" bb-api-url="https://adidas-dev.bookingbug.com"&gt;
&lt;head&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
  &lt;link href="def.css" media="screen" rel="stylesheet" type="text/css"/&gt;
  &lt;script src="defjs" type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
.......widget html code
&lt;/body&gt;
&lt;/html&gt;



&lt;body&gt;
&lt;/html&gt;
</code></pre>