Reset Inherited CSS

Question

I am trying to create an alternative design for the site as a backup. I cannot change the way the system is created. The main stylesheet is loaded, and then the second is loaded. I have control over the second stylesheet. There are a lot of CSS that I want to reset, in particular the elements.

However, I have difficulties with this. For example, using <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`, etc., what happens is that the button has no style, not the default browser style. I should get the form elements as the default browser style, among many other elements on the page. But I can’t apparently get at least form elements that should be uneven.

For clarity. Simplification of the question: how to restore the <button> style to default?

Answer 1

I would suggest using CSS reset as a starting point ( Eric Meyers is probably the best known).

I think you have problems with things when you do not want to set your own style, but return it to the default browser (for example, you do not want margin:0; for everything, you want the default big margin to be H1 , the default is smaller in p , etc.

In fact, you can get copies of user agent style sheets, modify them to make them more specific, and enable them to be rewritten. Here is a site with copies of a large number of default UA style sheets . The problem is that each browser uses its own, so if you do not find the browser and do not use custom stylesheets, it will not look like usual for this browser. However, I think that everything is in order. I would suggest that you simply select the default browser and want all browsers to look like this, or you can use the W3C suggestion for the default browser styles .

All this does not solve your problem, because the elements of the style form are hell. Once you apply the style, some browsers will switch the rendering mode for the form element so that you can never return it to its original style. For example, IE7 does not support rounded corners, but their buttons have rounded corners by default because they are displayed in the Windows OS style. But as soon as you give the button a border or some other style, it loses that beautiful window shaded corner by default, and there is no way to return it without using an image!

So, I would not shoot trying to get browsers to return to their default native style. I would use the default UA style sheet, and then modify it to make some kind of general cross-browser cross-system default. It will not look like its own loose code, but it will look close enough.

Answer 2

You need to understand how the CSS specification works. You can rewrite any CSS rule to make it more specific than other rules.

For instance:

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

CSS

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

In this case, the first ad will overwrite the second because it is "more specific." Usually, you can simply go up to the tree one level and specify the wrapper element or the wrapping class to override the rule of the inner element. This is really a transfer of a large number of CMS systems, such as WordPress, where you do not have access to the main style sheet or just want to leave it alone and redo the parts you need.

Read the article, this is important.

CSS Specifics: Things You Should Know