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:

• Using Layout Components
• Standard, Global CSS Files
• Component-Scoped CSS Modules
• Enhancing with CSS-in-JS
• Working with Fonts & Typography
• CSS Libraries & Frameworks