Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

Styling

There are many ways to style your website. They can roughly be grouped into three styling approaches:

  • Global CSS Files: the traditional way to style a website. CSS rules are declared globally and styles are applied depending on specificity and inheritance.
  • Modular Stylesheets: CSS rules are written traditionally but consumed with JavaScript and scoped locally to avoid unintended side effects elsewhere. Works out-of-the-box with Gatsby.
  • CSS-in-JS: locally-scoped CSS written and consumed in JavaScript, enabling the easier use of dynamic styling and other features. Requires the use of third-party libraries.

Gatsby doesn’t have an opinion about which styling approach you choose. Almost every possible option is supported through official and community plugins. (If there isn’t a plugin yet for your favorite option, consider contributing one!)

In this section:

Start building today on Netlify!
Edit this page on GitHub
© 2023 Gatsby, Inc.