CSS Reset Test

You are here: Home » CSS reset » CSS Reset Test 

Browser:

  • Windows IE9 version: 9.0.8112.16421
  • Google Chrome version: 23.0.1271.97
  • Mozilla Firefox version: 17.0.1
  • Opera version: 12.12

HTML code used:

<h1>Heading</h1>
This is link
<br />
<span> this is span </span>
<br />
<code> this is code </code>
<br />
<blockquote>this is blockquote</blockquote>

Custom CSS Reset used:

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
font-family:Arial, Helvetica, sans-serif;
color:#000;
line-height:20px
}

body {
padding: 5px;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}

li, dd, blockquote {
margin-left: 40px;
}

h1 {
	font-size:22px;
	font-weight:bold;
}
code {
	letter-spacing:5px;
	color:gray
}
a {
	color:blue
}

Result:

In any browser default font color is black (#000), but not in the case of IE9. By default here text color is set to #565656.

Also the link color in Chrome, Mozilla and Opera is blue one whereas IE9 uses the same color for link as font color.

As you can see in the example, every browser has different padding, margin and letter spacing set by default. Use of CSS reset enables to generate the same appearance in all browsers (showed in the second part of the example).