Undoing CSS specification

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.