Style your About page

本頁內容尚未翻譯。

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

Get ready to…

Style items on a single page
Use CSS variables

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.

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? black
  - Your About page? purple
  - Your Blog page? black
- The page with the biggest title text is? Your About page
If you are unable to determine colors visually, you can use the dev tools in your browser to inspect the <h1> title elements and verify the text color applied.
Add the class name skill to the generated <li> elements on your About page, so you 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>
```

Add the following code to your existing style tag:

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

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

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.

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

---
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";
---

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

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

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

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

<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>

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! ✅

---
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

I can add CSS styles to an individual page using an Astro <style> tag.
I can use variables to style elements on the page.

Resources

Contribute

Community