Up and Running with Gatsby: Styling

Inline Styles Using JSX


To get started with styling in Gatsby, we'll use the same inline styling we'd use with JSX in React.

Styling with JSX basically amounts to using the style attribute and passing in an object with CSS properties. In the video, we add an object called headerStyles with { color: "purple"} to a div (style={headerStyles}) in Header.js.

Inline styling isn't really ideal, so let's learn about global styles in the next video.


I finished! On to the next chapter