How can we disable default browser style properties for elements?

Problem

Having issue in design on forms and links on a page I created because of the browser style properties. How can I disable it so that no elements in my html page gets affected by the browsers' default style property?

All solutions are welcome. I am using php for development. So all solutions with css, javascript, php etc are welcomed.

Problem courtesy of: AeJey

Solution

You cannot disable browser default style sheets, just override them by setting properties to specific values. It is common to confuse the two.

This is a decision by browser vendors. They could give a page (scripts on a page) access to the browser’s stylesheet allowing it or parts thereof to be disabled. But they haven’t done that.

Solution courtesy of: Jukka K. Korpela

Discussion

You can maybe put !important behind the css you want to overwrite the default style properties?

maybe this solves your solution?

Discussion courtesy of: jordy korsten

There must be a default style for all elements, so you cannot just disable them. The usual way to handle this issue is adding your desired defaults in a base CSS file, overwriting the browser's defaults.

As @link commented, http://www.cssreset.com/ provides several default styles to be applied as base in your pages.

Discussion courtesy of: Pablo

Please use normalize css :

http://necolas.github.io/normalize.css/

It'll help you.

Discussion courtesy of: LogPi

You need to override browser's default stylesheet. You can do it many ways-

  • Manually define every elements style
  • Use any reset.css (You can find many)
  • Use a basic html startup tamplate, which covers everything you need. You can find one here, It has many options to choose from.

Hope you will love it :-)

Discussion courtesy of: abir_maiti

This recipe can be found in it's original form on Stack Over Flow.