original .outer { background: grey; padding: 10px; } .inner { background: beige; padding: 10px; border: 1px solid red; } .outer.jsx-4251329291{background:grey;padding:10px;} .inner.jsx-4251329291{background:beige;padding:10px;border:1px solid red;} inherit .outer { background: grey; padding: 10px; } .inner { background: inherit; padding: 10px; border: 1px solid red; } .outer.jsx-2666128901{background:grey;padding:10px;} .inner.jsx-2666128901{background:inherit;padding:10px;border:1px solid red;} original We have inline styles & local body styles for an anchor tag. a { color: red; font-size: 30px } Google a.jsx-2557663265{color:red;font-size:30px;} color: revert Set color property to the user agent stylesheet. a { color: green; font-size: 30px; color: revert; } Google a.jsx-130608763{color:green;font-size:30px;color:revert;} all: revert Set all CSS properties to the user agent stylesheet. color: green; font-size: 30px; all: revert; Google a.jsx-1461703904{color:green;font-size:30px;all:revert;} color: initial Sets property back to the spec default. color: green; font-size: 30px; all: initial; Google a.jsx-3976413163{color:green;font-size:30px;all:initial;} color: unset Inherit from parent if possible or sets property back to the spec default. color: green; font-size: 30px; all: unset; Google a.jsx-493956233{color:green;font-size:30px;all:unset;}