Question

Problem: An existing resource dependency (which I’m not permitted to alter or remove from the build) which contains a stylesheet that dictates an unwanted button style. I want to somehow overcome the influence that this stylesheet has on the button style in my page.

Question: Using my own local stylesheet, how can I revert to the default Windows css button style (background, shape, text)? -I dont know what the css attributes should be, etc. (I assume I would have to use the “!important” phrase, etc.)

Answer 1

You won’t, and shouldn’t, use !important. You just need to properly override following the principles of CSS specificity and inheritance.

Explanation of CSS Inheritance

For example–let’s say your ‘unwanted’ button style is something like this:

<input type="button" class="unwanted" />

And you’ve got CSS in your (uneditable) style sheet:

.unwanted {
fooRule: whatever;
barRule: whatever;
}

Using inheritance, you just need to write your own external stylesheet. Things to remember:

(1) You should put it below the existing that contains the ‘unwanted’ stylesheet reference. Inheritance processes external stylesheets sequentially. This follows the ‘closest rule wins’ principle.
(2) The way you write the CSS rule must be MORE specific than the rule that currently applies the unwanted style. Again, the above link really helps explain this.

Going back to our previous example, the unwanted style is being applied simply by a class of ‘unwanted’. Your rule can override without editing the HTML. Alternately you can edit the HTML–it’s up to you. It also depends on how globally you want to affect button styles.

If you want to globally affect all buttons with ‘unwanted’ class, you would do:

input[type='button'] .unwanted {
fooRule:override;
}

If you only want to change SOME of the buttons that have a style of unwanted, you would instead do:

.unwanted.newRule {
fooRule:override;
}

And then you would mod your HTML to be:

<input type="button" class="unwanted newRule">

Note that .unwanted.newRule means it will only impact ‘elements’ with a class of both unwanted and newRule. It would not change anything if the unwanted style is set up like this:

<form class="unwanted">
    <input type="button" class="newRule" />
</form>

The reason being .unwanted.newRule means ‘both classes are on the same element’. You would change it to :

.unwanted .newRule {foo}

So–my point is, there are a ton of semantically correct ways to CORRECTLY utilize CSS specificity and inheritance, and do what you want to do, without having to use !important.

On a side note, the only reason you’d have to use !important is if the css styling the button is actually being applied using javascript that writes ‘style’ attributes to the HTML element. If that is the case, (1) don’t use that JS, as that is a horrible method for styling using JS, (2) you will have to use !important to override the inline style being applied by the JS. Again, this is because of how cascading works–in this case, CSS is applied by (1) browser (user agent), (2) external css, (3) internal ‘head’ css, (4) internal inline css, (5) author !important declarations, (6) user !important declarations.