How to reset CSS

how to reset css

CSS reset is required due to browsers’ inconsistency. In detail all browsers rendering are not the same. Therefore web rendering could be different from browser to browser.

Why we need to do CSS reset

As an example we can defined browser rendering HTML elements as Headings, Lists, Paragraphs, etc. Also we are using CSS properties as margins, line heights, font sizes, etc. All of these elements value can be different from browser to browser. It’s because of browser rendering inconsistency. Therefore we need to bring all browsers into the same level and all should be equal. For that we need to reset CSS.

How to reset browser styles?

Meyer Web providing the utmost reset CSS code for us to reset browser specific CSS. I am a bigger fan of Meyers’ web from a decade ago. You can follow the link to get the code. Put the code in the top of the CSS(stylesheet). If you’re writing internal CSS, in that case you need to put this before the styling starts within the header.

Citation: meyerweb.com

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

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

Either you can go the meyers’ web and grab the code from there. Even there is a CSS file to use. Please check this.

How Bootstrap reset the browser styles

In their configuration they have done the this initially. Therefore we are not required to do it again. Because the reset is already implemented.

Thanks for reading. Hope you enjoyed the tutorial and clear with that. Happy learning ahead. Keep reading.

Recommended: Please follow our step by step guide how to create a WordPress Theme from scratch. You’ll be able to create your own theme at the end of these lessons.

You may also like...

Leave a Reply

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