Undoing CSS specification - css

Question

Can you, and if so how do you, undo a css specification? Suppose you wanted
textarea { width: 500px; }
and then you want a specific textarea with 70 columns:
<textarea class='email' cols=70></textarea>
Ideally, I would write a css rule
textarea.email { width: revert_to_default_unspecified_value; }
(but obviously that value doesn't exist.)
How do you do this? I'm interested in both this specific case, and also how to undo parent css specifications in children. This must have been talked about plenty, but it's hard to google.

Answer 1

The default value you're looking for is:
Initial: auto
http://www.w3.org/TR/CSS2/visudet.html#the-width-property
Notice that setting auto will revert to default for just some of the CSS properties. Other have different initial values.
The background-color property, for example, has a default value of transparent.
Initial: transparent
http://www.w3.org/TR/CSS2/colors.html#background
Some of the properties, like color, can't be restored to a default because they don't have a known default.
Initial: depends on user agent
http://www.w3.org/TR/CSS2/colors.html#colors
About undoing inherited CSS in children.
Let's take the font-size property, a property that inherits.
level0
<div style="font-size:36px;">
level1
<div [style="font-size:medium;"]>
level2
</div>
</div>
By default the level2 font size would be inherited from level1, but if we add the initial medium value we reset it to the size of the level0 text. The only inconvenient is that we can't ignore just one level of inheritance, so if we would add a level3, we would still be resetting to level0, and not level1.

Answer 2

textarea.email { width: auto; }

Answer 3

I would assume that since if you do not specify a css width rule at all for this textarea, its default value would be width: auto. Thus I would try in the specific case setting it back to the default where the HTML attributes should take over as normal:
textarea.email { width: auto }

Answer 4

To reset styles you can now use unset and initial special properties. The support for unset is currently low (56%) -http://caniuse.com/#search=CSS%20unset%20value but support for initial is quite high (80%) - http://caniuse.com/#search=CSS%20initial%20value.
Consider the example:
http://codepen.io/anon/pen/OMROye
<div class="outer">
Foo
<div class="middle">
Bar
<div class="inner">
Baz
</div>
</div>
</div>
.outer {
font-size: 50px;
color: #f3f;
}
.middle {
font-size: 25px;
color: #33f;
}
.inner {
font-size: 15px;
color: #f33;
}
.inner {
font-size: unset;
color: unset;
}
The inner text will have font-size and color like its' parent.
If we change our last style to:
.inner {
font-size: initial;
color: initial;
}
The inner text will have standard color and standard font-size.
Now it is the best time to point out that these properties are a little trickier than they look, for example unset sometimes acts like initial and sometimes acts like inherit.
Links to docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/initial
https://developer.mozilla.org/en-US/docs/Web/CSS/unset
https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value