Question

Basically I have two external css in my page.

The first Main.css contains all style rules but I don’t have access to it, and hence I cannot modify it. I have access to a second file Template.css , so I need to override the Main.css‘s values in template.css.

This is easy for which I have to change the value, but how do I remove a property entirely?

Like say a class .c1 has height: 40px;, how do I get rid of this height property?

Answer 1

You have to reset each individual property back to its default value. It’s not great, but it’s the only way, given the information you’ve given us.

In your example, you would do:

.c1 {
    height: auto;
}

You should search for each property here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

For example, height:

Initial value : auto

Another example, max-height:

Initial value : none

---

In 2017, there is now another way, the unset keyword:

.c1 {
    height: unset;
}

Some documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/unset

The unset CSS keyword is the combination of the initial and inherit
keywords. Like these two other CSS-wide keywords, it can be applied to
any CSS property, including the CSS shorthand all. This keyword resets
the property to its inherited value if it inherits from its parent or
to its initial value if not. In other words, it behaves like the
inherit keyword in the first case and like the initial keyword in the
second case.

Browser support is good: http://caniuse.com/css-unset-value