CSS Reset

Planted: Dec 2021

Tended: May 2025

Status: mature

The purpose of a CSS reset is to:

▪ Remove default legacy styles: useful in the early days on the Internet but no longer required. For example, removing the gap below image elements.
▪ Define default styles: styles that will be most common on your website. For example, if the majority of text on the site is black, set that color here.

/reset.css

*, 
*::before, 
*::after {
  /* Use a more intuitive box-sizing model */
  box-sizing: border-box;
  /* https://www.youtube.com/watch?v=cH8VbLM1958 */
  min-width: 0;
  /* Remove all margins and padding */
  margin: 0;
  padding: 0;

}

/* Only show focus outline when the user is tabbing (not when clicking) */
/* Except for input and textarea */
*:focus:not(:is(input, textarea)) {
    outline: none;
}

*:focus-visible {
  outline: 1px solid blue;
}

html {
  /* Allow percentage-based heights */
  /* Setting width: 100% isn't required because it is a default for block-level elements (html and body are block level) */
  height: 100%;

    /* Sets font-size to 10px. 
  Percent units are used to ensure font will scale if user has a custom font-size browser setting (for ally).
  Using 10px as the base to make it easy to set font sizes in elements. Example: for 16px, use 1.6rem, for 32px, use 3.2rem, ...  */
  font-size: calc(100% / 16 * 10);
  line-height: 1.5;
  /* Prevent the browser from synthesizing missing typefaces */
  font-synthesis: none;
  font-smooth: always;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  /* Prevent mobile browsers increasing font-size */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;

  color: black;
}

body {
  height: 100%;

  /* Prevent the rubber band effect when the user scrolls to the top or bottom of the page (WebKit only) */
  overscroll-behavior: none;

  /* UI controls color (example: range input) */
  accent-color: black;

  /* Because overscroll-behavior: none only works on WebKit, a background color is set that will show when overscroll occurs  */
  background: white;
}

p {
  /* Prevents orphans (ensures the final line of text has at least two words). */
  text-wrap: pretty;
  /* Avoid text overflow */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  /* Stronger effect than 'pretty'. Attempts to make each line of text the same length */
  text-wrap: balance;
}

strong {
  overflow-wrap: break-word;
}

/* Remove unintuitive behaviour such as gaps around media elements.  */
img, picture, video, canvas, svg, iframe {
  display: block;
}

input,
textarea,
button,
button:disabled {
  font: inherit;
  color: inherit;
  border: none;
  border-radius: 0;
  background: none;
}

fieldset {
    border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}