Menu
Coddy logo textTech

Desafío de repaso #1

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 23 de 76.

challenge icon

Desafío

Fácil

En este primer desafío de repaso, aplicarás tus conocimientos sobre las propiedades de estilo de texto en CSS para recrear un diseño específico. Este desafío pondrá a prueba tu capacidad para combinar varias propiedades de texto, como color, font-family, font-size, font-weight, text-align y text-decoration.

Se te proporciona un documento HTML con varios elementos. Tu tarea es aplicar diferentes propiedades que has aprendido en esta sección para dar estilo a estos elementos. Sigue los pasos a continuación:

  1. Escribe una regla CSS que afecte a todos los elementos <h1>.
    • Establece el color a dark blue.
    • Establece el tamaño de fuente a 32px.
    • Establece el grosor de fuente a bold.
    • Establece la alineación del texto a center.
  2. Escribe una regla CSS que afecte a todos los elementos con la clase intro-text.
    • Establece el color a gray.
    • Establece el font-family a Arial, Helvetica, sans-serif;
    • Establece el tamaño de fuente a 18px.
  3. Escribe una regla CSS que afecte a todos los elementos <li>.
    • Establece el font-weight a 600.
  4. Escribe una regla CSS que afecte a todos los elementos <a>.
    • Establece el text-decoration a none.
    • Establece la fuente a tu font-family preferida a  "Times New Roman", Times, serif.

Pruébalo tú mismo

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Discovering the Ocean</h1>
    <p class="intro-text">The ocean covers 70% of the Earth's surface and is full of life. It also helps regulate the planet's climate.</p>
    <h2>Marine Life</h2>
    <ul>
        <li>Whales</li>
        <li>Octopuses</li>
        <li>Coral Reefs</li>
    </ul>
    <p>Learn more at <a href="https://www.oceans.org" target="_blank">The Ocean Conservation Society</a>.</p>
</body>
</html>

Todas las lecciones de Styling with CSS