How to break CSS inheritance?

Question

I have created a web widget. That my client put in their websites. Basically on load it calls webservice and loads data specific to client.

As a result it looks like

Answer 1

Use of the !important css attribute is considered a bad practice. Because it introduces the potential for precedence conflicts, and makes it extremely difficult to troubleshoot css in the long run.

A less intrusive approach to this problem is to delimit your widget with an id, and in your stylesheet, to reset some of the most important style declarations using the "universal" selector, such as:

#myWidget *{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

For example. Then, define your overrides specifically.