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>