Selectively style an element in a shared page layout

[bytrangle]

Hi. There is something about the "Build a Blog" tutorial that confuses me.

As of part 4 of the tutorial, H1 of the About page has its own styles:

h1 {
  color: purple;
  font-size: 4rem;
}

It is documented here.

However, on part 4, readers are expected to refactor common elements into a pay layout called BaseLayout.astro. h1 is removed to this BaseLayout component.

About page should now look like this.

H1 of About page no longer has purple text and font size 4rem because there is no h1 element in the About page.

It is not mentioned in the doc, but I assume that H1 styling should remain the same.

How do I style only h1 of the About page now? The only method I know is:

• give a class name to BaseLayout in the About page. Let's call it "about"
• in BaseLayout, destructure the class name and give it to h1.
• Back to the About page, apply the desired styling to h1 element with class name about

<style>
  h1.about {
    color: purple;
    font-size: 4rem;
  }
</style>