CODEWITHSUNDEEP
htmlcss
Matthew Peel
Matthew Peel

Reputation: 377

Reset all CSS for one element and its children

My Problem:

We offer full customization for our site to our customers (so they can make out app look like the rest of there site). They provide us a HTML "surround" page, which our main app is rendered into (no iFrame, the HTML of our app is string.replaced() server side essentially). They can include any JS and CSS links to style this "surround" page.

The problem is, they often include their main CSS file for there full website (totally unnecessary, but easiest method to make there part look right), which includes lots of generic rules. Our app then obviously then obeys these rules, and it breaks a lot of our default styles. Specific example, they have a 'h3' rule which sets text-transform and font-family

h3 {
  text-transform: uppercase;
  font-family: 'Fjalla One',sans-serif;
}

In our own CSS, we set a the font-family of a class that is applied to the h3 tag, but not the text-transform property. As such, our CSS changes the font-family, but we inherit the text-transform.

Is there any way I can tell the browser to "start again" with applying CSS from a given element? I know its very un-Cascading, but I need the users CSS to stop cascading past our apps first element, and then apply our CSS to that element and its children. I hope i've explained myself clearly.

Upvotes: 14

Views: 6248

Answers (1)

Yash Yadav
Yash Yadav

Reputation: 655

Option 1:

Give them a class like remove-all-styles

  .remove-all-styles {
        all: revert;
   }

Then write your css code below this css code and make sure your css has higher priority than their css file.

What is the order of loading the CSS files in a HTML page?

Option 2:

Give initial or auto values to all elements in css then write your css code below

https://www.w3schools.com/cssref/css_default_values.asp

Upvotes: 8

Related Questions