Modern CSS Resets
What is a CSS Reset? #
A CSS reset typically clears out default styling applied by browsers to elements like headings
, paragraphs
, lists
, etc., ensuring a consistent starting point for styling. It usually sets margins
, paddings
, and other properties to zero or specific values to minimize differences between browsers.
Reset Styles #
:where(*, *::before, *::after) {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0 solid #e2e8f0;
transition: all 0.18s ease-out;
}
:where(html) {
color-scheme: dark light;
-webkit-text-size-adjust: none;
}
:where([hidden]) {
display: none !important;
}
@media (prefers-reduced-motion: no-preference) {
:where(html:focus-within) {
scroll-behavior: smooth;
}
}
:where(body) {
min-height: 100vh;
min-height: 100dvh;
line-height: 1.5;
font-family: system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeSpeed;
}
:where(input, button, textarea, select) {
font: inherit;
color: inherit;
}
:where(textarea) {
resize: vertical;
}
:where(label:has(> input:disabled), label:has(+ input:disabled)) {
cursor: not-allowed;
}
:where(button) {
border-style: solid;
}
:where(a) {
text-underline-offset: 0.2ex;
}
:where(ul, ol) {
list-style: none;
}
:where(img, svg, video, canvas, audio, iframe, embed, object) {
display: block;
height: auto;
width: auto;
}
:where(img, picture, svg) {
max-width: 100%;
max-height: 100%;
}
:where(p, h1, h2, h3, h4, h5, h6) {
overflow-wrap: break-word;
}
:where(h1, h2, h3) {
line-height: calc(1em + 0.5rem);
}
:where(hr) {
border-width: 1px 0 0 0;
color: inherit;
height: 0;
overflow: visible;
}
:where(:focus-visible) {
outline: 2px dashed var(--focus-color, Highlight);
outline-offset: 2px;
}
:where(.visually-hidden:not(:where(:focus, :active, .not-visually-hidden))) {
clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
overflow: hidden !important;
position: absolute !important;
white-space: nowrap !important;
border: 0 !important;
}
Print Media Reset Styles #
@media print {
*,
*::before,
*::after {
text-shadow: none !important;
box-shadow: none !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
@page {
max-height: 100%;
max-width: 100%;
}
body {
margin: 0 !important;
padding: 0 !important;
}
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
li {
font-family: "Gotham Book", Arial, Sans-Serif, Arial, Sans-Serif !important;
font-size: 12pt !important;
font-weight: normal !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold !important;
margin-bottom: 0.5em !important;
}
h1 {
font-size: 24pt !important;
}
h2 {
font-size: 18pt !important;
}
h3 {
font-size: 14pt !important;
}
a {
text-decoration: none !important;
&:any-link {
&::before,
&::after {
content: none !important;
}
}
}
img {
width: 100%;
height: 100%;
display: block;
}
header,
footer,
nav,
aside,
form,
iframe,
script {
display: none !important;
}
table,
tr,
div * {
page-break-before: avoid !important;
page-break-after: avoid !important;
}
}
Importing the print reset
/* Note If we are importing like this then we can remove the @media print from the reset */
@import url("your-file.scss") print;
/* Or we can directly use this with @media print*/
@import url("your-file.scss");
Some more additions resources :