Gatsby JS Course: 12. Styling up the remaining pages

Welcome back to our Gatsby JS course! In the previous tutorials, we learned how to create a Gatsby site, set up routing, and style the home page. In this tutorial, we will focus on styling up the remaining pages of our site.

Step 1: Create the remaining pages

Before we start styling the remaining pages, let’s create them first. In your project directory, navigate to the ‘src/pages’ folder and create the necessary files. For this example, let’s create a ‘about.js’ and ‘contact.js’ file.

Inside each file, we need to import React and the necessary components from Gatsby. Then, we can create a functional component for each page. For example, let’s create the ‘About’ page:


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

const AboutPage = () => {
return (
<Layout>
<h1>About Us</h1>
<p>Welcome to our About page!</p>
</Layout>
)
}

export default AboutPage


Repeat the same steps for the ‘contact.js’ file, modifying the content as needed.

Step 2: Add styling to the remaining pages

Now that we have the remaining pages created, let’s add some styling to them. For this example, we will use CSS modules to style our components. In the ‘src/components’ folder, create a new file called ‘layout.module.css’.

Inside the ‘layout.module.css’ file, add the following CSS code:


.container {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}

h1 {
font-size: 2rem;
color: #333;
}

p {
margin-bottom: 1rem;
}


In each page component (‘about.js’ and ‘contact.js’), import the ‘layout.module.css’ file using import style from ‘./layout.module.css’. Then, apply the appropriate classes to the HTML elements.

For example, in the ‘about.js’ file:


import style from './layout.module.css'

const AboutPage = () => {
return (
<Layout>
<h1 className={style.title}>About Us</h1>
<p className={style.paragraph}>Welcome to our About page!</p>
</Layout>
)
}


Repeat the same steps for the ‘contact.js’ file.

Step 3: Test and refine the styling

After applying the styling to the remaining pages, it’s a good idea to test them in the browser and refine the styling as needed. You can make adjustments to the CSS code in the ‘layout.module.css’ file to achieve the desired look.

Remember to run the Gatsby development server using the ‘gatsby develop’ command to see the changes in real-time.

Congratulations! You have successfully styled up the remaining pages of your Gatsby site. In the next tutorial, we will explore more advanced styling techniques and learn how to customize the site further.