What is CSS Reset?

CSS Reset is a set of CSS rules designed to establish consistent default styles for all HTML elements, overcoming differences in browsers' default styles. It helps ensure more predictable and cross-browser compatible rendering of web pages.

Main goals of CSS Reset:

• Removing or nullifying default margins, paddings, and borders.
• Resetting default font sizes and line heights for headings, paragraphs, etc.
• Uniform styling of lists (ul, ol).
• Resetting styles for tables, forms, images, and other elements.

Example of a basic CSS Reset:

/*
   CSS Reset: Resets default browser styles
   to ensure a uniform base appearance of elements.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Includes padding and border in total width/height of elements */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Font smoothing */
}

img, picture, video, canvas, svg {
  display: block; /* Removes default inline spacing under images */
  max-width: 100%; /* Ensures images do not overflow their container */
}

input, button, textarea, select {
  font: inherit; /* Inherits font from parent */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Breaks long words */
}

There are various CSS Reset options, such as Eric Meyer's Reset CSS or Normalize.css. Normalize.css, unlike a full reset, preserves useful default styles and only fixes styles that cause cross-browser issues. The choice depends on the project and developer preferences.