Resetting inherited CSS

Question

I'm trying to create an alternate design to a site as a fallback. I can't really change how the system is architected. A main stylesheet is loaded, and a second is loaded after it. I have control over the second stylesheet. There's a lot of the CSS that I want to reset, specifically form elements.

However, I'm having difficulty with that. For example with a <button>:

background: rgb(88,222,255);
border-radius: 4px;
border: 1px solid #91d7eb;
box-shadow: 0px 2px 4px 0px rgba(1, 75, 138, .8);
color: #FFF;
cursor: pointer;
font-family: "Graphic-Font";
font-size: 25px;
font-weight: bold;
text-shadow: 0px 1px 3px #014b8a;
padding: 10px 40px;

While I can set background: none, border-radius: none` and so on, what happens is the button has no style, rather than the default browser style. I have to get the form elements to be the default browser style, among many other elements on the page. But I can't seem to get at least the form elements to be unstyled.

For Clarity Simplifying the question: How does one re-style a <button> back to default?

Answer 1

I would suggest using a CSS reset as a starting point (Eric Meyers' is probably the most famous).

I think you're running into trouble on things where you don't want to set your own style, but return it to the browser default (e.g. you don't want margin:0; on everything, you want the default big margin on the H1, the default smaller one on the p, etc.

You can actually get copies of the user agent stylesheets, modify them to make them more specific, and include them to overwrite. Here is a site that has copies of a lot of default UA stylesheets. A problem here is that every browser uses their own, so unless you browser detect and serve selective stylesheets, it's not going to really look like it normally does for that browser. However, I think that's ok. I'd actually suggest you just pick a browser default you like and set all browsers to look like that, or you can use the W3C's suggestion for default browser styles.

All of this doesn't solve your problem though, because styling form elements is hell. As soon as you apply a style, some browsers will switch the rendering mode for the form element so you can never get it back to the original style. For example, IE7 doesn't support rounded corners, yet their default buttons have rounded corners, because it renders in Windows OS style. But as soon as you give the button a border, or some other style, it loses that nice Windows shaded rounded corner default look, and there's no way to get it back without using an image!

So really, I wouldn't shoot for trying to get browsers to go back to their native default style. I'd use a UA default stylesheet, and then modify it so make a sort of generic, cross-browser, cross-system default. It won't look like the native unstyled code, but it will look close enough.

Answer 2

You need to understand how CSS specificity works. You can overwrite any CSS rule, by making it more specific than other rules.

For example:

<div class="content">
    <div class="wrapper"><span>Hello World</span></div>
</div>

CSS:

.content .wrapper span { ... }
.wrapper span { ... }

In this case the first declaration will overwrite the second, because it is "more specific". You can usually just go up the tree one level and specify the wrapping element or the wrapping class to override an inner element's rule. This is really handing on a lot of CMS systems, such as WordPress, where you don't have access to the main stylesheet, or just want to leave it alone and re-skin the parts you want.

Read the article, it's important.

CSS Specificity: Things You Should Know