css-tricks.com Open in urlscan Pro
104.26.11.78 Public Scan

Back to summary

URL:
https://css-tricks.com/snippets/css/meyer-reset/
Submission: On October 28 via api (October 28th 2021, 9:01:11 am UTC) from SG — Scanned from DE

Form analysis
3 forms found in the DOM

POST https://css-tricks.com/wp-comments-post.php

<form action="https://css-tricks.com/wp-comments-post.php" method="post" id="commentform" class="comment-form">
  <p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p>
  <p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" placeholder="New Comment! Use `backticks` for code."></textarea></p>
  <div id="markdown_comment" class="comment-content markdown-comment-preview"></div>
  <div class="preview-buttons" id="preview-buttons"> <a href="#0" id="writeCommentButton" class="commentPreviewButton active">Write</a> <a href="#0" id="previewCommentButton" class="commentPreviewButton">Preview</a></div>
  <p></p>
  <p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required="required"></p>
  <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required"></p>
  <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200"></p>
  <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time
      I comment.</label></p>
  <input type="hidden" name="_mc4wp_subscribe_wp-comment-form" value="0">
  <p class=" mc4wp-checkbox mc4wp-checkbox-wp-comment-form"><label><input type="checkbox" name="_mc4wp_subscribe_wp-comment-form" value="1" checked="checked"><span>Get the CSS-Tricks newsletter</span></label></p>
  <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="3262" id="comment_post_ID">
    <input type="hidden" name="comment_parent" id="comment_parent" value="0">
  </p>
  <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="c558043cd5"></p>
  <p class="antispam-group antispam-group-q" style="clear: both; display: none;">
    <label>Copy and paste this code: <strong class="antspmpro-input-a">micuno</strong> <span class="required">*</span></label>
    <input type="hidden" name="antspmpro-a" class="antispam-control antispam-control-a" value="micuno">
    <input type="text" name="antspmpro-q-luwele" class="antispam-control antispam-control-q" value="4.1">
  </p>
  <p class="antispam-group antispam-group-e" style="display: none;">
    <label>Leave this field empty</label>
    <input type="text" name="antspmpro-e-email-url-website-luwele" class="antispam-control antispam-control-e" value="">
  </p>
  <p style="display: none !important;"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js" name="ak_js" value="1635411666585"></p>
</form>

POST https://chriscoyier.us2.list-manage.com/subscribe/post?u=155f5a9ccc4e24c318130cace&id=197f127a68

<form action="https://chriscoyier.us2.list-manage.com/subscribe/post?u=155f5a9ccc4e24c318130cace&amp;id=197f127a68" method="post" id="mc-embedded-subscribe-form">
  <h4>Keep up to date on web dev</h4>
  <p>with our hand-crafted weekly newsletter</p>
  <div class="footer-form">
    <label for="mce-EMAIL" class="screen-reader">Email Address</label>
    <input type="email" name="EMAIL" class="required email mailchimp-email-input" id="mce-EMAIL" placeholder="smart@cookie.com" required="">
    <input type="submit" value="Subscribe" name="Subscribe" id="mc-embedded-subscribe" class="button subscribe-button">
  </div>
</form>

<form autocomplete="off" role="search" class="jetpack-instant-search__search-results-search-form">
  <div class="jetpack-instant-search__search-form">
    <div class="jetpack-instant-search__box"><label class="jetpack-instant-search__box-label" for="jetpack-instant-search__box-input-1"><span class="screen-reader-text assistive-text">Site Search</span>
        <div class="jetpack-instant-search__box-gridicon"><svg class="gridicon gridicons-search " focusable="true" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" style="height: 24px; width: 24px;">
            <title>Search</title>
            <g>
              <path d="M21 19l-5.154-5.154C16.574 12.742 17 11.42 17 10c0-3.866-3.134-7-7-7s-7 3.134-7 7 3.134 7 7 7c1.42 0 2.742-.426 3.846-1.154L19 21l2-2zM5 10c0-2.757 2.243-5 5-5s5 2.243 5 5-2.243 5-5 5-5-2.243-5-5z"></path>
            </g>
          </svg></div><input autocomplete="off" id="jetpack-instant-search__box-input-1" class="search-field jetpack-instant-search__box-input" inputmode="search" placeholder="Search…" type="search"><button
          class="screen-reader-text assistive-text">Search</button>
      </label></div>
  </div>
</form>

Text Content

Skip to main content
CSS-Tricks
* Articles
* Videos
* Almanac
* Newsletter
* Guides
* Books

Search Account
Home / Code Snippets / CSS / Meyer Reset

MEYER RESET

Chris Coyier on Aug 6, 2009 (Updated on Aug 10, 2009)

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;}

Sponsored Take your JavaScript to the next level and find out what it's fully
capable of with the JavaScript path on Frontend Masters
Sponsored Create a theme for HubSpot’s marketplace and compete for awesome
prizes. Join the challenge.
Sponsored Grow sales with a smart marketing platform. Try Mailchimp today.
Sponsored Build more accessible websites. No experience required. Try the free
axe DevTools extension today.
Sponsored Shortcut is fast and intuitive project management built for
developers. Try it today for free!
Sponsored DigitalOcean App Platform, a fully managed PaaS solution to build
modern, cloud native apps. Try now with $100 credit.

Our Learning Partner
Frontend Masters

NEED FRONT-END DEVELOPMENT TRAINING?

Frontend Masters is the best place to get it. They have courses on all the most
important front-end technologies, from React to CSS, from Vue to D3, and beyond
with Node.js and Full Stack.

IntersectionObserver API Download 40+ practical, real world React examples of
IntersectionObserver API.

The Divi Theme Download the Ultimate WordPress Theme including our advanced Drag
& Drop builder

ads by BSA

NEED FRONT-END DEVELOPMENT TRAINING?

Frontend Masters is the best place to get it. They have courses on all the most
important front-end technologies, from React to CSS, from Vue to D3, and beyond
with Node.js and Full Stack.

COMMENTS

1. Dustin Hansen
Permalink to comment# September 8, 2009

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

Reply
* Nick
Permalink to comment# March 4, 2010

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. Chris Raymond
Permalink to comment# February 9, 2011

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.

Reply
3. Gastón Lasarte
Permalink to comment# March 15, 2011

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

Thanks for this! Very helpfull :)!

Reply
4. Joshua Brittin
Permalink to comment# April 12, 2012

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.

Reply
5. BJ
Permalink to comment# April 20, 2012

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

Reply
6. Cleaners London
Permalink to comment# December 18, 2012

“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.

css-tricks.com Open in urlscan Pro 104.26.11.78 Public Scan

Form analysis 3 forms found in the DOM

POST https://css-tricks.com/wp-comments-post.php

POST https://chriscoyier.us2.list-manage.com/subscribe/post?u=155f5a9ccc4e24c318130cace&id=197f127a68

Text Content

css-tricks.com Open in urlscan Pro
104.26.11.78 Public Scan

Form analysis
3 forms found in the DOM