How to avoid CSS interference in an HTML page

Tags: javascript,html,css

Problem :

I'm building a script that will add some HTML code to the page. That HTML code has style, let say I added

<div class="myplayer">
</div>

The code was added using JavaScript, but I also add styling, through CSS

.myplayer {
 a_property: #fdfdfd;
}

Everything is fine. But wait, my script is expected to run on pages I don't have control over, someone while designing his pages put this code

.myplayer {
 another_property: crap;
}

or

* {
 that_property: crap;
}

That crap is now appearing on my script, because I'm assigining it. I could do in my CSS Class

.myplayer {
 iterate_over_all_properties: default;
}

but the number of properties is a little bit overwhelming and I need to study each one a part. How do I avoid that interference?

---

Solution :

Presumably you want to wipe out css on only the elements that are "yours". You can do this by applying a style that applies to elements of a particular class name, and all its children, using the wildcard. For instance:

.reset * {
border: 0 !important;
background: transparent !important;
/* etc */
}

Then you will typically have to make creative use of !important on your own css styles.

It's never pretty, but can generally be done.

Google "css reset".