CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts.
The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts.
Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using 
the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small 
subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn 
how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we 
will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, 
CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework 
development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course will 
teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog 
posts that teach each layout property in isolation, our product teaches practical layout patterns that you can use every day when solving your 
layout challenges.

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives.
Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Composing Layouts in React

---
title: How to Add a CSS Reset to Remove Default Browser Style
slug: css-reset
description: In this lesson you will learn how to reset the default browser styles so that they follow Encapsulated CSS.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/93xtl5noc0
useMdx: true
---

The styles that we write are not the first styles that get applied to our app. Before a single line of our CSS is used, the browsers will apply their user-agent style sheets. Unfortunately, there is no rule that requires any of the browsers to use the same style sheet for their user-agent. For this reason, CSS Resets have been a valuable tool to help developers provide consistent styling on the web.

## What is a CSS Reset?

A CSS Reset is nothing more than a style sheet you bring in before the rest of your app's styles, either as a separate style sheet or tagged onto the beginning of your style sheet. This style sheet's goal is simply to provide a base from which you can consistently apply CSS across browsers. Some resets are aggressive and remove all styles from all elements. Others try to "normalize" all the user-agent style sheets of the various browsers.

Luckily, there is currently less inconsistency across the browsers than would justify aggressive resets. Still, from a layout perspective, there is a need to override the browser default styles to make compositional layout possible. It makes sense to look at what you need to reset in the browser's user-agent style sheets to achieve this goal.

## How to reset for composable layouts

In this lesson, we will only be going over layout-specific Resets, but if you would like to look at the complete Reset that I use, you can check out the entire CSS Reset at [Bedrock Layout Primitives](https://github.com/Bedrock-Layouts/Bedrock/blob/master/packages/css-reset/src/reset.css).

The first thing to set is the `box-sizing` property on all elements and pseudo elements to `border-box`:

```css { actualFilename=./protected/encapsulated-reset.css endLine=5 startLine=1 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_02/lesson_02.05/protected/encapsulated-reset.css }
*,
*::before,
*::after {
  box-sizing: border-box;
}
```

Setting the `box-sizing` property to `border-box` on all elements and pseudo-elements allows for a more intuitive developer experience since the size of the element will be calculated from border to border instead of the default, which is content + padding + border.

After that, we remove any margins from all the elements.

In this lesson you will learn how to reset the default browser styles so that they follow Encapsulated CSS.