Skip to content

Latest commit

 

History

History
209 lines (158 loc) · 5.72 KB

4.mdx

File metadata and controls

209 lines (158 loc) · 5.72 KB
type title description i18nReady
tutorial
Style your About page
Tutorial: Build your first Astro blog — Add an Astro style tag for scoped styling on the page
true

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!

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

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

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

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

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

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

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

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 = "navy";
---
```

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

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

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>
```
  1. 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