Francisco Zarabozo Francisco Zarabozo - 4 months ago 6
CSS Question

How to set CSS attributes to default values for a specific element (or prevent inheritance)

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

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 */
}