Recap Challenge #1

Part of the Styling with CSS section of Coddy's HTML journey — lesson 29 of 76.

Challenge

Easy

Now that you've mastered various techniques for styling text and backgrounds using CSS, it's time to put your knowledge to the test with a comprehensive challenge. You'll apply what you've learned about colors, hex codes, RGB values and transparency with RGBA to create a specific design.

You are given an HTML document with a heading (<h1>), a paragraph (<p>), and a division (<div>). Your task is to use the text and background 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 white, the background-color to #000080 (navy blue), and the text-align to center.
Write a CSS rule that targets the <p> element. Set the color to #FFFFFF (white), the background-color to rgba(0, 0, 0, 0.5) (semi-transparent black), and the font-size to 18px.
Write a CSS rule that targets the <div> element. Set the background-color to rgba(237, 170, 26, 1) (golden yellow) and the color to white.

Try it yourself

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>