CSS RESET

What is css reset ?

CSS Reset is nothing but a set of user defined css rules which over-rides the default rules of the web browsers.

Why we need?

There are number of web browsers and they render the elements differently. Default view of the document is different. You might have seen some elements like select buttons, input elements, tables behave differently in IE, Chrome and Mozilla. So our design will be different in these browsers. In addition to this we have different new HTML5 element which still not supported to all browsers and they may not give desired result while using them.

In order to make standard and unique view of the document we define a set of new rules for all browsers.

How to reset css ?

We need to define new css rules for all the elements. Such as margin values, padding values, border, font properties, colors, list properties, etc.

Body has a default margin so it make some gapping between the window and the document. For that we need to reset that.

body{ margin: 0; }

We have some HTML5 block elements like header, footer, section, article, aside etc. They need to be behave like block elements in all browsers.

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}

<template></template> Template tag is meant to keep the content which should not be rendered in the page. While IE does not support this feature. So we have to make it hidden by custom css. Any element with hidden attribute should be hidden also.

[hidden], template{ display: none;}

Bold and Strong tag should be bold by default.

b, strong{ font-weight: bold; }

Table cells have default spacing. That will not look good in all situations. So this need to be standardized.

table {
border-collapse: collapse;
border-spacing: 0;
}

td, th { padding: 0; }

And many more ……..

Here is an example how CSS reset is useful.

With and Without CSS

Problems

CSS Reset may not be useful always. Sometimes the requirement may be different. Suppose you have applied the css reset for your application but for some part you need the default styles. Then you have to re-write the default properties on your own and this will be a rework. Let consider the example below.

Here the default properties are overridden by the css reset but actually we need them. In this situation it will be a headache for the developer. So its always a good idea to be cleared about the requirement before applying the reset.