Overriding CSS properties that don't have defa

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?

Answer 1

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; ?>
}

Answer 2

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;
}