CSS Reset Default Styles for All Browsers

arp14 CSS, Tutorial Tags: , , , 0

CSS Global ResetHello guys. This is very important to make the style of your website static in any way to make it look same in different browsers to make your website more user friendly. In this post we are going to learn how to Reset Default CSS for all browsers to get same visual equality in all browsers. Every browser has it’s own default style. Each browser has different padding, margin, line height, font size, font family, etc. from other browsers. So, we will use the most popular and widely used CSS reset by  Eric Meyer (http://meyerweb.com/).

Eric Meyer’s “CSS Reset” 2.0

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
    http://w3epic.com/
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

You can use other CSS reset too, here you will get more – http://www.cssreset.com

Having trouble with CSS reset? Please comment, I’ll be back to you 🙂

Leave a Reply

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