Global Styles

Inline styles can get really messy really quickly and tends to lead to repeating CSS code. One alternative to this is global styles. There are two ways to use global styles in Gatsby; we'll cover the first one here.

Create a header.css file in src/components and add a header-container style:

.header-container {
    color: purple;
}

Then, back in Header.js, import this CSS file at the top of the file:

import  "./header.css"

Delete the headerStyle object we made in the last video and replace style with className in the div. The className will be header-container that we just created.

When you refresh the page, you should still see the purple text. Feel free to change the color to make sure everything is working.

Let's look at the other way to use global styles in the next video.