CSS Resets
Leveling the playing field in the battle between Web Wizards and cross browser styling
In CSS (Cascading Style Sheets), a reset is a set of styles that is applied to a webpage to reset the default styles of HTML elements to a consistent baseline. The purpose of a CSS reset is to ensure that the default styles of different elements are the same across different browsers, which can help to avoid cross-browser inconsistencies in the layout and appearance of a webpage.
A CSS reset typically consists of a set of styles that set common properties of HTML elements to their initial values, such as setting the margin, padding to zero.
To use a CSS reset, you can include it at the beginning of your stylesheet, before any other styles. This will ensure that the reset styles are applied first, and that your custom styles are applied on top of the reset styles.
It’s important to note that CSS resets are not always necessary, and in some cases, they can actually cause more problems than they solve. It’s generally a good idea to use a minimal set of reset styles that address only the most common cross-browser inconsistencies, rather than trying to reset all styles to their initial values.
Here is the typical CSS Reset that I include:
/* Make sizing easier to work with */
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Set color scheme preference for consistent styling */
html {
color-scheme: dark;
}
/* Size app to screen */
body {
min-height: 100vh;
}
/* Make media responsive */
img,
picture,
svg,
video {
display: block;
width: 100%;
}
/* Make fonts more consistent */
input,
textarea,
button,
select {
font-family: inherit;
}
