Crucial Web Hosting

One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.

A lot of designers clear the styling with a global reset, but there's a problem with doing this. Form buttons and fieldsets are among the few elements that are completely destroyed with the global reset. They lose their native styling that goes beyond the browser. Instead, you should pick-and-choose the elements you want to reset. It also makes it easier to apply your own style to common elements.

Below is a basic master stylesheet, I removed some styling from elements to keep it simple, like colors, but once you give it your own touch, you'll have a stylesheet that will help with the majority of your CSS nightmares:

/***** Global Settings *****/

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}

/***** Headings *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}

h3 {
font-size:1em;
font-weight:bold;
}

/***** Common Formatting *****/

p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}

ul, ol {
padding:0 0 1.25em 2.5em;
}

blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

	form input,
	form select,
	form textarea {
	font:1em Arial, Helvetica, sans-serif;
	}
	
	form textarea {
	width:100%;
	line-height:1.25;
	}
	
	form label {
	cursor:pointer;
	}

/***** Tables *****/

table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}

	table tr td {
	padding:2px;
	}

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }

.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }

.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }

.wrap          { width:960px;margin:0 auto; }

.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }

.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }

You'll notice the global classes at the bottom, which cover basic styling, and will remove styling that we intially set. For example, the .nobullet and .noindent work great on an unordered or ordered list. You can add your own classes there that you use a lot.

Hope you all found this useful, click here to view the stylesheet.

Updates & Notes

Added styling for super and subscript.

This stylesheet was never meant to be a global reset, which should be avoided because of how it completely destroys form elements. Once the style is reset on, for example, a button, it cannot be brought back.

The whole point of a master stylesheet is so you don't have to use the global reset. You should develop your own template, or master, stylesheet as a base for all your projects.

I would also like to add that the above stylesheet takes some typographic rules into consideration, such as the spacing between heading tags, paragraphs, and blockquote elements.

Save. Share. Submit.

• Digg · 
• Twitter · 
• StumbleUpon · 
• Delicious · 
• Facebook · 
• Google · 
• Reddit · 
• Technorati

Related Articles

If you liked this article, be sure to check out the following:

• Master Layout: Give Your Stylesheet A Friend