remove / reset inherited css from an element

Question

I know this question was asked before, but before marking it as a duplicate, I want to tell you that my situation is a little different from what I found on the internet.

I'm building and embedded script that people can put it on their sites. This script creates a div with a certain width/height and some information in it.

My problem is that some websites declare styles for div that are inherited by my div as well.

for example:

div{     background-color:red; } 

so if I don't set any background color to my div, it will show red even if I don't want that.

The only solutions I come along is to overwrite as many css proprieties, this way my div will show exactly as I want. The problem with this solution is that there are too many css proprieties to overwrite and I want my script to be as light as it can be.

So my question is if you know another solution to my problem. It can be in css/javascript /jQuery.

Thanks

Answer 1

"Resetting" styles for a specific element isn't possible, you'll have to overwrite all styles you don't want/need. If you do this with CSS directly or using JQuery to apply the styles (depends on what's easier for you, but I wouldn't recommend using JavaScript/JQuery for this, as it's completely unnecessary).

If your div is some kind of "widget" that can be included into other sites, you could try to wrap it into an iframe. This will "reset" the styles, because its content is another document, but maybe this affects how your widget works (or maybe breaks it completely) so this might not be possible in your case.

Answer 2

Only set the relevant / important CSS properties.

Example (only change the attributes which may cause your div to look completely different):

background: #FFF; border: none; color: #000; display: block; font: initial; height: auto; letter-spacing: normal; line-height: normal; margin: 0; padding: 0; text-transform: none; visibility: visible; width: auto; word-spacing: normal; z-index: auto; 

Choose a very specific selector, such as div#donttouchme, <div id="donttouchme"></div>. Additionally, you can add `!important before every semicolon in the declaration. Your customers are deliberately trying to mess up your lay-out when this option fails.