How can I refer a library only to a specific part of the HTML?

Question

I have the following code, which I found from a tutorial

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer- 
 reset/2.0/reset.min.css">

and I would like to include it only to a specific part of my code and not the entire HTML file, is that possible?

Right now it's on the top of my code and it affects the entire page while I want it to affect only some things inside a div. Placing it inside the div doesn't seem to matter.

why not just manually reset the elements you want? for example by applying margin 0 and padding 0 to those specific elements. — slacle, May 12 '18 at 07:23

Ali Sheikhpour · Answer 1 · 2018-05-12T07:47:45.853

instead of linking a stylesheet, use import and apply it as scoped style:

<div>
    <style scoped>
        @import "https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css";
    </style>
</div>

As the scoped is no more supported by many browsers, if you had browser support problems, use Jquery Scoped Plugin instead.

As a hacky solution, use iFrame for that part of your page however if you want to apply css-reset on main parts of page as body margins or scrollbars, this will not help. This is a simple sample of main page and subPage using iframe:

main page:

<html>
    <body>
       Main Content part 1
       <iframe src="subPage.html" style="border:0;width:100%;">
       Main Content part 2
    </body>
</html>

Source of iframe (subPage.html):

<html>
    <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    </head>

    <body>
       Styled content goes here.
    </body>
</html>

Finally if you have dynamic content and can not determine the height of iframe, please refer to this Q/A

Could you please provide an example using iFrame on this case? — Zack Roberto, May 12 '18 at 07:35

How can I refer a library only to a specific part of the HTML?

1 Answers1