Using gatsby-browser.js
If you want the same styles applied to every page, you might feel that importing
StyleWrapper on all page instances doesn’t feel like you’re following Don’t Repeat
Yourself (DRY) principles. In cases where you are absolutely sure the styles are needed
on every page, we can add them to our application using the Gatsby browser instead:

1. Create a styles folder inside your src directory. As these styles are being
   used globally and are not tied to a specific component, it does not make sense
   to store them in the component directory, as we did when implementing
   StyleWrapper.js

2. Create a global.css file in your styles folder and add the following:
   html {
   background-color: #f9fafb;
   font-family: -apple-system, “Segoe UI”, Roboto,
   Helvetica, Arial, sans-serif,
   “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI
   Symbol”;
   }
   h1 {
   color: #2563eb;
   size: 6rem;
   font-weight: 800;
   }
   p {
   color: #333333;
   }

a {
color: #059669;
text-decoration: underline;
}

Here, we are adding the exact same styles that we had in the alternate CSS
implementation, so I won’t explain them again here. The key difference is in this
next step.

3. Navigate to gatsby-browser.js and add the following:
   import “./src/styles/global.css”
   By importing our CSS in gatsby-browser.js, Gatsby will wrap every page with
   this CSS.