The quick answer is use "all:revert"
.element {
all:revert;
}
"all:revert" will reset all the style properties on your element. In the case of text or inherited properties, "revert" resets your element's CSS property back to its inherited values coming from your "body" element or the browser's default UA style value, not to the property’s base style. For a non-inherited property, it resets it back again to the browser's default style and not to the property’s base style. "all" allows all properties to be affected.
This is likely what you want to see. You can use "initial" or "unset" but you have to manually apply them for each property, and what is even worse, they will not return properties to the element's default display values, but will essentially erase the element's property values and create a completely unstyled element. For example, "display:block" will be changed to "display:inline" for all elements you choose to set with "display:initial". You do not want to ever do this as it erases your styles AND the browser's default UA element styles from the selected element completely. The reason it works that way is all HTML elements come without any styles, so mostly look alike until the browser's UA sheet containing styles for all the elements are applied. "initial" and "unset" would wipe away most of that from the browser. "revert" at least preserves their basic style set applied by the user's browser, and is therefore superior to "initial" and "unset".
Problems Using "all:revert": This is a newer CSS declaration that only works in more modern HTML5 browsers (since c.2020). None of the older, non-HTML5 browsers (pre-2010) will understand this declaration, so it will be ignored by them. No version of Internet Explorer understands "all:revert", either. Only IE8+ understands "initial", so those older versions will not be affected. It is not reliable, but still a useful tool I use, however. :)
NOW FOR AN EVEN BETTER SOLUTION
There are two ideas here being confused:
- The first idea is about "returning" styles back to a browser's UA style sheet value set (the style sheet that comes with the browser on install that defines what each element looks like). Each browser defines its own styles as to how elements should look by default. This idea is about returning all page styles back to each browsers native element styles.
- The second idea is about "resetting" all default browser styles to a common look and feel shared by all browsers. People build special "reset" sheets to try and align all the browser elements to a common agreed on style, universally. This has nothing to do with a browsers default UA styles and more about "cleaning up" and aligning all browsers to a common base style. This is an additive process only.
Those are two very different concepts people here are confusing.
Because each browser often had default, out-of-the-box element and layout styles that looked slightly different, people came up with the idea of the "reset" or "reboot" style sheet to align all the browsers BEFORE applying custom CSS. Bootstrap now does this, for example. But that had nothing to do with people wanting to return to the browser's default look and feel.
The problem was not the building of these custom "reset" style sheets, it is figuring out what the default CSS was for each browser and each element BEFORE any styles were applied. Most found out you cant rebuild an existing clean cascade until you "clear out" all styles already applied. But how to get back to the default browser styling?
For some this meant going beyond returning the elements to the browsers UA style sheet that comes with the browser. Many wanted to reset back to "initial" property values which has NOTHING to do with the browser's default style, but really the properties defaults. This is dangerous as in the case of "display" pushes block level elements back to "inline" and breaks table layouts and other things.
So I do NOT agree with users here using "initial" to reset anything or custom reset classes that change every property back to some arbitrary base value set.
A better solution to me has always been to attempt to try and return all core element styling back to the browser's UA style sheet values, which is what all our end-users are using anyway. If you are creating a new website, you don't have to do this. You start with the browser's default styles and add to them. Its only after you've added third-party CSS products, or found yourself with complicated CSS cascades you want to figure out how to return to the browser default style sheet values.
For this reason, I'm for creating your own "reset" sheet to reset all the elements to one common style first that's shared by all old and new browsers as a first step. You then have a solid framework that's much easier to revert to without going back to the browser defaults. You are simply building on a reset common core set of element style values. Once build your own "reset" sheet, one that ADDS not ALTERS the browsers UA styles, you have a site that's very easy to modify.
The only problem remaining then is when you have a site that does NOT have such a reset sheet, or have that complex third party CSS and need to try and return to the browser UA styles. How do you do that?
I realize Internet Explorer has forced us too manually reset every property to get back to any sort of reset. But pushing those property values all back to "initial" destroys the browser UA style sheet values completely! BAD IDEA! A better way is to simply use "all:revert" for non-IE browsers on every element using a wildcard, and "inherit" only for a handful of inherited root-level properties found in the "html" and "body" elements that affect all inheriting children in the page. (see below). I'm NOT for these huge resets of properties using "initial" or going back to some imaginary standard we assume all browsers or IE will use. For starters "initial" has poor support in IE and doesn't reset values to element defaults, only property defaults. But its also pointless if you are going to create a reset sheet to align all elements to a common style. In that case its pointless to clear out styles and start over.
So here is my simple solution that in most cases does enough to reset what text-based values sift down into IE from the root and use "all:revert" for all non-IE browsers to force non-inherited values back to the browser's UA style sheet completely, giving you a true restart. This does not interfere with higher level classes and styles layered over your element styles, which should always be the goal anyway. Its why I'm NOT for these custom reset classes which is tedious and unnecessary and doesn't return the element to its browser UA style anyway. Notice the slightly more selective selectors below which would write over, for example, Bootstrap's "reboot" style values, returning them to the browser default styles. These would not reset element styles on elements for IE, of course, but for non-IE browsers and most inheritable text styling it would return elements in most agents to the UA style sheets that come with browsers:
:root, html {
display: block;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
-webkit-text-size-adjust: inherit;
-webkit-tap-highlight-color: inherit;
all: revert;
}
html body {
display: block;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: inherit;
padding: inherit;
color: inherit;
text-align: inherit;
background-color: inherit;
background: inherit;
all: revert;
}
/* This rule attempts to manually reset all elements back to the
UA browser style sheet using "revert" and the "wildcard" (*)
which resets all properties on all HTML elements.
This would overwrite most of Bootstraps "reboot" styles
on elements, for example.
Note: This selector should be ignored by IE. */
html body * {
all: revert;
}
allthat is being proposed for resetting all CSS properties for a given element to certain CSS-wide values - the value you want to use would beunset, which resets a property to either its inherited value if it inherits by default, or otherwise, its initial value. No word on implementation, but it's nice to know somebody has thought of it. – BoltClock♦all: revertwill do. See my answer. @CBroe Yes such a thing is exists now. – Asim K T