2 • Add, style and link to pages on your site

Style your About page

Now that you have an About page with content about you, let’s style it!

Get ready to…

  • Style items on a single page
  • Use CSS variables

Style an individual page

Section titled Style an individual page

Using Astro’s own <style></style> tags, you can style items on your page. Adding attributes and directives to these tags gives you even more ways to style.

  1. Copy the following code and paste it into src/pages/about.astro:

    src/pages/about.astro
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head>

    Check all three pages in your browser preview.

    • Which color is the page title of:

      • Your Home page?
      • Your About page?
      • Your Blog page?

    • The page with the biggest title text is?

  2. Add the class name skill to the generated <li> elements on your About page, so we can style them. Your code should now look like this:

    src/pages/about.astro
    <p>My skills are:</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>

  3. Add the following code to your existing style tag:

    src/pages/about.astro
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>

  4. Visit your About page in your browser again, and verify, through visual inspection or dev tools, that each item in your list of skills is now green and bold.

Use your first CSS variable

Section titled Use your first CSS variable

The Astro <style> tag can also reference any variables from your frontmatter script using the define:vars={ {...} } directive. You can define variables within your code fence, then use them as CSS variables in your style tag.

  1. Define a skillColor variable by adding it to the frontmatter script of src/pages/about.astro like this:

    src/pages/about.astro
    ---
    const pageTitle = "About Me";
    

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Technical Writer",
      hobbies: ["photography", "birdwatching", "baseball"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
    

    const happy = true;
    const finished = false;
    const goal = 3;
    

    const skillColor = "navy";
    ---

  2. Update your existing <style> tag below to first define, then use this skillColor variable inside double curly braces.

    src/pages/about.astro
    <style define:vars={{skillColor}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>

  3. Check your About page in your browser preview. You should see that the skills are now navy blue, as set by the skillColor variable passed to the define:vars directive.

Try it yourself - Define CSS variables

Section titled Try it yourself - Define CSS variables

  1. Update the <style> tag on your About page so that it matches the one below.

    src/pages/about.astro
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>

  2. Add any missing variable definitions in your frontmatter script so that your new <style> tag successfully applies these styles to your list of skills:

    • The text color is navy blue
    • The text is bold
    • The list items are in all-caps (all uppercase letters)
✅ Show me the code! ✅
src/pages/about.astro
---
const pageTitle = "About Me";


const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Technical Writer",
  hobbies: ["photography", "birdwatching", "baseball"],
};


const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];


const happy = true;
const finished = false;
const goal = 3;


const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---

Checklist

Section titled Checklist

Resources

Section titled Resources