# CSS normalization The design system includes a set of global CSS rules that aim to normalize (remove the differences in) browser defaults. By making CSS normalization part of the design system, teams don't need to bring their own, and the design system CSS doesn't need to include extra defensive CSS to anticipate differences in normalization code across different products. Our global normalization rules do not completely reset element styles but instead set elements' base styles to sensible defaults, following current best practices. Our reset CSS is bundled with the rest of the design system's styles, so to use it all you need to do is [import the design system's CSS](/getting-started/for-developers/#including-the-css) using your preferred method. Even if you haven't imported one of our components, your application should visually align with the design system. Each browser has default styles that it applies to various HTML elements. Not all browsers have the same default styles (called user-agent styles), which means that websites without custom CSS will look different when viewed from different browsers. Even when creating custom CSS, web developers must take those different default styles into account and make sure they are overridden appropriately. This can be tedious and error-prone, so a common practice among developers is to either remove or normalize (remove the differences in) those user-agent styles with a collection of base CSS rules before applying any CSS that controls the look-and-feel of the site. ## Global defaults Our normalization rules include some globally-defined defaults that will impact the entire application once the CSS has been imported. These defaults include (but aren't limited to): - `box-sizing: border-box` is set on every element — including `*::before` and `*::after`. This ensures that the declared width of element is never exceeded due to padding or border. - While this was a common CSS reset that teams were already applying, this may produce unexpected results for some teams. If an element suddenly has different spacing around it, it may need to explicitly be set to `box-sizing: content-box` (browser default) to restore its former behavior. - The `` element has `scroll-behavior: smooth` set on `:focus-within`. This is a CSS-only solution that provides smooth anchor scrolling. - The `` element effectively replaces the `.ds-base` class, defining `font-family`, `font-size`, `line-height`, and `color`. - In addition, `` now sets `background-color` to a theme's specified background. - The `outline` is removed on elements with the [`tabindex="-1"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) declared. This removes focus rings for non-interactive elements, e.g., when activating a skip link will then send focus to a `
` or heading element. - For users who have [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) enabled, animations, transitions, and smooth scroll are removed on all elements - including `*::before` and `*::after` to respect their preferences. ## Typography ### Headings All heading elements will receive the font styles defined by their parent element using the `font: inherit` rule. [`font`](https://developer.mozilla.org/en-US/docs/Web/CSS/font) is a shorthand property that encompasses several font styles, but the key thing to note is a heading will now inherit the `font-family` and `font-size` of its parent or `` element. This rule ensures the semantics of a heading element are distinct from its appearance. If you need to style a heading, refer to our [headings](/foundation/typography/headings/) or [utility class](/utilities/overview/) documentation. ### Links Links behave as they previously did, with one exception—the `text-decoration-color` is now set to `currentColor`. This change was made under the assumption that all link underlines will have the same color as its text, regardless of that text's state. ## Lists The `
    ` and `