Why to have CSS Styles Reset?

Every browser has its own standards of presenting differently UI elements like if you check an input in different browsers it will look different in all browsers, like in screen shot below showing differences in Firefox, Chrome, Safari and IE. To overcome such browsers difference for UI elements it’s better to use a style reset.
input field comparison in different browsers
Let’s see how an input element looks in different browsers with no style applied on it.

<input type="text" />

Firefox

Dimensions:

width: 142px;
height: 22px;

Border:

border-top: #ACADB2;
border-left: #E3E3EB;
border-right: #DCDFE6;
border-bottom: #E2E9EF;

Corners:
Slightly rounded

Chrome

Dimensions:

width: 153px;
height: 22px;

Border:

border-top: #BABABA;
border-left: #BABABA;
border-right: #BABABA;
border-bottom: #BABABA;

Corners:
Square edges

IE

Dimensions:

width: 153px;
height: 21px;

Border:

border-top: #868686;
border-left: #868686;
border-right: #868686;
border-bottom: #868686;

Corners:
Square edges

Safari

Dimensions:

width: 147px;
height: 22px;

Border:

border-top: #AAADB2;
border-left: #E3E3EB;
border-right: #DCDFE6;
border-bottom: #E4E9EF;

Corners:
Slightly rounded

Just from statistics on input we know that no two browsers have similarity in styles. All of the browsers are showing it differently. So its better to have a CSS styles reset sheet.

How to Use CSS styles reset sheet?

Add it before your normal style.css file. So that first CSS style reset apply and then your normal styles sheet. Adding it after style sheet will cause override all your styles.

<link rel="stylesheet" type="text/css" href="reset-style.css">
<link rel="stylesheet" type="text/css" href="style.css">

why not to use CSS styles reset sheet?

The problem with using a CSS styles reset sheet is that everything will be reset. So, you need to specify custom styles for everything, or at least everything you’re going to be utilising within your site.

Style-reset.css

A have created a generic CSS styles reset sheet you can customize it with respect to your own need.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    background: rgba(0, 0, 0, 0);
    border: none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
input
{
	border: none;
}
ol, ul {
    list-style-image: none;
    list-style-type: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
:focus {
    outline: 0 none;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table, tbody, tfoot, thead, tr, th, td {
    border: 0 none;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
}
iframe[id^="oauth2relay"] {
    display: none;
}
  • Muhammad Siddique

    Great work, thanks Aamir

    • http://aamirshahzad.net/ Aamir Shahzad

      you are welcome… keep coming…

  • Smithc424

    Right now it looks like WordPress is the top blogging platform available right now. Is that what you’re using on your blog?

    • http://aamirshahzad.net/ Aamir Shahzad

      Yes WordPress <3

  • http://No Farhan Abbas

    Good work aamir!! keep it up :)

    • http://aamirshahzad.net/ Aamir Shahzad

      Thanks a million @Farhan :)

  • http://lets-code.tumblr.com Naveed Ahmed

    Do remembered this :) But i think you forgot to remove your custom add-in for iframe.
    Currently using Normalize (necolas.github.io/normalize.css/) for all projects; comman ground!. Surly love to see your post on Normalize.

    • http://aamirshahzad.net/ Aamir Shahzad

      Sure. Its great :)