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>

[ArmandPhilippot]

Sorry for the delay... I assume you have resolved your issue by now. I guess the color is lost to keep a consistent styling across the different pages. And, in part 4, the font-size is now defined in the global stylesheet.

This is indeed a solution. Another one would be to add the following to the about.astro page:

<style>
  :global(h1) {
    color: purple;
  }
</style>

or even is:global on the <style> tag.

It seems the tutorial now mentions that https://docs.astro.build/en/tutorial/4-layouts/1/#try-it-yourself---use-your-layout-everywhere and the issue is solved.

I'm closing this, but if you think this is a mistake and that this discussion should remain open, please feel free to ping me, I'll take a second look at it.

Thank your for your contribution!