Estiliza tu página About

Ahora que tienes una página About con contenido sobre ti, ¡es hora de estilizarla!

Prepárate para…

Estiliza elementos en una sola página
Usa variables CSS

Estiliza una página individual

Usando las propias etiquetas <style></style> de Astro, puedes estilizar elementos en tu página. Añadir atributos y directivas a estas etiquetas te da aún más formas de estilizar.

Copia el siguiente código y pégalo en 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>
```
Revisa las tres páginas en la vista previa de tu navegador.
- ¿De qué color es el título de la página de:
  - Your Home page? negro
  - Your About page? púrpura
  - Your Blog page? negro
- The page with the biggest title text is? Tu página About
Si no puedes determinar los colores visualmente, puedes usar las dev tools de tu navegador para inspeccionar los elementos de título <h1> y verificar el color de texto aplicado.
Añade el nombre de clase skill a los elementos <li> generados en tu página About, para que puedas estilizarlos. Tu código debería verse así ahora:
src/pages/about.astro
```
<p>My skills are:</p>
<ul>
  {skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>
```

Añade el siguiente código a tu etiqueta style existente:

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

Visita tu página About en tu navegador de nuevo, y verifica, mediante inspección visual o dev tools, que cada elemento en tu lista de habilidades ahora está en verde y negrita.

Usa tu primera variable CSS

La etiqueta <style> de Astro también puede referenciar cualquier variable de tu script de frontmatter usando la directiva define:vars={ {...} }. Puedes definir variables dentro de tu valla de código, luego usarlas como variables CSS en tu etiqueta style.

Define una variable skillColor añadiéndola al script de frontmatter de src/pages/about.astro así:

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

Actualiza tu etiqueta <style> existente de abajo para primero definir, luego usar esta variable skillColor dentro de llaves dobles.

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

Revisa tu página About en la vista previa de tu navegador. Deberías ver que las habilidades ahora están en rojo carmesí, como lo establece la variable skillColor pasada a la directiva define:vars.

Pruébalo tú mismo - Define variables CSS

Actualiza la etiqueta <style> en tu página About para que coincida con la de abajo.

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

Añade cualquier definición de variable que falte en tu script de frontmatter para que tu nueva etiqueta <style> aplique exitosamente estos estilos a tu lista de habilidades:
- El color de texto es rojo carmesí
- El texto está en negrita
- Los elementos de la lista están en mayúsculas (todas las letras en mayúscula)

✅ ¡Muéstrame el código! ✅

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

Checklist

Puedo añadir estilos CSS a una página individual usando una etiqueta <style> de Astro.
Puedo usar variables para estilizar elementos en la página.

Recursos

Contribuir Comunidad Patrocinar