What it is: every browser applies its own default styles, like margins on headings or different font sizes in forms. A CSS reset removes those differences so your design looks the same everywhere. This is a small modern version for classic WordPress themes.

The reset

css">@layer lotgrafix-reset {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

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

    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
        height: auto;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    h1,
    h2,
    h3 {
        text-wrap: balance;
    }

    @media ( prefers-reduced-motion: reduce ) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

What each part does

• box-sizing: border-box: padding and borders are included in the width, which makes sizing predictable.
• margin: 0: removes default margins so you control all spacing.
• text-size-adjust: stops mobile browsers from resizing text on rotation.
• max-width: 100% on media: images and videos never overflow their container.
• font: inherit on form fields: inputs and buttons use the same font as the page.
• overflow-wrap: long words and URLs wrap instead of breaking the layout.
• The reduced motion block: respects users who disable animations in their system.

Why it is inside a layer

Styles inside @layer lose against any style outside a layer, so the reset never overrides your theme styles, no matter the specificity.

WordPress note

Block themes already include their own base styles. Use this reset for classic themes, and test the editor and the front end after adding it.