Styling with CSS

In this section, we will learn how to implement CSS styling into our Gatsby project.

There are two different methods to adding global CSS styling to our Gatsby site – creating a wrapper component or using gatsby-browser.js.

Creating a wrapper component

The idea behind a wrapper component is to wrap our page components in another component that brings common styles to the page:

1. Create StyleWrapper.css in your components folder:

   html {
     background-color: #f9fafb;
     font-family: -apple-system, "Segoe UI", Roboto,
       Helvetica, Arial, sans-serif,
       "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI
       Symbol";
   }

   In the preceding code, we are defining a background color and a font family that all children of the HTML tag can inherit.

2. Let's now add some h1 styles to this file:

   h1 {
     color: #2563eb;
     size: 6rem;
     font-weight: 800;
   }

   Here, we are adding the color, size, and weight of the largest heading...