CSS Reset

Web Design Tips: Using CSS Reset 

This tutorial will discuss about Web Design Tips. It has become common knowledge that if each Internet browser has its own innate style, as for example the default margin or padding by default in Internet Explorer that have different values with Mozilla Firefox or Chrome, another example, the default unordered list of Internet Explorer has a different style with the style on Firefox.

 

So a web designer is often bothered by this problem, normally a web designer using javascript to detect what the user through a browser, then if the user uses the internet browser then javascript match the style with a file containing a special style for Internet Explorer, as well as Mozilla Firefox and other browsers , style file is also different. It's really inconvenient because we have to create different styles for different browsers. But the result is very good.

Many web developer do not like this, they think it is inconvenient. But lately the use of CSS Resetter increasingly popular use, because its function is as good as using a file the file that contains a different style to adjust to the browser. In a style matching technique, when the user uses the Internet Explorer then the style used was usually called by ie.css, if the user uses the style used Firefox then usually called default.css, and so forth. In the css reset technique, we simply use only one css file, but add to the line of code that can reset the css, so the browser does not have a default value of style-style. Alias 0 (null).
 

Here is a css reset that I normally use:

/* RESET */
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, table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
 height: auto;
 border-top-width: 0;
 border-bottom-width: 0;
 border-left-width: 0;
}
blockquote:before, blockquote:after,q:before, q:after {content: ”;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
ol, ul {list-style: none;}
body {background-color: white;background-position: center center;}
/* RESET */

Actually there is some reset technique used, but using css reset above is very efficient. You are no longer bothered by the difference between Internet Explorer layout view with Mozilla Firefox or another. So the results will display the css in Firefox also similar to the display using another Internet Explorer browser.