CSSmarkup~15 mins

RGB and RGBA in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Coloring a Box with RGB and RGBA

📖 Scenario: You want to create a colorful box on a webpage. You will use RGB and RGBA colors to style the box's background. RGB colors use red, green, and blue values. RGBA colors add transparency with an alpha value.

🎯 Goal: Build a simple webpage with a box that has a solid RGB background color and a semi-transparent RGBA background color on hover.

📋 What You'll Learn

Create a box with a fixed size

Use an RGB color for the box background

Add a hover effect that changes the background to an RGBA color with transparency

Use CSS variables for the colors

Make sure the box is centered on the page

💡 Why This Matters

🌍 Real World

Using RGB and RGBA colors is common in web design to create vibrant colors and add transparency effects for better visual appeal.

💼 Career

Web developers often use RGB and RGBA colors to style websites and create interactive elements that respond to user actions like hovering.

Progress0 / 4 steps

Create the HTML structure with a box

Write the HTML code to create a <div> with the class color-box. This will be the box you will style.

CSS

Need a hint?

Use a <div> tag with class color-box inside the <body>.

Add CSS variables for RGB and RGBA colors

In a <style> tag inside the <head>, create CSS variables called --rgb-color with value rgb(255, 0, 0) and --rgba-color with value rgba(255, 0, 0, 0.5).

CSS




  
  
  RGB and RGBA Box
  
    :root {
      /* Define CSS variables for colors here */
    }

Need a hint?

Use :root selector to define CSS variables with --rgb-color and --rgba-color.

Style the box with RGB background and size

In the <style> tag, add CSS for the .color-box class. Set the width and height to 10rem. Set the background color to the CSS variable --rgb-color. Center the box horizontally and vertically using Flexbox on the body.

CSS




  
  
  RGB and RGBA Box
  
    :root {
      --rgb-color: rgb(255, 0, 0);
      --rgba-color: rgba(255, 0, 0, 0.5);
    }
    body {
      /* Center the box horizontally and vertically using Flexbox */
    }
    .color-box {
      /* Set width, height, and background color here */
    }

Need a hint?

Use Flexbox on body to center the box. Use var(--rgb-color) for the background color.

Add hover effect with RGBA background color

In the <style> tag, add a CSS rule for .color-box:hover. Change the background color to the CSS variable --rgba-color on hover.

CSS




  
  
  RGB and RGBA Box
  
    :root {
      --rgb-color: rgb(255, 0, 0);
      --rgba-color: rgba(255, 0, 0, 0.5);
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .color-box {
      width: 10rem;
      height: 10rem;
      background-color: var(--rgb-color);
    }
    /* Add hover effect here */

Need a hint?

Use the :hover pseudo-class on .color-box to change the background color to var(--rgba-color).