CSS Reset – Reset Styles to Reduce Browser Inconsistencies

CSS Reset

The CSS reset is an incredibly useful CSS script that to a great extent eliminates many of the browser inconsistencies we come across when we jump into our text editors and start building websites.

For example by default adding certain HTML elements in Chrome applies:

padding: 2px 6px 3px;

Where as Firefox applies:

padding: 0 8px;

The reset would override these browser styles so that all browsers are consistent with new default padding.

Place the following at the very top of your stylesheet before you style anything. This code will give you a cleaner baseline to develop upon.

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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
vertical-align: baseline;
}
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}

Notes: Adapted from Meyerweb.com

A focus should be defined for web accessibility, for example:

:focus {outline:1px dotted #ccc}

CSS Reset 2020 Update

The above CSS was from 2011, here’s an updated version to incorporate more modern html elements such as canvas.

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

These days, ‘style resets’ often appear by default in modern CSS frameworks such as Blueprint.

Other Options

There is an alternative to the reset called Normalize CSS. The main difference between the two is that Normalize CSS aims to make built-in browser styling consistent across browsers and resets aim to remove all built-in browser styling.

Normalize CSS is used by major sites like Github, GOV.UK and Twitter and is a dependency in huge open source projects like HTML5 and Bootstrap.

You may also like...

Leave a Reply

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