Styling in Gatsby
This chapter is all about styling your Gatsby site, but what does styling refer to? While our React code is defining the structure of our web documents, we will use styling to define our documents' look and feel through page layouts, colors, and fonts. There is an abundance of tools you can use to style any Gatsby project. In this book, I will introduce you to four different approaches – vanilla CSS, Sass, Tailwind.css, and CSS in JS. Let's explore each of these in a little more detail before deciding which to use.
Vanilla CSS
When your browser navigates to a site, it loads the site's HTML. It converts this HTML into a Document Object Model (DOM). After this, the browser will begin to fetch resources referenced in the HTML. This includes images, videos, and, more importantly right now, CSS. The browser reads through the CSS and sorts selectors by element, class, and identifiers. It then goes through the DOM and uses the selectors to attach...