Estiliza tu página 'Acerca de'

Ahora que ya tienes una página ‘Acerca de’ con contenido sobre ti, ¡es hora de darle estilo!

Prepárate para...

Estilizar elementos en una sola página.
Utilizar variables CSS

Estiliza una página individual

Usando las etiquetas <style></style> de Astro, puedes dar estilo a los elementos de tu página. Si añades atributos y directivas a estas etiquetas, tendrás aún más formas de aplicar estilos.

Copia el siguiente código y pégalo en src/pages/about.astro:
src/pages/about.astro
```
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{pageTitle}</title>
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
    </style>
  </head>
```
Comprueba las tres páginas en la vista previa de tu navegador
- De qué color es el título de la página:
  - ¿Tu página de inicio? negro
  - ¿Tu página ‘Acerca de’? purpura
  - ¿La página de tu blog? negro
- La página con el mayor texto de título es? Tu página ‘Acerca de’
Si no puedes determinar los colores visualmente, puedes utilizar las herramientas de desarrollo de tu navegador para inspeccionar los elementos de título <h1> y verificar el color del texto aplicado.
Añade el nombre de clase skill a los elementos <li> generados en tu página ‘Acerca de’, para que puedas aplicarles estilo. Tu código debería tener este aspecto:
src/pages/about.astro
```
<p>Mis habilidades son:</p>
<ul>
  {skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>
```

Añade el siguiente código a la etiqueta de estilo existente:

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

Vuelve a visitar tu página ‘Acerca de’ en tu navegador y comprueba, mediante inspección visual o herramientas de desarrollo, que cada elemento de tu lista de habilidades está ahora en verde y en negrita.

Utiliza tu primera variable CSS

La etiqueta de Astro <style> también puede hacer referencia a cualquier variable de tu script frontmatter usando la directiva define:vars={ {...} }. Puedes definir variables dentro de tu código vallado, y luego utilizarlas como variables CSS en tu etiqueta de estilo.

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

---
const pageTitle = "Sobre mi";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Escritor técnico",
  hobbies: ["fotografia", "observación de aves", "peñarol"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];

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

const skillColor = "navy";
---

Actualiza tu etiqueta <style> para definir primero, y 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>

Comprueba tu página ‘Acerca de’ en la vista previa de tu navegador. Deberías ver que las habilidades son ahora de color azul marino, tal y como establece la variable skillColor pasada a la directiva define:vars.

Pruébalo tú mismo - Definir variables CSS

Actualiza la etiqueta <style> de tu página ‘Acerca de’ 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 las definiciones de variables que falten en tu script frontmatter para que tu nueva etiqueta <style> aplique correctamente estos estilos a tu lista de habilidades:
- El color del texto es azul marino
- El texto está en negrita
- Los elementos de la lista están en mayúsculas (todo en mayúsculas)

✅ ¡Enséñame el código! ✅

---
const pageTitle = "Sobre mi";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Escritor técnico",
  hobbies: ["fotografia", "observación de aves", "peñarol"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];

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

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

Checklist

Puedo añadir estilos CSS a una página individual utilizando una etiqueta Astro <style>.
Puedo utilizar variables para dar estilo a los elementos de la página.

Recursos

Contribuir Comunidad Patrocinador