A common technique to reset a style sheet is to override all of the default styles that browsers provide before you begin styling a site. This way, you won’t accidentally assume—for instance—that all <h1> tags are the same font and font size between browsers. The default <h1> is different in Internet Explorer, Firefox, Safari… it’s so annoying! To get around this frustration, designers often employ a “reset CSS” file.

On the right, we’ve provided a Sass version of the most famous reset CSS file by Eric Meyer. It’s slightly shorter than the original CSS version.

You probably don’t want to add all that boilerplate to the top of your master style sheet, so it’s often more useful to employ the importing technique. Put the reset file into a separate style sheet named something like _reset.scss. Then at the start of the style sheet, put the following: @import "reset"; and the reset is magically incorporated into the CSS file when it’s compiled.

• Reset CSS.

  basics/reset.scss
  ​	​/*​
  ​	​ Sass Reset - Converted by Hampton Catlin​
  ​	​ A modification of the original found at...​
  ​	​ http://meyerweb.com/eric/tools/css/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​, ​img​, ​ins​, ​kbd​, ​q​, ​s​, ​samp​, ​small​,
  ​	​strike​, ​strong​, ​sub​, ​sup​, ​tt​, ​var​, ​b​, ​u​, ​i​, ​center​, ​dl​, ​dt​, ​dd​,
  ​	​ol​, ​ul​, ​li​, ​fieldset​, ​form​, ​label​, ​legend​, ​table​, ​caption​,
  ​	​tbody​, ​tfoot​, ​thead​, ​tr​, ​th​, ​td​, ​article​, ​aside​, ​canvas​,
  ​	​details​, ​embed​, ​figure​, ​figcaption​, ​footer​, ​header​, ​hgroup​,
  ​	​menu​, ​nav​, ​output​, ​ruby​, ​section​, ​summary​, ​time​, ​mark​, ​audio​,
  ​	​video​ {
  ​	margin: 0;
  ​	padding: 0;
  ​	border: 0;
  ​	font-size: 100%;
  ​	font: inherit;
  ​	vertical-align: baseline; }
  ​	​/* HTML5 display-role reset for older browsers */​
  ​	​article​, ​aside​, ​details​, ​figcaption​, ​figure​, ​footer​,
  ​	​header​, ​hgroup​, ​menu​, ​nav​, ​section​ {
  ​	display: block; }
  ​	​body​ {
  ​	line-height: 1; }
  ​	​ol​, ​ul​ {
  ​	list-style: none; }
  ​	​blockquote​, ​q​ {
  ​	quotes: none; }
  ​	​blockquote​ {
  ​	&:before, &:after {
  ​	content: ​''​;
  ​	content: none; } }
  ​	​q​ {
  ​	&:before, &:after {
  ​	content: ​''​;
  ​	content: none; } }
  ​	​table​ {
  ​	border-collapse: collapse;
  ​	border-spacing: 0; }

Related Tasks

• Task 12, ​Importing​

• Task 26, ​Resetting: Much Easier with Compass​