freeCodeCamp/guide/english/gatsbyjs/gatsbyjs-styling/index.md

title

title
Gatsby.js Styling

Gatsby.js Styling

There are so many ways to add styles to your website — and Gatsby supports almost every possible option, through official and community plugins.

NOTE: Gatsby doesn’t prescribe or dictate any single styling approach. Choose what works best for you!

Layout Components

For sections of your site that you want to share across multiple pages. Creating and using the component as shown below.

// src/components/layout.js

import React from "react"

export default ({ children }) => (
  <div style={{ margin: `0 auto`, maxWidth: 650, padding: `0 1rem` }}>
    {children}
  </div>
)

// src/pages/index.js

import React from "react"
import Layout from "../components/layout"

export default () => (
  <Layout>
    <h1>I’m in a layout!</h1>
  </Layout>
)

CSS Modules

CSS Modules are highly recommended for those new to building with Gatsby (and React in general). A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. They are very popular as they let you write CSS like normal but with a lot more safety. The tool automatically makes class and animation names unique so you don’t have to worry about selector name collisions.

Check (CSS Modules homepage here](https://github.com/css-modules/css-modules).

Typography.js

Typography.js is a JavaScript library that enables you to define and explore the typographic design of your website and define beautiful custom and pre-existing typographic themes. It limits the number of tedious changes you need to make to your website just to change the font.

Learn how to use Typography.js on your Gatsby site here.

Using CSS-in-JS

With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it easier to know how to edit a component’s CSS as there’s never any confusion about how and where CSS is being used.

Glamor

Check out walkthrough guide on setting up Glamor on your Gatsby site

Styled components

Check out walkthrough guide on setting up Styled Components on your Gatsby site

Creating global styles

In nearly every site, there will be some global styles, such as a reset or typography defaults. Check out the guide at official Gatsby docs for creating global styles.

PostCSS

PostCSS transforms extended syntaxes and features into modern, browser-friendly CSS. Checkout guide will show you how to get started with Gatsby and PostCSS.

More Information:

Check out the Gatsby.js official docs for styling at Gatsby Styling. For more information and learn more, visit: Gatsby.js official site