Grow your CSS skills. Land your dream job.

Last updated on:

Meyer Reset

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Source: Reset Reloaded

Condensed version:

html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}

Comments

  1. I’ve noticed a trend lately of designers resetting the :focus. What if anything do you do to restore behavior for accessibility-based browsers?

    • Permalink to comment#

      Even Eric mentioned it in the code above:

      /* remember to define focus styles! */

      If you dont want to reset the focus styles then remove or comment out that focus reset style.

      :)

  2. Line-height should be AT LEAST 1.25, better 1.5 or even 1.75, to help the eye make the jump to the next line in a block of text.

    This is my biggest gripe about Meyer’s reset. Line-height: 1 is just plain bad typography, and while, yes, one can change it in your own stylesheet, most folks just blindly use this and make their blog articles pretty darn unreadable.

  3. Another thing that I would have considered… where the anchor links display set to block…

    Thanks for this! Very helpfull :)!

  4. This is a css reset, designed to get all browsers rendering the same, therefore line-height should be set to 1. Also, setting the anchor links to display block would be a nightmare.

  5. BJ
    Permalink to comment#

    Can div be reset to display:block; like the elements of HTML5? Just curious wanting to know why not to do this.

  6. “Can div be reset to display:block; like the elements of HTML5? Just curious wanting to know why not to do this.” – Yeah I would like to know the same.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".