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: