How to set CSS attributes to default values for a specific element (or prevent inheritance)

Question

Given any HTML element that is a child of another element and is automatically inheriting a series of CSS attributes: how can you set one (or all) of those attributes to the

Answer 1

Every browser by default looks at a plain HTML element and assigns it its own "default" CSS formatting. The element "blockquote", for example, is usually interpreted by a browser with a standard set of CSS formatting values as follows:

blockquote  {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

However, this formatting is not always consistent between browsers. So some people have started creating "reset css sheets" with values to align all the browsers to the same formats before applying custom CSS on top of that for specific web projects. Bootstrap does this, but in doing so, they subjectively assume everyone expects elements to look like they want, which creates a mess in the case of "blockquote" which removes critical margins like so:

BOOTSTRAP 4.0 RESET for "blockquote"

blockquote  {
  margin: 0 0 1rem;
}

This Bootstrap fix that comes in all Bootstrap downloads fails as it strips the critical left-margin formatting that defines blocked quotes in scientific journals and adds one at the bottom. Older browsers don't know what "rem" is so would look differently. It isn't the custom classes in Boostrap that's the issue its these poorly designed "resets".

Mr. Alien's answer unfortunately is half-correct, because his CSS resets are also subjective like Bootstrap's and don't fully return the CSS to browser defaults but do a clean up routine to force all browsers to use a new default design like Bootstrap....not the browser's original one. This is compounded by the fact there's no true CSS reset sheet I know of that has carefully been designed to reset CSS for every browser known and all their versions. That is why its always been better for designers to NOT use these custom CSS frameworks and start from scratch. But most are so addicted to Twitter Bootstrap that it is not possible to strip that from most web projects today. Its also WAY too complicated to customize every single element manually in your own sheets as you discover them. That raises the danger of then writing over classes. Using "!important" does that, as well.

There are some tricks that will return your elements to the browser's default UA style sheet like so:

* {
    all:revert;
}

This would reset all HTML styles to their browser CSS defaults. But this trick does not work in Internet Explorer, for example.

What I recommend instead is you install an HTML reset sheet that will force all Bootstrap or other installs BACK to the original browser's defaults element by element so all the browsers have the same default. This site has some good values to use for such a sheet: https://www.w3schools.com/cssref/css_default_values.asp