Initial CSS Settings - CSS Template Tutorial

Here are my initial css settings. They are heavily commented along the way. Using this css template to jump start my designs greatly reduces my intial workload. This css template was originaly introduced to me here and made available by John Beatrice. I have made quite a few changes to it along the way - for the better of course.

/* ----------------------------------------------------
Stylesheet for http://www.YourProject.com

Updated: 11/20/2012
Author: Eric Watson
Website: http://www.websitecodetutorials.com
------------------------------------------------------- 
: Site Colors : 
background ... #CCC;

: Table Of Contents :
Resets
Defaults
Typography
Forms
Layout
Links
Menus
Global Classes
Content
---------------------------------------------------- */

/* -------------------- Resets --------------------- */
body, form, fieldset, ol, ul, li, h1, h2, h3, h4, h5, h6, p {
margin:0;
padding:0;
}
img {
border:0; /* kills Gecko bug when img's are placed inside links */
vertical-align:bottom; /* set vertical align to bottom for IE */
}
/* ------------------- Defaults ------------------- */
html {
height:100%; 
overflow:auto; /* triggers 100% height in Opera 9.5 */
overflow-y:scroll; /* creates a horizontal scrollbar, for a more consistent look & feel */
}
body {
height:100%; /* helps make height 100% */
font:100%/1.5 Arial, Helvetica, sans-serif; /* 100% = 16px, 93.75% = 15px, 87.5% = 14px, 81.25% = 13px, 75% = 12px - font-size in % prevents IE's resize bug */
background:#FDFDFD;
color:#333;
}
/* ------------------ Typography ------------------- */
h1, h2, h3, h4, h5, h6, p {
margin:0 0 1em;
}
p, ul, ol {
font-size:1em;
}
ul {
margin:0 0 1em 25px;
list-style:none;
}
h1 {font-size:1.6em;}
h2 {font-size:1.5em;}
h3 {font-size:1.4em;}
h4 {font-size:1.3em;}
h5 {font-size:1.2em;}
h6 {font-size:1.1em;}
/* -------------------- Forms ---------------------- */
fieldset {
border:none;
}
form :focus {
outline:0; /* removes Safari's blue border */
}  
input, select, textarea {
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
}
label {
cursor:pointer;
vertical-align:middle;
}
input {
vertical-align:middle;
}
textarea { 
overflow:auto; /* removes scrollbar from IE when none is needed */
}	
/* -------------------- Layout --------------------- */
#wrap {
margin:0 auto; /* centers layout */
min-height:100%; /* height 100% in all modern browsers */
}
#head {
}
#nav {
}
#content {
}
#left {
float:left;
}
#foot {
clear:both;
}
/* ------------------- Links ---------------------- */
a {
text-decoration:underline;
color:#000;
outline:0; /* removes dotted border */
}
a:visited {
color:#999;
}
a:hover, a:focus, a:active {
text-decoration:none;
/* add-custom:outline-rule-here; */
}
/* --------------------- Menus -------------------- */
/* Main Menu */
#nav {
}
#nav li {
}
#nav a {
text-decoration:none;
}
#nav a:hover, #nav a:focus, #nav a:active {
}
/* Foot Menu */
#foot ul {
}
#foot li {
}
#foot a {
text-decoration:none;
}
#foot a:hover, #foot a:focus, #foot a:active {
}
/* ---------------- Global Classes --------------- */
.clear {
clear:both;
line-height:0;
height:0;
font-size:0;
}
.clearfix:after {
content:" "; 
display:block; 
height:0;
font-size:0; 
clear:both; 
visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide */
/* ------------------- Content ------------------- */

ADVERTISE HERE