How to stop all CSS overrides on a container DIV?

Question

I have a container div which i add to external websites using a bookmarklet to do some functions, the problem i face that this div contains some elements and each element has its inline style, but when i put in the external site, sometimes it overrides styles from the site CSS.

There is a way to stop any overrides on this div?

Answer 1

The host site should have it's CSS properties defined with the !important notice (color: red !important;).

Or you could append your styles to the DIV using JavaScript (jQuery). You can check if the DIV already has styling so you can decide to add or not to add any of your styling.

Answer 2

you can define css properites within the element to be able to display your div properly e.g.

<div style="margin:0;border:1px solid red;">

Or additionally you can supply your css styles with your Div html as well.

I know its a pain when the "external" site has css global rules; e.g

ul ( margin-left: 5px; }

the best I could do was to reset all these things for my div id.

UPDATE:

Yes, I understand that he has inline styles but the problem is caused by global rules. So e.g. if @Amr ElGarhy's div has ULs, they will all get left margin of 5px (as I exampled above). and Amr ElGarhy has to reset this margin in inline styles as well.