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;
}

4 thoughts on “CSS Styles Reset Sheet Why and Why not to use?

  • June 25, 2014 at 9:56 am
    Permalink

    Great work, thanks Aamir

    Reply
  • June 30, 2014 at 6:10 pm
    Permalink

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>