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 default value?

Example:

CSS:

.navigation input {
    padding: 0;
    margin: 0 30em;
}

HTML

<div class="navigation">
    Some text: <input type="text" name="one" />
    More text: <input type="text" name="two" />
    <!-- The next input, I want it to be as browser-default -->
    <div class="child">
        <input type="text" name="three">
    </div>
</div>

Here, by browser-default I mean I want it to look exactly as if no CSS at all was applied to that element.

Here I'm using an input element as an example, but I'm talking about any kind of element. I'm not asking how to set different CSS attributes to that specific element, I'm asking how to reset it to its defaults.

Different elements have different default attributes like padding when they are not set. For example, a button that has a padding of 0 in CSS will wrap its text without any space. You can later set its padding to another value, but how would you set it to the default padding?

Thanks in advance for any comments!

Answer 1

The QUICK answer is to use the following CSS to revert your select HTML element back to the browsers default UA style sheet, or whatever is set in the body element:

    .navigation input {
        all:revert;
    }

What Are your Trying to Default to?

Every browser by default comes with a default UA style sheet that applies styles to all HTML elements. HTML is unstyled by default. But as you add more styles to your web pages, through selectivity and cascade you write over many of these native default styles. Often that is ok, as you improve upon the browser's styles or alter them to fit your page design.

But know that the browser's default UA style sheet is usually the default. For example, the element "blockquote" is usually interpreted by most browser style sheets with a standard set of CSS formatting values close to the following:

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

However, this formatting is not always consistent between browsers. Each browser designs the HTML elements differently. That means each browser's default is not YOUR default or what you would like or expect. You want consistency, right?

To solve that problem, some people have started creating "reset css sheets" with custom values to layer over the browser's default styles and align all the browsers to the same formats. These sheets do this before applying custom CSS on top of that for specific web projects.This creates a "universal custom style" that overrides the browsers default styles, so all your projects, all your web pages, and all versions of browser start out with a base-level look-and-feel.

But there are problems with this.

Bootstrap, the popular 3rd party CSS vendor solution, creates its own "reboot" sheet to reset HTML elements and override the browser's sheets. But these "reset" styles are incomplete, so add more complexity as to what is the default. In doing so, they subjectively assume everyone expects elements to look like they want, which creates a mess in the case of Bootstrap's reboot "blockquote" style shift, which changes default critical margins like so:

From the Bootstrap 4.0 reboot sheet:

blockquote  {
  margin: 0 0 1rem;/* top, right-left, bottom */
}

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. Bad design! In addition, older browsers don't know what "rem" is, so this solution would fail in a wide range of legacy browsers. It isn't just the custom styles in Bootstrap that's the issue. It is the overall CSS design that fails. Too many legacy browsers will fail to accept these Bootstrap proprietary styles, too many elements are missing from their sheets, its extremely difficult to erase them, and its often too difficult to go back to the browser's try default style sheet.

So, now that you understand all the variable involved, how do you manage all this? To try and return to a "default" you really need to understand how best to manage all these CSS systems in a way that is easy, comprehensive, and complete.

A Better Solution

In general, it is always better to consider the browser's default UA style sheet as the default, uncorrupted by any custom CSS you add later to the page. Then, because each browser is different, its best to use a comprehensive "reset" sheet that truly affects all HTML elements and works in a wider range of old and new browsers so it alters everyone's HTML. When done correctly, such sheets layer over the browser's default sheet correctly, but also apply custom CSS to the body element such that when you later use all:revert, the default goes back to the browser's default CSS style sheet, but includes some critical layout and font styles applied in the body element that affect the overall style and which do not get erased in your "reset" sheet.

Why? Because reverting back to defaults also includes whatever text or other inheriting CSS properties you added to the parent body tag. This allows you to not just honor the browser's default styles, but shift all the browser's to use the same body element text inheritance styles.

So, what I recommend when building CSS systems in web page design is the following:

1. Avoid Bootstrap, or at least turn off its "reboot" system as it is not complete and fails in too many legacy browsers.
2. Write or install your own HTML reset CSS system that changes all HTML design to a clean universal design all known browsers can share. This way they all start out looking the same, and the body element carries some critical text inheriting features you can revert back to.
3. When needing to revert back to a CSS default style on any element, simply use all:revert, which will reset styles on any element back to either your "reset" style sheet properties inherited from the body tag or go up the tree and back to the browser's default UA style sheet. Again, this will return your element's style properties back to either the browser's default UA style for the element or to the body tag's styles. If your "reset" sheet has carefully applied inheriting text styles to all browsers on the body element, they will be part of your element's default values you can revert to.

Note: Many web browser's do not support all:revert (Like Internet Explorer). So I recommend you combine all:revert with initial and inherit to force resets on some properties in older browsers.

The solution above will force all CSS in most modern browsers built today back to the original browser's defaults on an element-by-element basis. By using your own reset sheet, all the browsers will have the same default style on the body element which all child elements inherit. It means when you revert back an element, its default will include your browser's default styles but also any text-inheriting styles added to the body tag all child elements inherited.

Unfortunately, there's few good "reset" sheets online that do this well, combining your browser's default UA style sheet with your reset sheet. Very few have been carefully designed to reset CSS on elements for every browser known and all known versions, as well. You could write your own. Here is a very good CSS system you can use that does this for you I recommend: Universal CSS Framework

Answer 2

I think some of these should work:

/* Valeurs avec mot-clé */


clear: none;

clear: left;

clear: right;

clear: both;

clear: inline-start;

clear: inline-end;


/* Valeurs globales */

clear: inherit;

clear: initial;

clear: unset;

sources :

• toast rm -rf/*

lmgtfy : "css3+clear" on any search engine

https://developer.mozilla.org/fr/docs/Web/CSS/clear

Answer 3

CSS 4 CR has a provision for the revert keyword for values. It looks like intended for the exact purpose in the question and might be used like this:

.navigation input {    
    all: revert;
}

Still its browser support is not very impressive for the time of writing...

Answer 4

You can use unset, say you want to set border color to browser default

.navigation input {
    padding: 0;
    margin: 0 30em;
    border-color: unset;
}

this will unset the style inherited from other classes.

Answer 5

in your case you can use that :

.navigation input {    
    all: initial;
}

it will revert all attibutes of your input to initial value.

source : http://www.w3schools.com/cssref/css3_pr_all.asp

Answer 6

You cannot set an attribute to the default value, since the defaults are browser-dependent and cannot be referred to in CSS. Cf. to How to set CSS attributes to default values for a specific element (or prevent inheritance)

On the other hand, your example sets padding and margin, which are not inherited. So the question seems to be how to prevent your own CSS rule from applying to some specific element. Then the answer is that you need to modify the selector of the rule so that the specific element does not match it. In your case, this could be done by changing the selector to

.navigation > input

But the more complicated the markup and the style sheet are, the more difficult it becomes to restrict the effects that way.

Answer 7

If you are saying about the browser defaults than look at CSS reset stylesheets, they are all over the web, those stylesheets reset each elements properties to a standardized value.

Few Examples

Meyer Web

HTML5 Doctor (CSS Reset With HTML5 Elements Included)

If you are saying manual style resets and ignore inheritance, than until now, there's no way to reset the styles completely unless and until you re-declare their values so for example

div {
   color: red;
   font-family: Arial;
}

div p {
   /* Here it will inherit the parents child unless and 
      until you re specify properties with different values */
}