Styling components with CSS

In this section, we're going to style the body, app container, and header container with regular CSS and understand the drawbacks of this approach.

Styling the document body

We are going to use the traditional approach to style the document's body. Follow these steps to do so:

1. Open index.tsx. Remember that index.tsx is the root of the React component tree. Notice how the CSS file is referenced:

   import './index.css';

   To reference a CSS file in a React component, we specify the location of the file after the import statement. index.css is in the same folder as index.tsx, so the import path is ./.

2. Open index.css. Notice that we already have CSS in place for the body tag. Let's remove everything apart from margin and add a background color:

   body {
     margin: 0;
     background-color: #f7f8fa;
   }

3. Let's also remove the redundant code CSS class in index.css.

   Congratulations, we have just applied some...