Transparency with RGBA

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

In CSS, RGBA colors are an extension of RGB colors that include an alpha channel to specify the opacity of a color. RGBA stands for Red, Green, Blue, and Alpha. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque), allowing you to create colors with varying degrees of transparency.

Here's the basic syntax for using RGBA colors in CSS:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

For example:

p {
    color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
    background-color: rgba(0, 255, 0, 0.3); /* Semi-transparent green */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* Semi-transparent blue */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
}

Challenge

Easy

You are given an HTML document with an <h3> heading and a <p> paragraph. Your task is to use the background-color property with the rgba() function to style these elements with transparency. Follow the steps below:

Write a CSS rule that targets the <h3> element. Set the background color to blue using rgba(0, 0, 255, 0.5) (50% transparency).
Write a CSS rule that targets the <p> element. Set the background color to green using rgba(0, 128, 0, 0.3) (30% transparency).

Try it yourself

<html>
<head>
    <title>Transparency with RGBA</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h3>Did You Know?</h3>
    <p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>