Style your About page

import Checklist from '~~/components/Checklist.astro'; import Spoiler from '~~/components/Spoiler.astro'; import Box from '~~/components/tutorial/Box.astro'; import PreCheck from '~~/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components';

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

<PreCheck> - Style items on a single page - Use CSS variables </PreCheck>

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.

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

```astro title="src/pages/about.astro" ins={6-11}
<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?  <Spoiler>black</Spoiler>
    - Your About page? <Spoiler>purple</Spoiler>
    - Your Blog page? <Spoiler>black</Spoiler>

- The page with the biggest title text is? <Spoiler>Your About page</Spoiler>

:::tip
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.
:::

2. 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:

```astro title="src/pages/about.astro" 'class="skill"'
<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:

```astro title="src/pages/about.astro" ins={6-9}
<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. </Steps>

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.

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

```astro title="src/pages/about.astro" ins={17}
---
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 = "crimson";
---
```

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

```astro title="src/pages/about.astro" "define:vars={{skillColor}}" "var(--skillColor)" del={7} ins={8}
<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 crimson red, as set by the skillColor variable passed to the define:vars directive. </Steps>

Try it yourself - Define CSS variables

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

```astro title="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 crimson red - The text is bold - The list items are in all-caps (all uppercase letters) </Steps>

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 = "crimson";
const fontWeight = "bold";
const textCase = "uppercase";
---

</details> </Box> <Box icon="check-list"> ## Checklist <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. </Checklist> </Box>

Style an individual page

Use your first CSS variable

Try it yourself - Define CSS variables

Resources