# Normalization

Normalize CSS styles across browsers.

Every rule below is read from the reset Yumma CSS ships, so this page cannot fall out of step with what your project actually gets.

## Box Sizing

Apply a modern box model and remove browser defaults to simplify layout consistency.

```css
*, :before, :after {
  box-sizing: border-box;
  border: 0 solid;
}

* {
  margin: 0;
  padding: 0;
}
```

## Document

Set a default system font, improve rendering, & apply accessible line-height.

```css
html {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

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

## Media Elements

Ensure images & videos behave predictably in all layouts.

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

## Form Elements

Normalize form controls for visual consistency & accessibility.

```css
button, input, optgroup, select, textarea {
  background-color: transparent;
  padding: .5rem;
  font: inherit;
}
```

Add a default border to form elements that do not have a class attribute.

```css
button:not([class]), input:not([class]), optgroup:not([class]), select:not([class]), textarea:not([class]) {
  border: 1px solid #bfc2c7;
}
```

Apply consistent focus styles to interactive elements.

```css
:is(a, button, input, select, summary, textarea):focus {
  outline: 2px solid transparent;
}
```

Set a minimum height for textareas without a defined `rows` attribute.

```css
textarea:not([rows]) {
  min-height: 10em;
}
```

Ensure the buttons have a pointer cursor.

```css
button {
  cursor: pointer;
}
```

Disabled states.

```css
button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: .5;
}
```

## Typography

Improve rendering, wrapping, & default font behavior.

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

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-size: 1rem;
  font-weight: 600;
}

p {
  text-wrap: pretty;
}
```

Chrome, Edge, & Safari bold weight correction:

```css
b, strong {
  font-weight: 700;
}
```

Default font size across browsers:

```css
small {
  font-size: 80%;
  line-height: 1.4;
}
```

Monospace elements keep the browser's own font stack at the surrounding size:

```css
pre, code, kbd, samp {
  font-family: monospace;
  font-size: 1em;
}
```

Links inherit their color and carry no underline, so a class decides both:

```css
a {
  color: inherit;
  text-decoration: none;
}
```

## Lists

Remove default list styles for clean, customizable lists.

```css
ol, ul {
  padding: 0;
  list-style: none;
}
```

## Tables

Standardize table header styling for better readability.

```css
th {
  font-size: 1rem;
  font-weight: 600;
}
```

## Miscellaneous

Fix minor browser quirks and improve default styles for common elements.

```css
hr {
  border-top: 1px solid #bfc2c7;
  height: 0;
  margin: 1em 0;
}
```

Ensure details and summary elements display correctly.

```css
details {
  display: block;
}

summary {
  display: list-item;
}
```

### Disable Base Styles

Base styles are enabled by default to disable it set `normalize` to `false` in `yumma.config.mjs`.

```mjs title="yumma.config.mjs" mark={4}
import { defineConfig } from "yummacss";

export default defineConfig({
  normalize: false,
});
```