Skip to main content

CSS reset

These styles add some minimal element style resets. It's inspired by Josh Comeau's CSS reset.

These are almost always included in a project along with the base styles and the media queries.

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/reset.css';

Typically this is included above other styles.

See Import Cacao CSS for more information.

Source CSS​

Below is the full source for the reset styles.

reset.css
/* =========================================================================== *\
    CSS reset
    Inspired by https://www.joshwcomeau.com/css/custom-css-reset/
\* =========================================================================== */

/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
2. Remove default margin
*/
* {
    margin: 0;
}

/*
3. Improve text rendering
*/
body {
    -webkit-font-smoothing: antialiased;
}

/*
4. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/*
5. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
    font: inherit;
}

/*
6. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}