Overriding CSS properties that don't have default values

Question

Is it possible in CSS to override a property if that property doesn't have a default value?

For example, say your primary stylesheet defines a border for a particular element:

#element {
  border: 1px solid #000;
}

If you wanted to disable the border from a secondary stylesheet, you could do this:

#element {
  border: none;
}

Assuming the secondary stylesheet was loaded after the primary one, the border: none rule would take precedence and remove the border.

But what if you were trying to override a property that doesn't have a default or null value?

#element {
  position: absolute;
  left: 0;
}

Now say, in your secondary stylesheet, you wanted to do this:

#element {
  right: 0;
  top: 0;
}

And you didn't want any value for left. There's no such thing as left: none;, so...how do you "undeclare" the left property assigned in the primary stylesheet?

Subclinical

What do you mean by "a property that doesn't have a default or null value"? Every property has an initial value according to the spec, and some browsers may set their own values for certain elements in their UA stylesheets. – Downstage

Answer 1

If I'm reading your question correctly, do you want to, in one stylesheet, "erase" a declaration that you have in another stylesheet, such that the property will compute to the default value?

There's currently no way to reset it to whatever the value a browser uses as the default for a given element. The closest you can get is with the CSS3 initial keyword, which resets a property to its initial/default value according to the spec rather than according to how a browser defines it:

#element {
  left: initial;
  right: 0;
  top: 0;
}

There's not much browser support for it besides in Safari/Chrome and Firefox (as -moz-initial), so your next best alternative is to look up the initial value and hardcode it. For the left property, it's auto (and I believe it's this value for any element in all browsers anyway), so:

#element {
  left: auto;
  right: 0;
  top: 0;
}

Downstage

Thx. It does exactly what i have searched for! – Tent

Answer 2

Every CSS property has Browser dependent default value so there is no such thing as CSS property without default value.

As BoltClock stated, initial is best choice.

Here is some specs about it:

http://www.w3.org/TR/css3-cascade/

EDIT:

Before jmbertucci's comment I did not think how I have done this always,

By using CSS reset you can define your own default values which does not depend on used browser. If you define left: 10px; in your own reset.css then you can use that same value when you need it to fall back to default.

For example I often look for font-sizes from my reset.css and use them to do height calculations that depends on text height.

And if using PHP or some other preprocessing you can always use that for CSS files too:

<?php
define('DEFAULT_WIDTH', 'width: 100px;');
?>

div {
    top: 100px;
    <?php print DEFAULT_WIDTH; ?>
}

Splanchnic

Sampo has a good response in that there is always a default value but there's no way to "reset" that value. Instead, it's common practice to force your own defaults for things via the "CSS Reset" method. This site links to some of the most popular reset sheets. cssreset.com Reset is used because different browsers (at least use to) have differences between margin vs padding and others styles. Some argue that CSS reset is overkill because you're setting a value to a default and then resetting again in your styles and they want CSS Reset to be 'lighter'. – Hillinck