Menu
Coddy logo textTech

Desafío de repaso n.º 1

Parte de la sección Estilos con 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 seleccione todos los elementos <h1>.
    • Establece el color en azul oscuro.
    • Establece el tamaño de fuente en 32px.
    • Establece el grosor de fuente en negrita.
    • Establece la alineación del texto en el centro.
  2. Escribe una regla CSS que seleccione todos los elementos con la clase intro-text.
    • Establece el color en gris.
    • Establece la familia de fuentes en Arial, Helvetica, sans-serif;
    • Establece el tamaño de fuente en 18px.
  3. Escribe una regla CSS que seleccione todos los elementos <li>.
    • Establece el grosor de fuente en 600.
  4. Escribe una regla CSS que seleccione todos los elementos <a>.
    • Establece la decoración del texto en none.
    • Establece la fuente en tu familia de fuentes preferida:  "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 Estilos con CSS

Practica por tu cuenta: Playground de Web