Killer CSS Reset & Global Style Sheet

Killer Reset & Global CSS V1.0

We developed a reset and global css file that is sooo killer we decided to call it, “Killer CSS Reset”.  Not the most original title but it will eliminates inconsistently applied browser styling for many key(X)HTML elements.

Plus we added some global style we like to use in designs that help us out as we go…  We will update this periodically so check back.

Without further ado,


/*
  Title: Killer CSS Reset
  Author Name: Travis Holt
  Author Co: The Gorilla Ad Agency
  Author URI: 

*/

html, body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td  {
  padding: 0;
  margin: 0;
}

body{
  color: #111;
  font: 14px Arial, Verdana, Helvetica;
  line-height:1.95em;
}

a, a:visited{text-decoration:none; color:blue; border-bottom:1px dotted blue;}
a:hover, a:active{text-decoration:none; color:black; border-bottom:none;}

h1{font-size:30px; color:black; font-weight:bold;}
h2{font-size:26px; color:black; font-weight:bold;}
h3{font-size:22px; color:black; font-weight:bold;}
h4{font-size:18px; color:black; font-weight:bold;}
h5{font-size:14px; color:black; font-weight:bold;}
h6{font-size:10px; color:black; font-weight:normal;}

.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-red{color:red;}
.text-blue{color:blue;}
.text-green{color:green;}
.text-orange{color:orange;}
.text-purple{color:purple;}
.small{font-size:60%;}
.big{font-size:150%;}
.fat{font-weight:bold;}

.clear{clear:both;}
.clearfix{clear:both; line-height:0; height:0; margin:0; padding:0;}

.hr{height:1px; border-bottom:1px solid #232323; background:#e2e2e2;}

a img, :link img, :visited img {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img, abbr {
  border: 0;
}

q:before,q:after {
  content:'';
}

pre {
	font-size: 12px;
	padding: 0;
	margin: 0;
	background: #f0f0f0;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	line-height: 20px; /*--Height of each line of code--*/
	background: url(pre_code_bg.gif) repeat-y left top; /*--Background of lined paper--*/
	width: 500px;
	overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
	overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}
pre code {
	margin: 0 0 0 20px;  /*--Left Margin--*/
	padding: 18px 0;
	display: block;
}

Or you can download the css file here…

This entry was posted by Sunday, 23 January, 2011