HTML & CSS: Default Browser Styles

In your web development journey so far, you may have noticed that browsers actually put default styling on some elements. This is both useful and annoying in different situations. Let's say for example you created a basic webpage that looked something like the following (which you should be able to do by this point, if you can't, look back at some past tutorials):

<!DOCTYPE html>

<html>
<head>
	<title>Untitled</title>
</head>
<body>
	<div id="container">
		<ul id="nav">
			<li>Home</li>
			<li>About</li>
			<li>Portfolio</li>
			<li>Contact</li>
		</ul>

		<div id="mainContent">
			<h1>Main Content!</h1>
		</div>
	</div>
</body>
</html>

In the above snippet with no associated CSS stylings, most browsers will give the unordered list a default list-style-type, make the h1 bigger and bolder than other text on the page, and will also apply some margins in different places (most noticeably on the h1). This is all well and good for the most part, however in some cases it can cause some unintended behaviour, and this isn't helped along by the fact that different browsers have different default stylings (one might create a margin of 10px on a h1 while another uses 15px).

As web developers/designers we have to appreciate that we're not going to get a pixel-perfect design out there on the web, however we do need to resolve possible issues that could be caused by default styling. The usual solution to this is simply to test as you develop, and if anything seems wrong then you can correct it during the process -- let's say a heading wasn't positioned where you thought you told it to for example, it may be a good idea to set margin: 0; to see if the default margin was tampering with your positioning, and if this was causing the problem then you can tweak the margin from there.

Some people, however, go all out and completely reset any default styles that the browser might have so they have complete control, this is usually accomplished using something called a "Reset Stylesheet". The most popular reset stylesheet is the Meyer reset stylesheet which can be seen at meyerweb.com, or in the code snippet below:

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

I do not, however, recommend that you go ahead and just link this stylesheet into your projects (or better than this in most cases, add it in to your current stylesheet to avoid another HTTP request which will slow down your load times). If you're going to use this technique at all (which incidentally I no longer recommend, even though it still is the best fit for some projects), you should tweak the reset to your project's needs and set some of the defaults to what your project requires rather than completely nullify everything.

A solution which I much prefer to a regular "reset stylesheet" is to use a "normalize" stylesheet. Instead of going through elements like a bull in a china shop and resetting all the styling, a "normalize" stylesheet instead just sets consistent and sensible defaults, so instead of dealing with a whole bunch of default styles from different browsers, you have a clean and sensible default slate to work from. This technique is used across the board in many big websites and projects, and it is what I, at current, recommend for projects.

Normalize.css, created by Nicolas Gallagher, is the most popular stylesheet of this type at the moment and can be found on GitHub here. Once again, you may wish to tweak these styles to your project's needs, however I usually find that all the sensible defaults in there suit my projects fine.