How to redirect Css to just one Div

add a class to the div, example

<div class="nomedaclasse">

Then in a css or tag style, copy the code from the css file that you will get from somewhere else, instead of using the whole file. example:

<style>
.nomedaclasse{ background-color: #fff; } /* substitua o background-color pelo atributo desejado*/
</style>

Copy the Code

In my opinion, the best way would really be to extract what would be important from the code for you and then paste it into your code adapting whatever was needed for your div. However, here are two other ways to do this:

IFrame

There is a possibility that you can create a new page, say: div.html and customize it with the outside code as if it were a new page and then simply drag it to your div, because then the page CSS will only affect what is inside the div and vice versa. It would just put it like this in your div:

<div>
    <iframe src="div.html"></iframe>
</div>

Style Scoped

This is not exactly an ideal way, since your support nowadays is limited only to Firefox , but I think it deserves a mention. There is this way where you write a new style where you want it on your page and it only applies in that region with Scoped . That way you could also import this CSS. Example:

<div>
  <style scoped>
    h1 { color: red;   }
    p  { color: brown; }
  </style>
  <h1>Esse é um H1 afetado pelo scoped. Independente do estilo da página, ele será vermelho.</h1>
  <p>Esse é um parágrafo na scoped div. O texto será marrom.</p>
</div>

<p>Esse parágrafo não será afetado e será preto.</p>

You could use this way in your case:

<div>
    <style scoped>
        @import "externo.css";
    </style>
</div>

Sources:

• link
• link