Recap Challenge #2

Part of the Styling with CSS section of Coddy's HTML journey. Lesson 24 of 76.

Challenge

Easy

In this second recap challenge, you'll apply your knowledge of text styling properties in CSS to recreate a specific design. This challenge will test your ability to combine various text properties, such as color, font-family, font-size, font-weight, text-align, and text-decoration, to match a given design.

You are given an HTML document with a heading (<h1>), a paragraph (<p>), a link (<a>), and an unordered list (<ul>) with list items (<li>). Your task is to use the text styling properties you've learned to style these elements to match the design shown in the image below:

Follow the steps below:

Write a CSS rule that targets the <h1> element. Set the color to black, the font-family to "Times New Roman", Times, serif, the font-size to 48px, the font-weight to bold, and the text-align to center.
Write a CSS rule that targets the <p> element. Set the color to gray, the font-family to Arial, Helvetica, sans-serif, the font-size to 18px, and the text-align to center.
Write a CSS rule that targets the <a> element. Set the color to red, the text-decoration to none.
Write a CSS rule that targets all <li> elements. Set the color to green, the font-family to "Courier New", Courier, monospace, the font-size to 25px, and the font-weight to 600.

Try it yourself

<html>
<head>
    <title>Recap Challenge #2</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>