More 5 CSS Reset Techniques

Post Reply
User avatar
pagol
Insanely Distorted
Insanely Distorted
Posts: 3298
Joined: Sat Nov 03, 2007 8:41 pm
Full Name: Koba
Expertise: Jack of all, master of NONE
x 81

If your are experienced with CSS or have coded a website before, you have probably heard of CSS resets CSS resets are chunks of CSS code designed to make life easier on the coder/designer when coding the website. CSS resets are an extremely useful tool in making your site cross browser comptaible. Today, we will have a look at 6 popular CSS reset techniques.

1. Generic Reset

Code: Select all

* {
	padding: 0;
	margin: 0;
	border: 0;
	}
The above is the most commonly seen reset, which simply resets the margins, padding, and takes away any default borders (usually on images). A variation of this generic reset can be seen below:

Code: Select all

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	}
2. Chris Poteet’s Reset

Code: Select all

* {
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: none;
	padding: 0;
	margin: 0;
	}
body {
	padding: 5px;
	}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
	margin: 20px 0;
	}
li, dd, blockquote {
	margin-left: 40px;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
Be sure to carefully note some of the specific margins on the above reset and set them to your taste.

3. Yahoo’s CSS Reset

Code: Select all

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;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
fieldset,img {
	border: 0;
	}
address,caption,cite,code,dfn,em,strong,th,var {
	font-weight: normal;
	font-style: normal;
	}
ol,ul {
	list-style: none;
	}
caption,th {
	text-align: left;
	}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
	}
q:before,q:after {
	content:'';
	}
abbr,acronym { border: 0;
	}
And you thought Yahoo didnt do anything productive. I am actually a big fan of this reset and have used it in the past with nice results. I especially like the use of the :before and :after pseudo elements, if only IE would support them!


4. Condensed Meyers Reset

Code: Select all

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;
	}
fieldset, img {
	border: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol, ul {
	list-style: none;
	}
address, caption, cite, code, dfn, em, strong, th, var {
	font-weight: normal;
	font-style: normal;
	}
caption, th {
	text-align: left;
	}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
	}
q:before, q:after {
	content: '';
	}
abbr, acronym {
	border: 0;
	}
A condensed version of the larger Meyer Reset.


5. Tantek’s Reset

Code: Select all

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.                  */
/* http://creativecommons.org/licenses/by/2.0                     */
/* This style sheet is licensed under a Creative Commons License. */

:link, :visited {
	text-decoration: none;
	}
ul, ol {
	list-style: none;
	}
h1, h2, h3, h4, h5, h6, pre, code, p {
	font-size: 1em;
	}
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre,
form, body, html, p, blockquote, fieldset, input {
	padding: 0;
	margin: 0;
	}
a img, :link img, :visited img {
	border: none;
	}
address {
	font-style: normal;
	}


** KISS Principle **
User avatar
sweetafroza
Proud Member
Proud Member
Posts: 1979
Joined: Fri Jun 27, 2008 8:30 pm
Full Name: Luthfunnahar Hussain
Expertise: Web Design

Wow Vagne ... Thanks a lot.. :). egulo amar kaje lagbe
:)
webdesignertushar

mama thnx really amar kaze asbe ai gula..so ami r tomare weeet koia Froum a jhor tulte chai na...buija lou........lol
User avatar
studiomaqs
Posts: 153
Joined: Sat Oct 20, 2007 7:33 pm
Full Name: Mostaque Ahammed
Expertise: Web Design

Thanks.

They were rally helpful for me.
User avatar
chhagol
DD Addict
DD Addict
Posts: 899
Joined: Wed Dec 05, 2007 5:17 am
Full Name: Mamun Khandaker
x 2

Mama, ami eto beshi tag neutralize kori na. Amar style ta onekta Yahoo+Condensed Meyers er moto. Ami data redundancy komanor jonno only jei tag gulo ami use kori ba korbo only sheigulai ami neutralize kori... heh heh heh...
MAMUN KHANDAKER
Technical Lead
Monstarlab Bangladesh Ltd.
webdesignertushar

pagol mama "studiomaqs" mama kintu valo Markup jane.ami unar kazer upore alpo kisu kaz kore silam...unar markup ar style ta amar valo lagsee.......sobaire akta secret koia dei sorry "studiomaqs" mama...MAC mamare usa theika invite korsilo but amar MAC mama-r may be onoo plan asee akhon.. as per i know......so studiomaqs+Chhagol mama amra kintu "besesh kore ami" markup ar tips tricks live priject with perfect CSS type ar resource asha korbo......take care guyssss..........
Post Reply

Return to “CSS”